AJAX - O Objeto XMLHttpRequest - Parte 3




               Principal                                                     ...
AJAX - O Objeto XMLHttpRequest - Parte 3

                                    var key = ''
                               ...
AJAX - O Objeto XMLHttpRequest - Parte 3

                                objeto XMLHttpRequest, abrimos a URL, declaramos...
AJAX - O Objeto XMLHttpRequest - Parte 3

                                                                    Receitas de ...
Upcoming SlideShare
Loading in...5
×

Ajax O Objeto Xml Http Request Parte 3

711

Published on

0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
711
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
13
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Transcript of "Ajax O Objeto Xml Http Request Parte 3"

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

×