SlideShare una empresa de Scribd logo
1 de 4
Descargar para leer sin conexión
AJAX - O Objeto XMLHttpRequest - Parte 3




               Principal                                                                                                             .: Compras :.
      Início                                 AJAX - O Objeto XMLHttpRequest - Parte 3
             Categorias
      Ajax                      12/03/2006 16:00:00
      DHTML
                                                                     Autor: Rondinely S. de Almeida
      XML
      PHP
                                 Serviços para Webmasters
      MySQL
                  IP
      Qual é o meu IP?
                                     Cursos: Java, RUP, BD 10g
                                     Forms,PL/SQL, Webdesigner, AJAX,PHP
                                     Certificação SUN, JEE, JSF
                                     www.cotiinformatica.com.br




                                     Coletor Dados - Microsiga
                                     Coletores de dados no microsiga
                                     produção,expedição.Solucao completa
                                     www.proativatecnologia.com.br




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

                                    Exemplos:
                                    pesquisaAJAX.html


                                Neste artigo utilizaremos um banco de dados MySQL com nomes dos municípios brasileiro e um
                                formulário de pesquisa para demonstrar como podemos utilizar as técnicas AJAX para, sem ter a
                                necessidade de submeter o formulário, buscar informações em uma base de dados. Estas
                                informações serão exibidas com o auxilio de uma listbox (<select>).

                                A partir deste ponto estudaremos o código javascript do exemplo do início deste artigo.

                                O documento pesquisaAJAX.php

                                var xmlhttp = null; //Objeto XMLHttpRequest.
                                var settimeId = null; //Controle de tarefas agendadas.

                                As duas globais declaradas logo no início deste script servirão respectivamente para o controle do
                                objeto XMLHttpRequest e da execução de funções agendadas.

                                Em seguida definiremos a função que tratará as tecla pressionadas na caixa de texto
                                (<input>) do formulário de pesquisa.

                                function pesquisar(buscar,e) {
                                  var whichCode;
                                  if (!e) var e = window.event;
                                  if (e.keyCode) whichCode = e.keyCode;
                                  else if (e.which) whichCode = e.which;



http://www.hospedia.com.br/artigos/6/ajax/1/ajax_-_o_objeto_xmlhttprequest_-_parte_3.html[07/12/2009 15:09:16]
AJAX - O Objeto XMLHttpRequest - Parte 3

                                    var key = ''
                                    key = String.fromCharCode(whichCode); // Pega o valor da tecla a partir do seu código.
                                    if (whichCode == 40) { //Se a tecla pressionada foi seta para baixo.
                                        if (document.getElementById("listboxresult").style.visibility == "visible") {
                                            document.getElementById("listboxresult").focus(); //Passa o foco para a listbox.
                                            document.getElementById("listboxresult").selectedIndex = 0;
                                        }
                                    } else { //Se outra tecla qualquer foi pressionada
                                        window.clearTimeout(settimeId); //Limpa qualquer chamada agendada anteriormente.
                                        if (buscar.length > 0) { //Se tem alguma string para ser procurada.
                                            settimeId = window.setTimeout("startHttpReq('"+buscar+"')",2000);
                                        } else { //Caso contrário esconde a listbox.
                                            document.getElementById("listboxresult").style.visibility="hidden";
                                            document.getElementById("listboxresult").disabled = true; //desabilita a listbox.
                                        }
                                    }
                                }

                                Ressaltamos nesta função o tratamento para a tecla de código 40 (seta para baixo) que, no caso
                                da listbox estar visível, passa o foco para ela e seleciona o primeiro item da lista. Caso qualquer
                                outra tecla seja pressionada verifica-se se existe algo digitado a ser pesquisado e ,caso positivo,
                                agenda uma chamada para a função startHttpReq que executará a busca por meio de
                                técnicas AJAX no prazo de dois segundos. Caso não exista nada para pesquisar escondemos a
                                listbox e a desabilitamos.

                                 Não deixe de ver também:
                                  Consultoria Estatística                          Hospedagem R$ 5,90
                                    Pesquisas de Mercado e Opinião, Índices,       Ativação imediata com VISANET. Site
                                    Estatística Industrial                         grátis.
                                              l i          b                       W bN            b


                                function startHttpReq(buscar){
                                  document.getElementById("listboxresult").style.visibility="hidden";
                                  url = "pesquisaAJAXcidades.php?buscar="+escape(buscar); //Monta a url de pesquisa.
                                  if (document.getElementById) { //Verifica se o Browser suporta DHTML.
                                      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 = XMLHttpRequestChange;
                                          xmlhttp.open("GET", url, true); //Abre a url.
                                          xmlhttp.setRequestHeader('Content-Type','text/xml');
                                          xmlhttp.setRequestHeader('encoding','ISO-8859-1');
                                          xmlhttp.send(null); //Envia dados ao documento da url.
                                      }
                                  }
                                }

                                Esta é uma variante da função pegaConteudo vista nos artigos anteriores. O importante aqui é
                                notarmos que na primeira linha da função escondemos a listbox para o caso da execução da
                                função demorar a retornar um resultado, em seguida preparamos a url com o caminho para o
                                arquivo de pesquisa passando o termo a ser pesquisado como um parametro do tipo GET.
                                Usamos escape para converter caracteres especias para o formato de URL, assim evitarmos
                                perder dados durante o envio das informações. Logo depois fazemos várias tentativas de criação
                                de uma instância do objeto XMLHttpRequest, caso consigamos definimos a função
                                XMLHttpRequestChange como responsável pela manipulação das mudanças de estado do



