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?

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.

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

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

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