Как получить ответ XMLHttpRequest?
Я хотел бы знать, как использовать XMLHttpRequest для загрузки содержимого удаленного URL-адреса и иметь HTML-адрес доступного сайта, хранящегося в переменной JS.
Скажем, если бы я хотел загрузить и предупредить() HTML http://foo.com/bar.php, как бы я это сделал?
Ответы
Ответ 1
Вы можете получить его XMLHttpRequest.responseText
в XMLHttpRequest.onreadystatechange
, когда XMLHttpRequest.readyState
равно XMLHttpRequest.DONE
.
Вот пример (несовместимый с 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);
Для лучшей совместимости с кроссбраузерами не только с IE6/7, но и для покрытия некоторых утечек памяти или ошибок, связанных с конкретным браузером, а также для меньшей многословности при стрельбе ajaxical request, вы можете использовать jQuery.
$.get('http://example.com', function(responseText) {
alert(responseText);
});
Обратите внимание, что вы должны учитывать ту же самую исходную политику для JavaScript, когда она не работает на localhost. Возможно, вам захочется создать прокси-сервер script в вашем домене.
Ответ 2
В XMLHttpRequest
использование XMLHttpRequest.responseText
может вызвать исключение, как показано ниже
Failed to read the \'responseText\' property from \'XMLHttpRequest\':
The value is only accessible if the object\ \'responseType\' is \'\'
or \'text\' (was \'arraybuffer\')
Лучший способ получить ответ от XHR следующим образом
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);
Ответ 3
Я предлагаю посмотреть fetch
. Это эквивалент ES5 и использует Promises. Он намного читабельнее и легко настраивается.
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)
);