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