Como era utilizado o Ajax no começo
Este artigo apresenta a sintaxe de como era utilizado o objeto XMLHttpdRequest no início.
Este artigo apresenta a sintaxe de como era utilizado o objeto XMLHttpRequest no início da utilização da técnica AJAX.
A primeira forma de utilização do objeto XMLHttpRequest incluía o manipulador de evento onreadystatechange
. Na especifiação
do objeto data em dezembro de 2014 o evento onreadystatechange
ainda
é suportado, quer dizer que ele não saiu de uso. Porém, a especificação apresenta novas formas de lidar com o objeto
(veja a matéria Ajax - Introdução).
Vamos focar nossa atenção para o evento onreadystatechange
. Ele é acionado a cada alteração da propriedade
readyState
, ou seja, a cada troca de valor dessa propriedade o evento onreadystatechange
é executado.
var xhr = new XMLHttpRequest();
xhr.open("GET", "foo.txt", true);
xhr.send();
xhr.onreadystatechange = function () {
if(this.readyState == this.DONE) {
// success!
if(this.status == 200) {
console.log(this.responseText)
return;
}
// something went wrong
else {
console.log(this.status)
}
}
}
A propriedade readyState
pode ter um dos valores abaixo:
0
UNSENT1
OPENED2
HEADERS_RECEIVED3
LOADING4
DONE
Ao utilização do objeto XMLHttpdRequest implica em passar passar por esses estados. Por curiosidade você poderá executar o seguinte código.
...
...
...
xhr.onreadystatechange = function () {
console.log(this.readyState);
}
A resposta do servidor estará pronta quando readyState
for igual a 1
, podemos fazer isso:
xhr.onreadystatechange = function () {
if(this.readyState == 1) {
}
}
Mas preferimos utilizar as contantes do objeto XMLHttpRequest.
xhr.onreadystatechange = function () {
if(this.readyState == this.DONE) {
}
}
Após observar que a requisição está pronta para uso, devemos saber qual foi o
código de resposta do HTTP. Fazemos
isso checando o valor da proprieda status
.
xhr.onreadystatechange = function () {
if(this.readyState == this.DONE) {
if(this.status == 200) {
}
}
}
A partir deste ponto, podemos obter os dados em dois formatos: texto plano e XML. As propriedades para acessar
os dados são, respectivamente, responseText
e responseXML
.
Fonte MDN - Começando com Ajax