http://www.hospedia.com.br/artigos/6/ajax/1/ajax_-_o_objeto_xmlhttprequest_-_parte_3.html[07/12/2009 15:09:16]
AJAX - O Objeto XMLHttpRequest - Parte 3

                                objeto XMLHttpRequest, abrimos a URL, declaramos o tipo de conteúdo do documento e em
                                que conjunto de caracteres está codificado e enviamos null ao documento (como estamos
                                utilizando o método GET, não necessitamos enviar nenhum dado adicional).

                                function XMLHttpRequestChange() { //Controla as mudanças do objeto XMLHttpRequest.
                                  //Verifica se o arquivo foi carregado com sucesso.
                                  if (xmlhttp.readyState == 4 && xmlhttp.status == 200){
                                       var result = xmlhttp.responseXML; //Armazena a resposta XML.
                                      //Captura todas as respostas nas Tags <retorno>
                                       var pesquisa = result.getElementsByTagName("retorno");
                                      document.getElementById("listboxresult").innerHTML = ""; //Apaga o conteúdo da listbox.
                                      for (var i = 0; i < pesquisa.length; i++) { //Populariza a listbox
                                          new_opcao = create_opcao(pesquisa[i]);
                                          document.getElementById("listboxresult").appendChild(new_opcao);
                                      }
                                       if (i>0) { //Caso existam resultados da pesquisa.
                                          document.getElementById("listboxresult").style.visibility="visible";
                                          document.getElementById("listboxresult").disabled = false; //habilita a listbox.
                                      }
                                  }
                                }

                                Esta função é similar a processadorMudancaEstado que vimos nos artigos anteriores, só
                                que aqui usamos uma técnica diferente de tratar o retorno do documento aberto. Os resultados da
                                pesquisa estarão entre TAGs <retorno> no documento que abriremos, por isto pegamos todas
                                as TAGs deste tipo e armazenamos na variável $pesquisa, depois, para cada item desta
                                variável, criamos um novo elemento HTML <OPTION> e adicionamos ele a listbox. Em
                                seguida verificamos se temos algum elemento retornado, caso afirmativo exibimos a listbox.

                                                          |<< Primeira   < Anterior 1/3 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 2 : 18/01/2006
                                Este é o segundo artigo da série e nele vamos conhecer mais a fundo o...

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

                                  EdoK ged/ecm e workflow
                                  Controle, gestão e administração sobre os
                                  documentos de sua empresa
                                  www.EdoK.com.br
                                  BestScan - Digitalização
                                  Transforme seus arquivos de papel em arquivos
                                  digitais - É o futuro
                                  www.bestscan.com.br
                                  Cursos Java Interplan RJ
                                  Turmas 10 alunos.Preços Excelentes! PLSQL
                                  Struts Hibernate UML Ajax SOA
                                  www.interplan.com.br/
                                  Conheça a NData Digitação
                                  Serviços completos de digitação e processamento
                                  de dados
                                  www.ndatadigitacao.com.br


                                                                        >> Inicio <<
                                                              © Copyright hospedia.com.br - 2005
                                                                 Todos os direitos reservados.
                                                               Seu Ponto de Partida na Internet



