O documento explica como a propriedade onreadystatechange do objeto XMLHttpRequest permite associar uma função para lidar com as mudanças de estado da requisição AJAX. Ele também descreve os cinco estados possíveis e como verificar o status da resposta para garantir que a comunicação ocorreu com sucesso.

1. AJAX - O Objeto XMLHttpRequest - Parte 2
Principal .: Compras :.
Início AJAX - O Objeto XMLHttpRequest - Parte 2
Categorias
Ajax 18/01/2006 18:00:00
DHTML
Autor: Rondinely S. de Almeida
XML
PHP
Serviços para Webmasters
MySQL
IP Hospedagem PhP
Qual é o meu IP? Site Grátis. Pagamento Facilitado Ativação
Imediata. R$ 5,90/mês
WebNames.com.br
Hospedagem de Sites
Teste Agora e Comprove a Qualidade de nossa
Estrutura e Atendimento.
www.RedeHost.com.br
Edicom
NF-e Nota Fiscal Eletrônica Brasil Soluções
tecnológicas e integração
www.edicomgroup.com/
|<< Primeira < Anterior 1/2 Próxima > Última >>|
Exemplos:
dados.html
conteudo_simples.html
Este é o segundo arquivo da série "AJAX - O Objeto XMLHttpRequest", como prometemos no
final do primeiro artigo (AJAX - O Objeto XMLHttpRequest - Parte 1), estudaremos agora a
propriedade onreadystatechange do objeto XMLHttpRequest.
Já vimos que para nos comunicarmos com um documento web via AJAX devemos criar o objeto
XMLHttpRequest:
xmlhttp = new XMLHttpRequest();
Abrir o documento web.
xmlhttp.open("GET", "/dados.html");
Enviar ou não parâmetros para a comunicação.
xmlhttp.send(null);
Capturar a resposta na propriedade responseXML ou responseText
resposta = xmlhttp.responseXML
A dúvida que havia ficado era: se vamos usar o objeto XMLHttpRequest para realizar uma
comunicação assíncrona com um documento num servidor qualquer, o script não irá aguardar o
http://www.hospedia.com.br/artigos/5/ajax/1/ajax_-_o_objeto_xmlhttprequest_-_parte_2.html[07/12/2009 15:08:51]

2. AJAX - O Objeto XMLHttpRequest - Parte 2
retorno da resposta da comunicação, uma vez que isto poderia "congelar" a página
indefinidamente, então como saberemos o momento certo de buscar a resposta na propriedade
reponseXML ou responseText?
A solução para este problema está na propriedade onreadystatechange. Esta propriedade nos
permite associar uma função (ou código Javascript) para ser executado toda vez que o evento de
mudança de estado do obejto XMLHttpRequest for alterado. Ou seja, podemos definir o que o
script fará quando o objeto XMLHttpRequest confirmar que recebeu um retorno do documento
web.
A atribuição de uma função pode ser feita da seguinte maneira.
xmlhttp.onreadystatechange = processadorMudancaEstado;
Para criarmos uma função que manipule os estados do objeto XMLHttpRequest precisamos
conhecê-los.
0 - Não iniciado (Uninitialised)
1 - Carregando (Loading)
2 - Carregado (Loaded)
3 - Interativo (Interactive)
4 - Completado (Completed)
Como podemos notar, temos cinco estados possíveis para o objeto XMLHttpRequest: 0 - não
iniciado, que acontece se nenhuma comunicação foi iniciada ainda; 1 - carregando, obtemos
enquanto a comunicação está acontecendo, o documento foi encontrado e está sendo carregado;
2 - carregado, o documento foi carregado; 3 - interativo, o objeto XMLHttpRequest está em
modo interativo; e 4 - completado, a comunicação foi realizada.
Estes estados podem ser acessados através da propriedade readyState do objeto
XMLHttpRequest.
estadoObj = xmlhttp.readyState;
O estado que mais nos interessa é o estado 4 (completado), quando o objeto
XMLHttpRequest atinge este estado significa que a comunicação foi realizada, com o
resultado esperado ou não. O documento ao qual estamos acessando pode ter sido carregado
com sucesso ou pode ter havido uma falha. Temos que fazer mais um teste então, para saber se
o carragamento foi realizado como o esperado.
Não deixe de ver também:
Hospedagem de Sites Edicom
Teste Agora e Comprove a Qualidade de NF-e Nota Fiscal Eletrônica Brasil Soluções
nossa Estrutura e Atendimento. tecnológicas e integração
R d H t b di /
Podemos saber se um documento foi carregado com sucesso através da resposta que o servidor
web nos dá após a requisição de algum documento, esta resposta fica armazenada no objeto
XMLHttpRequest na propriedade status. Dois tipos de repostas são os mais importantes para nós:
404 - não encontrado, ou 200 - ok.
estadoServidor = xmlhttp.status;
Agora podemos criar uma função que irá armazenar a resposta dada pelo servidor ao
acessarmos um determinado documento via AJAX.
function processadorMudancaEstado () {
if ( xmlhttp.readyState == 4) { // Completo
if ( xmlhttp.status == 200) { // resposta do servidor OK
document.getElementById ( "div_conteudo"). innerHTML = xmlhttp.responseText ;
} else {
alert( "Problema: " + xmlhttp.statusText );
}
}
}
Esta função testará todas as possibilidades que citamos anteriormente, e caso comprove que a
comunicação foi realizada com sucesso carrega o resultado em forma de texto (responseText) em
uma DIV cuja id é "div_conteudo".
Propriedade ID
http://www.hospedia.com.br/artigos/5/ajax/1/ajax_-_o_objeto_xmlhttprequest_-_parte_2.html[07/12/2009 15:08:51]

