Bagaimana cara mendapatkan respons XMLHttpRequest?


187

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?



2
jika Anda terbuka untuk JS Libraries, jQuery benar-benar menyederhanakan ini dengan metode .load (): api.jquery.com/load
scunliffe

20
terima kasih Tuhan, akhirnya hasil google yang tidak membahas jQuery: |
Sam Vloeberghs

Jawaban:


277

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.


Bagaimana cara membuat proksi itu?
Chris - Jr

bekerja seperti pesona :)
Anurag

29

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


27

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();
}


Bekerja dengan baik untuk saya.
Mayur S

Contoh yang baik. Bekerja dengan baik.

16

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);
Dengan menggunakan situs kami, Anda mengakui telah membaca dan memahami Kebijakan Cookie dan Kebijakan Privasi kami.
Licensed under cc by-sa 3.0 with attribution required.