Ajax O Objeto Xml Http Request Parte 2

1.315 visualizações

Publicada em

0 comentários
0 gostaram
Estatísticas
Notas
  • Seja o primeiro a comentar

  • Seja a primeira pessoa a gostar disto

Sem downloads
Visualizações
Visualizações totais
1.315
No SlideShare
0
A partir de incorporações
0
Número de incorporações
5
Ações
Compartilhamentos
0
Downloads
14
Comentários
0
Gostaram
0
Incorporações 0
Nenhuma incorporação

Nenhuma nota no slide

Ajax O Objeto Xml Http Request Parte 2

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

×