3. AJAX - O Objeto XMLHttpRequest - Parte 2
A propriedade ID de um elemento HTML serve como um nome ou identificação para o elemento.
Em um documento HTML deve existir um, e somente um elemento com a mesma identificação.
Caso a comunicação falhe será apresentado um alerta com o estado da falha, estado este
acessado na propriedade statusText do objeto XMLHttpRequest.
Um script simples mas completo ficaria assim:
var xmlhttp = null;
function pegaConteudo() {
try {
xmlhttp = new ActiveXObject("Msxml2.XMLHTTP");
} catch (e) {
try {
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
} catch (E) {
xmlhttp = false;
}
}
if (!xmlhttp && typeof XMLHttpRequest != 'undefined' ) {
try {
xmlhttp = new XMLHttpRequest();
} catch (e) {
xmlhttp = false ;
}
}
if (xmlhttp) {
xmlhttp.onreadystatechange = processadorMudancaEstado;
xmlhttp.open("GET", "/dados.html");
xmlhttp.setRequestHeader('Content-Type','text/xml');
xmlhttp.setRequestHeader('encoding','ISO-8859-1');
xmlhttp.send(null);
}
}
function processadorMudancaEstado () {
if ( xmlhttp.readyState == 4) { // Completo
if ( xmlhttp.status == 200) { // resposta do servidor OK
document.getElementById ( "div_conteudo"). innerHTML = xmlhttp.responseText ;
} else {
alert( "Problema: " + xmlhttp.statusText );
}
}
}
Pode-se notar que criamos este exemplo baseado nos outros exemplos de bloco de código que
viamos vendo no decorrer destes artigos. Devemos entretando destacar algumas diferenças.
|<< Primeira < Anterior 1/2 Próxima > Última >>|
Artigos relacionados
AJAX - O Objeto XMLHttpRequest - Parte 4 : 17/04/2006
Como prometemos no artigo anterior vamos ver como, utilizando o mesmo...
AJAX - O Objeto XMLHttpRequest - Parte 3 : 12/03/2006
Como prometemos no artigo anterior veriamos uma aplicação prática para...
AJAX - O Objeto XMLHttpRequest - Parte 1 : 12/01/2006
Este é o primeiro artigo de uma série na qual estaremos explorando os...
Alimentando uma ComboBox dinamicamente utilizando técnicas AJAX :
28/11/2005
Este artigo mostrará como responder a uma interação...
Curso de ASP
http://www.hospedia.com.br/artigos/5/ajax/1/ajax_-_o_objeto_xmlhttprequest_-_parte_2.html[07/12/2009 15:08:51]

4. AJAX - O Objeto XMLHttpRequest - Parte 2
Curso em CD-ROM passo-a-passo Aprenda sem
sair de casa. R$ 27,00
www.kazi.com.br
Venda Seu Site
Chegou a hora de ganhar dinheiro com seu site...
www.vendaseusite.com.br
Curso de C# -R$499,00 12X
Prof autor de livros de C# SÓ HOJE On-line e ao
vivo com certificado
www.4cursos.com.br
>> Inicio <<
© Copyright hospedia.com.br - 2005
Todos os direitos reservados.
Seu Ponto de Partida na Internet
Receitas de Bolos
Lyrics
http://www.hospedia.com.br/artigos/5/ajax/1/ajax_-_o_objeto_xmlhttprequest_-_parte_2.html[07/12/2009 15:08:51]