Jak uzyskać odpowiedź XMLHttpRequest?

Question

Chciałbym wiedzieć, jak używać XMLHttpRequest, aby załadować zawartość zdalnego adresu URL i przechowywać kod HTML odwiedzanej strony przechowywanej w zmiennej JS.

Powiedz, jeśli chciałbym załadować i ostrzec() kod HTML http://foo.com/bar.php, w jaki sposób to zrobić?

Answer 1

Można go uzyskać, podając XMLHttpRequest.responseText w XMLHttpRequest.onreadystatechange, gdy XMLHttpRequest.readyState jest równy XMLHttpRequest.DONE.

Oto przykład (niezgodny z 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); 

dla lepszej kompatybilności crossbrowser, nie tylko z IE6/7, ale również na pokrycie pewne przecieki pamięci konkretnej przeglądarki lub błędów, a także na mniejszą szczegółowość z wypalania ajaxical żądań, można użyć jQuery.

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

Zauważ, że masz do podjęcia Same origin policy for JavaScript pod uwagę, gdy nie działa na localhost. Możesz rozważyć utworzenie skryptu proxy w swojej domenie.

Answer 2

W XMLHttpRequest korzystając XMLHttpRequest.responseText może podnieść wyjątek jak poniżej

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

Najlepszym sposobem, aby uzyskać dostęp do odpowiedzi z XHR następująco

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

bym Proponuję patrząc fetch. Jest to odpowiednik ES5 i używa obietnic. Jest znacznie bardziej czytelny i łatwo można go dostosowywać.

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

Więcej informacji:

Mozilla Documentation

Can I Use (88% Mar 2018)

Matt Walsh Tutorial