Wie erhalte ich die Antwort von XMLHttpRequest?

187

Ich möchte wissen, wie man XMLHttpRequest verwendet, um den Inhalt einer Remote-URL zu laden und den HTML-Code der Site, auf die zugegriffen wird, in einer JS-Variablen zu speichern.

Angenommen, wenn ich den HTML- Code von http://foo.com/bar.php laden und alarmieren möchte () , wie würde ich das tun?

Rohan
quelle
Mögliches Duplikat von Was fehlt mir in der XMLHttpRequest?
Noah Witherspoon
2
Wenn Sie für JS-Bibliotheken offen sind, vereinfacht jQuery dies mit der .load () -Methode: api.jquery.com/load
scunliffe
19
Gott sei Dank, endlich ein Google-Ergebnis, das jQuery nicht anspricht: |
Sam Vloeberghs

Antworten:

277

Sie können es XMLHttpRequest.responseTextin bekommen, XMLHttpRequest.onreadystatechangewenn XMLHttpRequest.readyStategleich ist XMLHttpRequest.DONE.

Hier ist ein Beispiel (nicht kompatibel mit 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);

Für eine bessere Crossbrowser-Kompatibilität, nicht nur mit IE6 / 7, sondern auch zur Abdeckung einiger browserspezifischer Speicherlecks oder -fehler und für eine geringere Ausführlichkeit beim Auslösen ajaxischer Anforderungen, können Sie jQuery verwenden .

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

Beachten Sie, dass Sie die gleiche Ursprungsrichtlinie für JavaScript berücksichtigen müssen, wenn Sie nicht bei localhost ausgeführt werden. Möglicherweise möchten Sie ein Proxy-Skript in Ihrer Domain erstellen.

BalusC
quelle
Wie machen wir diesen Proxy?
Chris - Jr
funktioniert wie ein Zauber :)
Anurag
29

Ich würde vorschlagen, nachzuschauen fetch. Es ist das ES5-Äquivalent und verwendet Versprechen. Es ist viel besser lesbar und leicht anpassbar.

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

In Node.js müssen Sie Folgendes importieren fetch:

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

Wenn Sie es synchron verwenden möchten (funktioniert nicht im oberen Bereich):

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

Mehr Info:

Mozilla-Dokumentation

Kann ich verwenden (94% Okt 2019)

Matt Walsh Tutorial

Gibolt
quelle
26

Die einfache Art, XMLHttpRequestmit zu verwenden pure JavaScript. Sie können festlegen, custom headeraber es wird optional verwendet, je nach Anforderung.

1. Verwenden der POST-Methode:

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

Sie können Parameter mit der POST-Methode senden.

2. Verwenden der GET-Methode:

Bitte führen Sie das folgende Beispiel aus und Sie erhalten eine JSON- Antwort.

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

Mayur S.
quelle
Funktioniert gut für mich.
Mayur S
Gutes Beispiel. Funktioniert gut.
16

Bei XMLHttpRequestVerwendung von XMLHttpRequest.responseTextkann die Ausnahme wie unten ausgelöst werden

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

Der beste Weg, um auf die Antwort von XHR wie folgt zuzugreifen

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);
Fizer Khan
quelle