http://www.hospedia.com.br/artigos/6/ajax/1/ajax_-_o_objeto_xmlhttprequest_-_parte_3.html[07/12/2009 15:09:16]
AJAX - O Objeto XMLHttpRequest - Parte 3

                                                                    Receitas de Bolos
                                                                          Lyrics




http://www.hospedia.com.br/artigos/6/ajax/1/ajax_-_o_objeto_xmlhttprequest_-_parte_3.html[07/12/2009 15:09:16]

Más contenido relacionado

La actualidad más candente

Apostila de ext js com php e postgresql v1.1
Apostila de ext js com php e postgresql v1.1Apostila de ext js com php e postgresql v1.1
Apostila de ext js com php e postgresql v1.1Luciano Marwell
 
Curso java 04 - ap is e bibliotecas
Curso java   04 - ap is e bibliotecasCurso java   04 - ap is e bibliotecas
Curso java 04 - ap is e bibliotecasMaurício Linhares
 
Entenda o ciclo de vida das entidades jpa
Entenda o ciclo de vida das entidades jpaEntenda o ciclo de vida das entidades jpa
Entenda o ciclo de vida das entidades jpaMoisesInacio
 
Apostila de ext js com php e postgresql v1.3
Apostila de ext js com php e postgresql v1.3Apostila de ext js com php e postgresql v1.3
Apostila de ext js com php e postgresql v1.3Luciano Marwell
 
Mobileconf dicas-android
Mobileconf dicas-androidMobileconf dicas-android
Mobileconf dicas-androidAlberto Souza
 
Curso java 03 - métodos e parâmetros
Curso java   03 - métodos e parâmetrosCurso java   03 - métodos e parâmetros
Curso java 03 - métodos e parâmetrosMaurício Linhares
 
Orientação a Objetos em Python
Orientação a Objetos em PythonOrientação a Objetos em Python
Orientação a Objetos em PythonLuciano Ramalho
 
Regras de Produção: o Motor de Inferência JESS
Regras de Produção:o Motor de Inferência JESSRegras de Produção:o Motor de Inferência JESS
Regras de Produção: o Motor de Inferência JESSelliando dias
 
Apostila ph pwamp_parte5
Apostila ph pwamp_parte5Apostila ph pwamp_parte5
Apostila ph pwamp_parte5Ilton Barbosa
 
Grails - Destaques (para quem já sabe Java)
Grails - Destaques (para quem já sabe Java)Grails - Destaques (para quem já sabe Java)
Grails - Destaques (para quem já sabe Java)Douglas Mendes
 
Curso Android - 03 Conceitos Chaves
Curso Android - 03 Conceitos ChavesCurso Android - 03 Conceitos Chaves
Curso Android - 03 Conceitos ChavesRonildo Oliveira
 
Persistência com JPA e Hibernate
Persistência com JPA e HibernatePersistência com JPA e Hibernate
Persistência com JPA e HibernateFernando Oliveira
 
Codigo invocado com java.lang.invoke
Codigo invocado com java.lang.invokeCodigo invocado com java.lang.invoke
Codigo invocado com java.lang.invokeMarcelo de Castro
 
Objetos Pythonicos - compacto
Objetos Pythonicos - compactoObjetos Pythonicos - compacto
Objetos Pythonicos - compactoLuciano Ramalho
 

La actualidad más candente (20)

Apostila de ext js com php e postgresql v1.1
Apostila de ext js com php e postgresql v1.1Apostila de ext js com php e postgresql v1.1
Apostila de ext js com php e postgresql v1.1
 
