Ajax O Objeto Xml Http Request Parte 3
0 gostou345 visualizações
Este documento explica como utilizar o objeto XMLHttpRequest para realizar buscas em um banco de dados sem recarregar a página. Ele define funções para tratar eventos de teclado na caixa de pesquisa e iniciar a requisição HTTP, e também uma função para lidar com as mudanças de estado da requisição e popular a listbox com os resultados.
![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]](https://image.slidesharecdn.com/ajaxoobjetoxmlhttprequestparte3-12742428520904-phpapp02/85/Ajax-O-Objeto-Xml-Http-Request-Parte-3-1-320.jpg)
![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]](https://image.slidesharecdn.com/ajaxoobjetoxmlhttprequestparte3-12742428520904-phpapp02/85/Ajax-O-Objeto-Xml-Http-Request-Parte-3-2-320.jpg)
![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]](https://image.slidesharecdn.com/ajaxoobjetoxmlhttprequestparte3-12742428520904-phpapp02/85/Ajax-O-Objeto-Xml-Http-Request-Parte-3-3-320.jpg)
![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]](https://image.slidesharecdn.com/ajaxoobjetoxmlhttprequestparte3-12742428520904-phpapp02/85/Ajax-O-Objeto-Xml-Http-Request-Parte-3-4-320.jpg)
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]