¿Cómo obtener la respuesta de XMLHttpRequest?
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?
Puedes conseguirlo XMLHttpRequest.responseTexten XMLHttpRequest.onreadystatechangecuando XMLHttpRequest.readyStatesea 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 pérdidas de memoria o errores específicos del navegador, y también para tener menos detalle al activar solicitudes ajaxicas, puede usar jQuery .
$.get('http://example.com', function(responseText) {
alert(responseText);
});
Tenga en cuenta que debe tener en cuenta la política Mismo origen para JavaScript cuando no se ejecuta en localhost. Es posible que desee considerar la posibilidad de crear un script proxy en su dominio.
Usar fetch!
Es mucho más legible y fácilmente personalizable. Todos los navegadores modernos y Node lo admiten. Aquí hay un tutorial más detallado.
const url = "https://stackoverflow.com";
fetch(url)
.then(
response => response.text() // .json(), .blob(), etc.
).then(
text => console.log(text) // Handle here
);
Opcionalmente, puede pasar un segundo parámetro, según las necesidades/tipo de solicitud.
// Example request options
fetch(url, {
method: 'post', // Default is 'get'
body: JSON.stringify(dataToPost),
mode: 'cors',
headers: new Headers({
'Content-Type': 'application/json'
})
})
.then(response => response.json())
.then(json => console.log('Response', json))
En Node.js, necesitarás importar fetchusando:
const fetch = require("node-fetch");
Si desea usarlo de forma sincrónica (no funciona en el ámbito superior):
const json = await fetch(url)
.then(response => response.json())
.catch((e) => {});
Más información:
Tutorial de Matt Walsh
Documentación de Mozilla
Puedo usar