Curso java 04 - ap is e bibliotecas
Curso java   04 - ap is e bibliotecasCurso java   04 - ap is e bibliotecas
Curso java 04 - ap is e bibliotecas
 
Entenda o ciclo de vida das entidades jpa
Entenda o ciclo de vida das entidades jpaEntenda o ciclo de vida das entidades jpa
Entenda o ciclo de vida das entidades jpa
 
Apostila de ext js com php e postgresql v1.3
Apostila de ext js com php e postgresql v1.3Apostila de ext js com php e postgresql v1.3
Apostila de ext js com php e postgresql v1.3
 
Javascript
JavascriptJavascript
Javascript
 
Mobileconf dicas-android
Mobileconf dicas-androidMobileconf dicas-android
Mobileconf dicas-android
 
App scala
App scalaApp scala
App scala
 
Curso java 03 - métodos e parâmetros
Curso java   03 - métodos e parâmetrosCurso java   03 - métodos e parâmetros
Curso java 03 - métodos e parâmetros
 
Aula android 02.pdf
Aula android 02.pdfAula android 02.pdf
Aula android 02.pdf
 
Java 06
Java 06Java 06
Java 06
 
Orientação a Objetos em Python
Orientação a Objetos em PythonOrientação a Objetos em Python
Orientação a Objetos em Python
 
Regras de Produção: o Motor de Inferência JESS
Regras de Produção:o Motor de Inferência JESSRegras de Produção:o Motor de Inferência JESS
Regras de Produção: o Motor de Inferência JESS
 
Apostila ph pwamp_parte5
Apostila ph pwamp_parte5Apostila ph pwamp_parte5
Apostila ph pwamp_parte5
 
Grails - Destaques (para quem já sabe Java)
Grails - Destaques (para quem já sabe Java)Grails - Destaques (para quem já sabe Java)
Grails - Destaques (para quem já sabe Java)
 
Curso Android - 03 Conceitos Chaves
Curso Android - 03 Conceitos ChavesCurso Android - 03 Conceitos Chaves
Curso Android - 03 Conceitos Chaves
 
Persistência com JPA e Hibernate
Persistência com JPA e HibernatePersistência com JPA e Hibernate
Persistência com JPA e Hibernate
 
Codigo invocado com java.lang.invoke
Codigo invocado com java.lang.invokeCodigo invocado com java.lang.invoke
Codigo invocado com java.lang.invoke
 
Threads e Estruturas de dados
Threads e Estruturas de dadosThreads e Estruturas de dados
Threads e Estruturas de dados
 
Java6
Java6Java6
Java6
 
Objetos Pythonicos - compacto
Objetos Pythonicos - compactoObjetos Pythonicos - compacto
Objetos Pythonicos - compacto
 

Similar a Ajax O Objeto Xml Http Request Parte 3

Ajax O Objeto Xml Http Request Parte 4
Ajax   O Objeto Xml Http Request   Parte 4Ajax   O Objeto Xml Http Request   Parte 4
Ajax O Objeto Xml Http Request Parte 4infinitopublicidade
 
Ajax O Objeto Xml Http Request Parte 1
Ajax   O Objeto Xml Http Request   Parte 1Ajax   O Objeto Xml Http Request   Parte 1
Ajax O Objeto Xml Http Request Parte 1infinitopublicidade
 
Minicurso de PHP Com Ajax
Minicurso de PHP Com AjaxMinicurso de PHP Com Ajax
Minicurso de PHP Com AjaxAdler Medrado
 
PHP e Ajax com XAJAX
PHP e Ajax com XAJAXPHP e Ajax com XAJAX
PHP e Ajax com XAJAXRafael Dohms
 
Palestra Mocks - AgileBrazil 2010
Palestra Mocks - AgileBrazil 2010Palestra Mocks - AgileBrazil 2010
Palestra Mocks - AgileBrazil 2010rafaelferreira
 
Evento Front End SP - Organizando o Javascript
 Evento Front End SP - Organizando o Javascript Evento Front End SP - Organizando o Javascript
Evento Front End SP - Organizando o JavascriptMichel Ribeiro
 
