javascript - ejemplo - ¿Cómo obtener la respuesta de XMLHttpRequest?

xmlhttprequest post

Question

Me gustaría saber cómo usar XMLHttpRequest para cargar el contenido de una URL remota y tener el HTML del sitio accedido almacenado en una variable JS.

Digamos, si quisiera cargar y alertar () sobre el HTML de http://foo.com/bar.php , ¿cómo lo haría?

Answer 1

En XMLHttpRequest , el uso de XMLHttpRequest.responseText puede generar la excepción como a continuación

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

La mejor forma de acceder a la respuesta de XHR es la siguiente

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 2

Sugeriría buscar en fetch . Es el equivalente de ES5 y usa Promesas. Es mucho más legible y fácil de personalizar.

const url = "https://.com";
fetch(url)
    .then(
        response => response.text() // .json(), etc.
        // same as function(response) {return response.text();}
    ).then(
        html => console.log(html)
    );

Más información:

Documentación de Mozilla

¿Puedo usar (87% feb 2018)

Tutorial de Matt Walsh

Answer 3

Puede obtenerlo mediante XMLHttpRequest.responseText en XMLHttpRequest.onreadystatechange cuando XMLHttpRequest.readyState es igual a XMLHttpRequest.DONE .

Aquí hay un ejemplo (no es compatible con 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);

Para una mejor compatibilidad con navegadores cruzados, no solo con IE6 / 7, sino también para cubrir algunos errores o fugas de memoria específicos del navegador, y también para una menor verbosidad con el lanzamiento de solicitudes ajaxical, puede usar jQuery .

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

Tenga en cuenta que debe tener la misma política de origen para JavaScript en la cuenta cuando no se ejecuta en localhost. Es posible que desee considerar crear un script proxy en su dominio.