Como obter a resposta do XMLHttpRequest?
Eu gostaria de saber como usar o XMLHttpRequest para carregar o conteúdo de um URL remoto e ter o HTML do site acessado armazenado em uma variável JS.
diz, Se eu quisesse carregar e alertar () o HTML de http://foo.com/bar.php como faria isso?
4 answers
XMLHttpRequest.responseText em XMLHttpRequest.onreadystatechange Quando XMLHttpRequest.readyState é igual a XMLHttpRequest.DONE.
Aqui está um exemplo (não compatível com 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 uma melhor compatibilidade crossbrowser, não só com o IE6 / 7, mas também para cobrir algumas fugas de memória específicas do navegador ou erros, e também para menos verbosidade com a execução de Pedidos ajaxicos, você poderia usar jQuery .
$.get('http://example.com', function(responseText) {
alert(responseText);
});
Lembre-se que tem de ter em conta a mesma política de origem para JavaScript Quando não a correr em localhost. Você pode querer considerar criar um script proxy em seu domínio.
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)
);Mais Informações:
Em XMLHttpRequest, a utilização de XMLHttpRequest.responseText pode levantar a excepção como em
Failed to read the \'responseText\' property from \'XMLHttpRequest\':
The value is only accessible if the object\'s \'responseType\' is \'\'
or \'text\' (was \'arraybuffer\')
A melhor maneira de aceder à resposta do XHR, como se segue
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);
A forma simples de usar XMLHttpRequest com pure JavaScript. Você pode definir custom header mas é opcional usado com base no requisito.
1. Utilizar o 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);
}
Pode enviar Parâmetros utilizando o método POST.
2. Usando o método GET:
Por favor, corra abaixo do exemplo e obterá uma resposta 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();
}