Testes em Aplicações Web com Cactus
Testes em Aplicações Web com CactusTestes em Aplicações Web com Cactus
Testes em Aplicações Web com CactusDenis L Presciliano
 
LINQ - Language Integrated Query
LINQ - Language Integrated QueryLINQ - Language Integrated Query
LINQ - Language Integrated QueryDalton Valadares
 
Web 2.0 e AJAX - Parte 2 / 3
Web 2.0 e AJAX - Parte 2 / 3Web 2.0 e AJAX - Parte 2 / 3
Web 2.0 e AJAX - Parte 2 / 3David Ruiz
 
Como conectar programas em linguagem java a bases de dados
Como conectar programas em linguagem java  a bases de dadosComo conectar programas em linguagem java  a bases de dados
Como conectar programas em linguagem java a bases de dadosHenrique Fernandes
 
Ajax O Objeto Xml Http Request Parte 2
Ajax   O Objeto Xml Http Request   Parte 2Ajax   O Objeto Xml Http Request   Parte 2
Ajax O Objeto Xml Http Request Parte 2infinitopublicidade
 

Similar a Ajax O Objeto Xml Http Request Parte 3 (20)

Ajax O Objeto Xml Http Request Parte 4
Ajax   O Objeto Xml Http Request   Parte 4Ajax   O Objeto Xml Http Request   Parte 4
Ajax O Objeto Xml Http Request Parte 4
 
Ajax O Objeto Xml Http Request Parte 1
Ajax   O Objeto Xml Http Request   Parte 1Ajax   O Objeto Xml Http Request   Parte 1
Ajax O Objeto Xml Http Request Parte 1
 
Minicurso de PHP Com Ajax
Minicurso de PHP Com AjaxMinicurso de PHP Com Ajax
Minicurso de PHP Com Ajax
 
Ajax como comecar
Ajax como comecarAjax como comecar
Ajax como comecar
 
Artigoajax
ArtigoajaxArtigoajax
Artigoajax
 
PHP e Ajax com XAJAX
PHP e Ajax com XAJAXPHP e Ajax com XAJAX
PHP e Ajax com XAJAX
 
Palestra Mocks - AgileBrazil 2010
Palestra Mocks - AgileBrazil 2010Palestra Mocks - AgileBrazil 2010
Palestra Mocks - AgileBrazil 2010
 
Evento Front End SP - Organizando o Javascript
 Evento Front End SP - Organizando o Javascript Evento Front End SP - Organizando o Javascript
Evento Front End SP - Organizando o Javascript
 
Testes em Aplicações Web com Cactus
Testes em Aplicações Web com CactusTestes em Aplicações Web com Cactus
Testes em Aplicações Web com Cactus
 
LINQ - Language Integrated Query
LINQ - Language Integrated QueryLINQ - Language Integrated Query
LINQ - Language Integrated Query
 
JQuery
JQuery JQuery
JQuery
 
Web 2.0 e AJAX - Parte 2 / 3
Web 2.0 e AJAX - Parte 2 / 3Web 2.0 e AJAX - Parte 2 / 3
Web 2.0 e AJAX - Parte 2 / 3
 
ESTRUTURA DE DADOS (JAVA) AULA 09
ESTRUTURA DE DADOS (JAVA) AULA 09ESTRUTURA DE DADOS (JAVA) AULA 09
ESTRUTURA DE DADOS (JAVA) AULA 09
 
Design patterns
Design patternsDesign patterns
Design patterns
 
Como conectar programas em linguagem java a bases de dados
Como conectar programas em linguagem java  a bases de dadosComo conectar programas em linguagem java  a bases de dados
Como conectar programas em linguagem java a bases de dados
 
Aula javascript
Aula  javascriptAula  javascript
Aula javascript
 
Ajax O Objeto Xml Http Request Parte 2
Ajax   O Objeto Xml Http Request   Parte 2Ajax   O Objeto Xml Http Request   Parte 2
Ajax O Objeto Xml Http Request Parte 2
 
Algoritmos de ordenação
Algoritmos de ordenaçãoAlgoritmos de ordenação
Algoritmos de ordenação
 
