Как получить ответ 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)
    );