Wie bekomme ich die Antwort von XMLHttpRequest?

Question

Ich würde gerne wissen, wie XMLHttpRequest verwendet wird, um den Inhalt einer Remote-URL zu laden und den HTML-Code der aufgerufenen Site in einer JS-Variable gespeichert zu haben.

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

Answer 1

Sie erhalten es durch XMLHttpRequest.responseText in XMLHttpRequest.onreadystatechange, wenn XMLHttpRequest.readyState gleich XMLHttpRequest.DONE ist.

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 Kompatibilität Crossbrowser, nicht nur mit IE6/7, aber auch einige browserspezifischen Speicherlecks oder Bugs zu bedecken, und auch für weniger Ausführlichkeit mit ajaxical Anfragen Brennen, könnten Sie jQuery verwenden.

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

Beachten Sie, dass die Same origin policy for JavaScript zu berücksichtigen haben, wenn sie nicht auf localhost läuft. Sie sollten in Erwägung ziehen, ein Proxy-Skript in Ihrer Domäne zu erstellen.

Answer 2

In XMLHttpRequest, XMLHttpRequest.responseText verwendet, kann die Ausnahme wie unten

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, erhöhen die Antwort von XHR zuzugreifen, als

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

Answer 3

folgt ich in fetch suchen würde vorschlagen. Es ist das Äquivalent zu ES5 und verwendet Promises. 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) 
 
    );

Mehr Info:

Mozilla Documentation

Can I Use (88% Mar 2018)

Matt Walsh Tutorial