Ajax O Objeto Xml Http Request Parte 2

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]


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



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...

Como prometemos no artigo anterior veriamos uma aplicação prática para...

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



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


Ajax O Objeto Xml Http Request Parte 2

Mais conteúdo relacionado

Mais procurados (6)

Destaque (18)

Semelhante a Ajax O Objeto Xml Http Request Parte 2 (20)

Ajax O Objeto Xml Http Request Parte 2