¿Cómo obtener la respuesta de XMLHttpRequest?

187

Me gustaría saber cómo usar XMLHttpRequest para cargar el contenido de una URL remota y almacenar el HTML del sitio al que se accede en una variable JS.

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

Rohan
fuente
posible duplicado de ¿Qué me estoy perdiendo en XMLHttpRequest?
Noah Witherspoon
2
si está abierto a las bibliotecas JS, jQuery realmente simplifica esto con el método .load (): api.jquery.com/load
scunliffe
20
gracias a dios, finalmente un resultado de google que no aborda jQuery: |
Sam Vloeberghs

Respuestas:

277

Se puede conseguir por XMLHttpRequest.responseTexten XMLHttpRequest.onreadystatechangecuando XMLHttpRequest.readyStatees igual a XMLHttpRequest.DONE.

Aquí hay un ejemplo (no 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 entre navegadores, no solo con IE6 / 7, sino también para cubrir algunas fugas o errores de memoria específicos del navegador, y también para una menor verbosidad al disparar solicitudes ajaxical, puede usar jQuery .

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

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

BalusC
fuente
¿Cómo hacemos para hacer ese proxy?
Chris - Jr
funciona como un encanto :)
Anurag
29

Sugeriría investigar fetch. Es el equivalente de ES5 y utiliza Promesas. Es mucho más legible y fácilmente personalizable.

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

En Node.js, deberá importar fetchutilizando:

const fetch = require("node-fetch");

Si desea usarlo sincrónicamente (no funciona en el alcance superior):

const json = await fetch(url)
  .then(response => response.json())
  .catch((e) => {});

Más información:

Documentación de Mozilla

¿Puedo usar (94% Oct 2019)

Matt Walsh Tutorial

Gibolt
fuente
27

La forma sencilla de usar XMLHttpRequestcon pure JavaScript. Puede configurar, custom headerpero es opcional, se utiliza según los requisitos.

1. Usando el método POST:

window.onload = function(){
    var request = new XMLHttpRequest();
    var params = "UID=CORS&name=CORS";

    request.onreadystatechange = function() {
        if (this.readyState == 4 && this.status == 200) {
            console.log(this.responseText);
        }
    };

    request.open('POST', 'https://www.example.com/api/createUser', true);
    request.setRequestHeader('api-key', 'your-api-key');
    request.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
    request.send(params);
}

Puede enviar parámetros utilizando el método POST.

2. Usando el método GET:

Ejecute el siguiente ejemplo y obtendrá una respuesta JSON .

window.onload = function(){
    var request = new XMLHttpRequest();

    request.onreadystatechange = function() {
        if (this.readyState == 4 && this.status == 200) {
            console.log(this.responseText);
        }
    };

    request.open('GET', 'https://jsonplaceholder.typicode.com/users/1');
    request.send();
}

Mayur S
fuente
Funciona bien para mi.
Mayur S
Buen ejemplo. Funcionando bien.
16

En XMLHttpRequest, el uso XMLHttpRequest.responseTextpuede 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 manera de acceder a la respuesta de XHR de la siguiente manera

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);
Fizer Khan
fuente