AJAX - O Objeto XMLHttpRequest - Parte 2

http://www.hospedia.com.br/artigos/5/ajax/1/ajax_-_o_objeto_xmlhttprequest_-_parte_2.html[07/12/2009 15:08:51]

.: Compras :.AJAX - O Objeto XMLHttpRequest - Parte 2

18/01/2006 18:00:00

Autor: Rondinely S. de Almeida

Serviços para Webmasters

Exemplos:dados.htmlconteudo_simples.html

Este é o segundo arquivo da série "AJAX - O Objeto XMLHttpRequest", como prometemos nofinal do primeiro artigo (AJAX - O Objeto XMLHttpRequest - Parte 1), estudaremos agora apropriedade onreadystatechange do objeto XMLHttpRequest .

Já vimos que para nos comunicarmos com um documento web via AJAX devemos criar o objetoXMLHttpRequest :

Abrir o documento web.

Enviar ou não parâmetros para a comunicação.

Capturar a resposta na propriedade responseXML ou responseText

A dúvida que havia ficado era: se vamos usar o objeto XMLHttpRequest para realizar umacomunicação assíncrona com um documento num servidor qualquer, o script não irá aguardar o

xmlhttp = new XMLHttpRequest();

xmlhttp.open("GET", "/dados.html");

xmlhttp.send(null);

resposta = xmlhttp.responseXML

Hospedagem PhPSite Grátis. Pagamento Facilitado AtivaçãoImediata. R$ 5,90/mêsWebNames.com.br

Hospedagem de SitesTeste Agora e Comprove a Qualidade de nossaEstrutura e Atendimento.www.RedeHost.com.br

EdicomNF-e Nota Fiscal Eletrônica Brasil Soluçõestecnológicas e integraçãowww.edicomgroup.com/

|<< Primeira < Anterior 1/2 Próxima > Última >>|

PrincipalInício

CategoriasAjax

DHTML

XML

PHP

MySQLIP

Qual é o meu IP?

AJAX - O Objeto XMLHttpRequest - Parte 2

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áginaindefinidamente, então como saberemos o momento certo de buscar a resposta na propriedadereponseXML ou responseText?

A solução para este problema está na propriedade onreadystatechange. Esta propriedade nospermite associar uma função (ou código Javascript) para ser executado toda vez que o evento demudança de estado do obejto XMLHttpRequest for alterado. Ou seja, podemos definir o que oscript fará quando o objeto XMLHttpRequest confirmar que recebeu um retorno do documentoweb.

A atribuição de uma função pode ser feita da seguinte maneira.

Para criarmos uma função que manipule os estados do objeto XMLHttpRequest precisamosconhecê-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ãoiniciado, que acontece se nenhuma comunicação foi iniciada ainda; 1 - carregando, obtemosenquanto 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á emmodo interativo; e 4 - completado, a comunicação foi realizada.

Estes estados podem ser acessados através da propriedade readyState do objetoXMLHttpRequest .

O estado que mais nos interessa é o estado 4 (completado), quando o objetoXMLHttpRequest atinge este estado significa que a comunicação foi realizada, com oresultado esperado ou não. O documento ao qual estamos acessando pode ter sido carregadocom sucesso ou pode ter havido uma falha. Temos que fazer mais um teste então, para saber seo carragamento foi realizado como o esperado.

Não deixe de ver também:

Podemos saber se um documento foi carregado com sucesso através da resposta que o servidorweb nos dá após a requisição de algum documento, esta resposta fica armazenada no objetoXMLHttpRequest na propriedade status. Dois tipos de repostas são os mais importantes para nós:404 - não encontrado, ou 200 - ok.

Agora podemos criar uma função que irá armazenar a resposta dada pelo servidor aoacessarmos um determinado documento via AJAX.

Esta função testará todas as possibilidades que citamos anteriormente, e caso comprove que acomunicação foi realizada com sucesso carrega o resultado em forma de texto (responseText) emuma DIV cuja id é "div_conteudo".

Propriedade ID

xmlhttp.onreadystatechange = processadorMudancaEstado;

estadoObj = xmlhttp.readyState;

estadoServidor = xmlhttp.status;

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 ); } }}

Hospedagem de SitesTeste Agora e Comprove a Qualidade denossa Estrutura e Atendimento.

R d H t b

EdicomNF-e Nota Fiscal Eletrônica Brasil Soluçõestecnológicas e integração

di /

AJAX - O Objeto XMLHttpRequest - Parte 2

http://www.hospedia.com.br/artigos/5/ajax/1/ajax_-_o_objeto_xmlhttprequest_-_parte_2.html[07/12/2009 15:08:51]

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 esteacessado na propriedade statusText do objeto XMLHttpRequest .

Um script simples mas completo ficaria assim:

Pode-se notar que criamos este exemplo baseado nos outros exemplos de bloco de código queviamos vendo no decorrer destes artigos. Devemos entretando destacar algumas diferenças.

Artigos relacionados

AJAX - O Objeto XMLHttpRequest - Parte 4 : 17/04/2006Como prometemos no artigo anterior vamos ver como, utilizando o mesmo...

AJAX - O Objeto XMLHttpRequest - Parte 3 : 12/03/2006Como prometemos no artigo anterior veriamos uma aplicação prática para...

AJAX - O Objeto XMLHttpRequest - Parte 1 : 12/01/2006Este é o primeiro artigo de uma série na qual estaremos explorando os...

Alimentando uma ComboBox dinamicamente utilizando técnicas AJAX :28/11/2005Este artigo mostrará como responder a uma interação...

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 ); } }}

|<< Primeira < Anterior 1/2 Próxima > Última >>|

Curso de ASP

AJAX - O Objeto XMLHttpRequest - Parte 2

http://www.hospedia.com.br/artigos/5/ajax/1/ajax_-_o_objeto_xmlhttprequest_-_parte_2.html[07/12/2009 15:08:51]

>> Inicio <<© Copyright hospedia.com.br - 2005

Todos os direitos reservados.Seu Ponto de Partida na Internet

Receitas de BolosLyrics

Curso em CD-ROM passo-a-passo Aprenda semsair de casa. R$ 27,00www.kazi.com.br

Venda Seu SiteChegou a hora de ganhar dinheiro com seu site...www.vendaseusite.com.br

Curso de C# -R$499,00 12XProf autor de livros de C# SÓ HOJE On-line e aovivo com certificadowww.4cursos.com.br