Android na Prática
Android na PráticaAndroid na Prática
Android na Prática
 
Tutorial de ajax
Tutorial de ajaxTutorial de ajax
Tutorial de ajax
 

Ajax O Objeto Xml Http Request Parte 3

  • 1. AJAX - O Objeto XMLHttpRequest - Parte 3 Principal .: Compras :. Início AJAX - O Objeto XMLHttpRequest - Parte 3 Categorias Ajax 12/03/2006 16:00:00 DHTML Autor: Rondinely S. de Almeida XML PHP Serviços para Webmasters MySQL IP Qual é o meu IP? Cursos: Java, RUP, BD 10g Forms,PL/SQL, Webdesigner, AJAX,PHP Certificação SUN, JEE, JSF www.cotiinformatica.com.br Coletor Dados - Microsiga Coletores de dados no microsiga produção,expedição.Solucao completa www.proativatecnologia.com.br |<< Primeira < Anterior 1/3 Próxima > Última >>| Exemplos: pesquisaAJAX.html Neste artigo utilizaremos um banco de dados MySQL com nomes dos municípios brasileiro e um formulário de pesquisa para demonstrar como podemos utilizar as técnicas AJAX para, sem ter a necessidade de submeter o formulário, buscar informações em uma base de dados. Estas informações serão exibidas com o auxilio de uma listbox (<select>). A partir deste ponto estudaremos o código javascript do exemplo do início deste artigo. O documento pesquisaAJAX.php var xmlhttp = null; //Objeto XMLHttpRequest. var settimeId = null; //Controle de tarefas agendadas. As duas globais declaradas logo no início deste script servirão respectivamente para o controle do objeto XMLHttpRequest e da execução de funções agendadas. Em seguida definiremos a função que tratará as tecla pressionadas na caixa de texto (<input>) do formulário de pesquisa. function pesquisar(buscar,e) { var whichCode; if (!e) var e = window.event; if (e.keyCode) whichCode = e.keyCode; else if (e.which) whichCode = e.which; http://www.hospedia.com.br/artigos/6/ajax/1/ajax_-_o_objeto_xmlhttprequest_-_parte_3.html[07/12/2009 15:09:16]
  • 2. AJAX - O Objeto XMLHttpRequest - Parte 3 var key = '' key = String.fromCharCode(whichCode); // Pega o valor da tecla a partir do seu código. if (whichCode == 40) { //Se a tecla pressionada foi seta para baixo. if (document.getElementById("listboxresult").style.visibility == "visible") { document.getElementById("listboxresult").focus(); //Passa o foco para a listbox. document.getElementById("listboxresult").selectedIndex = 0; } } else { //Se outra tecla qualquer foi pressionada window.clearTimeout(settimeId); //Limpa qualquer chamada agendada anteriormente. if (buscar.length > 0) { //Se tem alguma string para ser procurada. settimeId = window.setTimeout("startHttpReq('"+buscar+"')",2000); } else { //Caso contrário esconde a listbox. document.getElementById("listboxresult").style.visibility="hidden"; document.getElementById("listboxresult").disabled = true; //desabilita a listbox. } } } Ressaltamos nesta função o tratamento para a tecla de código 40 (seta para baixo) que, no caso da listbox estar visível, passa o foco para ela e seleciona o primeiro item da lista. Caso qualquer outra tecla seja pressionada verifica-se se existe algo digitado a ser pesquisado e ,caso positivo, agenda uma chamada para a função startHttpReq que executará a busca por meio de técnicas AJAX no prazo de dois segundos. Caso não exista nada para pesquisar escondemos a listbox e a desabilitamos. Não deixe de ver também: Consultoria Estatística Hospedagem R$ 5,90 Pesquisas de Mercado e Opinião, Índices, Ativação imediata com VISANET. Site Estatística Industrial grátis. l i b W bN b function startHttpReq(buscar){ document.getElementById("listboxresult").style.visibility="hidden"; url = "pesquisaAJAXcidades.php?buscar="+escape(buscar); //Monta a url de pesquisa. if (document.getElementById) { //Verifica se o Browser suporta DHTML. 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 = XMLHttpRequestChange; xmlhttp.open("GET", url, true); //Abre a url. xmlhttp.setRequestHeader('Content-Type','text/xml'); xmlhttp.setRequestHeader('encoding','ISO-8859-1'); xmlhttp.send(null); //Envia dados ao documento da url. } } } Esta é uma variante da função pegaConteudo vista nos artigos anteriores. O importante aqui é notarmos que na primeira linha da função escondemos a listbox para o caso da execução da função demorar a retornar um resultado, em seguida preparamos a url com o caminho para o arquivo de pesquisa passando o termo a ser pesquisado como um parametro do tipo GET. Usamos escape para converter caracteres especias para o formato de URL, assim evitarmos perder dados durante o envio das informações. Logo depois fazemos várias tentativas de criação de uma instância do objeto XMLHttpRequest, caso consigamos definimos a função XMLHttpRequestChange como responsável pela manipulação das mudanças de estado do http://www.hospedia.com.br/artigos/6/ajax/1/ajax_-_o_objeto_xmlhttprequest_-_parte_3.html[07/12/2009 15:09:16]
  • 3. AJAX - O Objeto XMLHttpRequest - Parte 3 objeto XMLHttpRequest, abrimos a URL, declaramos o tipo de conteúdo do documento e em que conjunto de caracteres está codificado e enviamos null ao documento (como estamos utilizando o método GET, não necessitamos enviar nenhum dado adicional). function XMLHttpRequestChange() { //Controla as mudanças do objeto XMLHttpRequest. //Verifica se o arquivo foi carregado com sucesso. if (xmlhttp.readyState == 4 && xmlhttp.status == 200){ var result = xmlhttp.responseXML; //Armazena a resposta XML. //Captura todas as respostas nas Tags <retorno> var pesquisa = result.getElementsByTagName("retorno"); document.getElementById("listboxresult").innerHTML = ""; //Apaga o conteúdo da listbox. for (var i = 0; i < pesquisa.length; i++) { //Populariza a listbox new_opcao = create_opcao(pesquisa[i]); document.getElementById("listboxresult").appendChild(new_opcao); } if (i>0) { //Caso existam resultados da pesquisa. document.getElementById("listboxresult").style.visibility="visible"; document.getElementById("listboxresult").disabled = false; //habilita a listbox. } } } Esta função é similar a processadorMudancaEstado que vimos nos artigos anteriores, só que aqui usamos uma técnica diferente de tratar o retorno do documento aberto. Os resultados da pesquisa estarão entre TAGs <retorno> no documento que abriremos, por isto pegamos todas as TAGs deste tipo e armazenamos na variável $pesquisa, depois, para cada item desta variável, criamos um novo elemento HTML <OPTION> e adicionamos ele a listbox. Em seguida verificamos se temos algum elemento retornado, caso afirmativo exibimos a listbox. |<< Primeira < Anterior 1/3 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 2 : 18/01/2006 Este é o segundo artigo da série e nele vamos conhecer mais a fundo o... 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... EdoK ged/ecm e workflow Controle, gestão e administração sobre os documentos de sua empresa www.EdoK.com.br BestScan - Digitalização Transforme seus arquivos de papel em arquivos digitais - É o futuro www.bestscan.com.br Cursos Java Interplan RJ Turmas 10 alunos.Preços Excelentes! PLSQL Struts Hibernate UML Ajax SOA www.interplan.com.br/ Conheça a NData Digitação Serviços completos de digitação e processamento de dados www.ndatadigitacao.com.br >> Inicio << © Copyright hospedia.com.br - 2005 Todos os direitos reservados. Seu Ponto de Partida na Internet http://www.hospedia.com.br/artigos/6/ajax/1/ajax_-_o_objeto_xmlhttprequest_-_parte_3.html[07/12/2009 15:09:16]
  • 4. AJAX - O Objeto XMLHttpRequest - Parte 3 Receitas de Bolos Lyrics http://www.hospedia.com.br/artigos/6/ajax/1/ajax_-_o_objeto_xmlhttprequest_-_parte_3.html[07/12/2009 15:09:16]