Saya ingin tahu cara menggunakan XMLHttpRequest untuk memuat konten dari URL jarak jauh dan menyimpan HTML dari situs yang diakses disimpan dalam variabel JS.

Katakanlah, jika saya ingin memuat dan mengingatkan () HTML dari http://foo.com/bar.php , bagaimana saya melakukannya?

Anda bisa mendapatkannya XMLHttpRequest.responseTextdi XMLHttpRequest.onreadystatechangesaat XMLHttpRequest.readyStatesama dengan XMLHttpRequest.DONE.

Berikut ini sebuah contoh (tidak kompatibel dengan IE6 / 7).

var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function() {
    if (xhr.readyState == XMLHttpRequest.DONE) {
        alert(xhr.responseText);
    }
}
xhr.open('GET', 'http://example.com', true);
xhr.send(null);

Untuk kompatibilitas crossbrowser yang lebih baik, tidak hanya dengan IE6 / 7, tetapi juga untuk menutupi beberapa kebocoran atau bug memori khusus peramban, dan juga untuk mengurangi verbositas dengan memunculkan permintaan ajaxical, Anda dapat menggunakan jQuery .

$.get('http://example.com', function(responseText) {
    alert(responseText);
});

Perhatikan bahwa Anda harus memasukkan kebijakan asal yang sama untuk JavaScript ke akun saat tidak berjalan di localhost. Anda mungkin ingin mempertimbangkan untuk membuat skrip proxy di domain Anda.

Saya sarankan melihat ke dalam fetch. Ini setara dengan ES5 dan menggunakan Janji. Itu jauh lebih mudah dibaca dan mudah disesuaikan.

const url = "https://stackoverflow.com";
fetch(url)
    .then(
        response => response.text() // .json(), etc.
        // same as function(response) {return response.text();}
    ).then(
        html => console.log(html)
    );

Di Node.js, Anda harus mengimpor fetchmenggunakan:

const fetch = require("node-fetch");

Jika Anda ingin menggunakannya secara sinkron (tidak berfungsi dalam cakupan teratas):

const json = await fetch(url)
  .then(response => response.json())
  .catch((e) => {});

Info lebih lanjut:

Dokumentasi Mozilla

Dapatkah Saya Menggunakan (94% Okt 2019)

Tutorial Matt Walsh

Cara sederhana untuk digunakan XMLHttpRequestdengan pure JavaScript. Anda dapat mengatur custom headertetapi opsional digunakan berdasarkan persyaratan.

1. Menggunakan Metode POST:

window.onload = function(){
    var request = new XMLHttpRequest();
    var params = "UID=CORS&name=CORS";

    request.onreadystatechange = function() {
        if (this.readyState == 4 && this.status == 200) {
            console.log(this.responseText);
        }
    };

    request.open('POST', 'https://www.example.com/api/createUser', true);
    request.setRequestHeader('api-key', 'your-api-key');
    request.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
    request.send(params);
}

Anda dapat mengirim params menggunakan metode POST.

2. Menggunakan Metode GET:

Silakan jalankan contoh di bawah ini dan akan mendapatkan respons JSON .

window.onload = function(){
    var request = new XMLHttpRequest();

    request.onreadystatechange = function() {
        if (this.readyState == 4 && this.status == 200) {
            console.log(this.responseText);
        }
    };

    request.open('GET', 'https://jsonplaceholder.typicode.com/users/1');
    request.send();
}

Dalam XMLHttpRequest, menggunakan XMLHttpRequest.responseTextdapat meningkatkan pengecualian seperti di bawah ini

 Failed to read the \'responseText\' property from \'XMLHttpRequest\': 
 The value is only accessible if the object\'s \'responseType\' is \'\' 
 or \'text\' (was \'arraybuffer\')

Cara terbaik untuk mengakses respons dari XHR sebagai berikut

function readBody(xhr) {
    var data;
    if (!xhr.responseType || xhr.responseType === "text") {
        data = xhr.responseText;
    } else if (xhr.responseType === "document") {
        data = xhr.responseXML;
    } else {
        data = xhr.response;
    }
    return data;
}

var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function() {
    if (xhr.readyState == 4) {
        console.log(readBody(xhr));
    }
}
xhr.open('GET', 'http://www.google.com', true);
xhr.send(null);