Feeds
Newsletter
Busca instantânea com Ajax
Olá a todos! Hoje falarei sobre um assunto fora da coluna, mas, sobre algo que está em grande ascensão no desenvolvimento web. Falarei sobre Ajax, mais especificamente sobre como desenvolver uma busca instantânea com essa metodologia. De antemão, veja um exemplo dessa busca em funcionamento, podendo assim, entender melhor o que iremos desenvolver.
Partirei do princípio que você já possui uma noção sobre Ajax, e caso esse não seja o seu caso, veja estes links para compreender e ter uma noção melhor do assunto:
Ajax: Uma Nova Técnica para Aplicações Web
Ajax - Visão Geral (iMasters)
Nossos ingredientes para o desenvolvimento da busca instantânea serão:
01 - Uma página (x)HTML contendo o formulário e a exibição do resultado da busca (buscaInstantanea.htm);
02 - Alguns códigos em javascript para incrementarmos o ajax (buscaInstantanea.js);
03 - Duas páginas em PHP responsáveis em realizar a busca no banco de dados (busca.php e buscaInstantanea.php). Vocês entenderão o porque de duas páginas).
A busca funcionará mesmo se o javascript do cliente estiver desabilitado. Assim, tornamos-a mais acessível.
Para o artigo não ficar muito grande e cansativo, vou fazer da seguinte forma: desenvolverei as páginas e explicarei cada uma delas. Já que você tem noção sobre Ajax e com certeza sobre desenvolvimento web, não há o porque deste artigo ser muito minucioso.
Primeira página, buscaInstantanea.htm, (clique no nome para baixá-la). Essa página é super simples, mas vamos destrinçá-la: no head (<head>) temos a estilização CSS e o link para o script, buscaInstantanea.js. Através da tag <script>. no corpo da página (<body>), temos o formulário para a realização da busca e uma div com o atributo ID (resultadoBusca) setado, para exibirmos o resultado e podermos manipulá-la através do nosso script.
No campo de texto, utilizado para digitar o termo da busca, acionamos a função: buscaInstantanea() através do evento: onkeyup. (Para saber mais sobre os eventos em javascript, visite: http://www.w3.org/TR/REC-html40/interact/scripts.html#h-18.2.3)
O diferencial dessa página, está na utilização da tag <noscript>. Para aqueles que estão com o javascript do browser ativado o botão de submit fica oculto, sendo exibido apenas para os que não tem suporte a essa linguagem client-side. E nesse caso os dados do formulário serão submetido para a página busca.php.
Agora, o nosso script "mágico", buscaInstantanea.js, (clique no nome para baixá-lo). Embora o script esteja todo comentado, vale dissertar um pouco sobre ele.
O script (buscaInstantanea.js) se inicia com uma função denomiada: openAjax(), que tem o objetivo de verificar a versão xmlhttp, realizando uma análise do método utilizado pelo browser em questão. Veja:
A segunda função, é a buscaInstantanea(), responsável por todo o dinâmismo do recurso que será desenvolvido. Vamos comprendê-la:
Verificamos se o browser é complacente com DOM do W3C.
Criamos duas variáveis: var termo, var exibeResultado. A primeira pega o termo digitado na caixa de busca; a segunda refere-se ao ID da div que exibirá o resultado da busca. Observe:
Nesta parte do script:
Verificamos se a caixa de busca está vazia ou se ela contém no mínimo três caracteres. Assim diminuímos a sobrecarga no servidor.
Após iniciarmos o Ajax, indicamos o método (GET) com o qual trabalharemos, a URL que realizará as requisições no servidor e o terceiro parâmetro como TRUE, para trabalharmos de forma assíncrona. Veja um print dessa parte:
As requisições em Ajax possuem cinco estados, sendo eles:
0 (ainda não
inicializado) ;
1 (carregando);
2 (carregado);
3 (interativo);
4 (completo);
Trabalharemos com dois deles: o estado 1, para exibirmos uma mensagem do tipo: carregando..., ao usuário. E o estado 4 que significa que está tudo pronto para trabalharmos. Veja o print novamente:
Agora, checaremos o status da página. Veja:
O status 200 siginifica OK, ou seja, a requisição foi sucedida. (Para conhecer os demais Status HTTP, visite: http://www.w3.org/Protocols/rfc2616/rfc2616-sec10.html)
Agora criaremos uma variável que armazenará os dados que o servidor nos enviou. Lembrando que há dois metódos para esse marzenamento, sendo eles:
ajax.responseText - retorna os dados do servidor como uma string de texto;
ajax.responseXML - retorno os dados do servidor como um documento XML.
Após realizamos um macete para os acentos, sem ele (macete) teremos sérios problemas.
Nota: em meu blog pessoal, falei detalhamente sobre este macete para se trabalhar com acentos em Ajax, se desejar, leia o post: Ajax e os acentos.
Após recebermos os dados e fazermos o tratamento para os acentos, iremos "jogar" esses dados retornado pelo servidor, ou seja, o resultado da busca, dentro da div que foi referenciada na variável: exibeResultado. Veja o print final:
Agora, desenvolveremos as páginas que realizarão a busca no banco de dados. No início do artigo eu disse a você que explicaria o por que de duas páginas de busca. Então vamos lá.
A página busca.php é uma página normal como as outras que você tem costume de desenvolver. Ela será utilizada pelos usuários que navagam com browser sem suporte ao javascript ou com o mesmo desativado. Já a página buscaInstantanea.php será utilizada pelo script que desenvolvemos. A diferença entre as duas, é que essa última foi adaptada para resolver o problemas dos acentos quando trabalhamos com Ajax e ela não contém uma estrutura completa com
e . Somente.Instrução SQL para gerar e popular a tabela utilizada.
Veja a página busca.php
Veja a página buscaInstantanea.php
Baixe a buscaInstantânea completa.
As páginas de busca estão bem simples, mas, vamos analisá-las. A instrução SQL:
$query_rsBusca = sprintf("SELECT * FROM busca_instantanea WHERE tuto_titulo LIKE "%%%s%%" OR tuto_desc LIKE "%%%s%%" LIMIT 5", $colname_rsBusca,$colname_rsBusca);
Essa query seleciona no máximo cinco registros (LIMIT 5) da tabela busca_instantanea, onde (WHERE) o título (tuto_titulo) e a descrição (tuto_desc) contém o termo presente na variável $colname_rsBusca, que armazena o termo informada na caixa de busca.
No restante do script, temos vários echo como este:
(página busca.php)
(página buscaInstantanea.php)
Observações:
Procurei mostrar-lhes o método que utilizei para desenvolver esse recurso. Se você o compreendeu, vai se sentir mais seguro para elaborar novos recursos, e por favor me apresente hein! (risos).
Leia os links relacionados acima. Há uma grandeza em conhecimento dentre eles;
Leia o post em que falo sobre Ajax e os acentos;
E, espero que tenham gostado do artigo. Um abraço
e até o próximo.
Interação
20 comentários
hogs
12/01/2006 09h44
Mto bom!
Ajax é mto bom! Parabens pelo artigo, vou ver se eu escrevo alguma coisa ajax :) abração leandrim, SUCESSO!
João Ricardo de Albuquerque Si
12/01/2006 09h46
Grande Vitor
Valeu brother, que bom que gostou. Ficarei no aguardo do seu artigo. Um abração e divirta-se aí nas férias, heheh.
Laybows
12/01/2006 19h08
Busca em TXT?
Será q existe algo parecido para realizar uma busca em base de textos? Arquivos .txt? Preciso muito de algo assim. :]
vittor
18/01/2006 12h28
No firefox
Ai cara, no IE funcionou 10, no firefox ele não funcionou !?!? o que temos que mudar ?!
João Ricardo de Albuquerque Si
18/01/2006 13h27
Ao Vittor
Olá Vittor, esse sistema boi testado no IE, Firefox, Opera e Netscape e todos eles funcionou perfeitamente.
Veja no JavaScript consolde do FF e veja o erro que está ocorrendo.
vittor
19/01/2006 11h04
O erro !
Opa, encontrei o erro, eu estava usando o campo assim
<input name="cpf" onkeyup="buscacpf();" type="text" class="edit" size="20" maxlength="20">
no IE funcionava , porem no FF não !
quando eu coloquei
<input name="cpf" id="cpf" onkeyup="buscacpf();" type="text" class="edit" size="20" maxlength="20">
Funcionou !
o id = "" que arrumou a minha vida !
Obrigado Leandro e até a próxima
Maicon Santos
26/01/2006 13h32
Opera
Ola...
Testei no IE e deu beleza...
Mais no Opera 8.5 (navegador que eu uso) naum funfo...
Alguem tem alguma dica ??
João Ricardo de Albuquerque Si
26/01/2006 18h25
Ao Nickael
Cara, eu também testei no Opera, e aqui funfou e está funfando legal.
Lawrence Carvalho
27/01/2006 09h18
buscaInstantanea.js
Cadê o arquivo buscaInstantanea.js? Não consigo fazer o seu download...
João Ricardo de Albuquerque Si
27/01/2006 09h21
Pegue aqui
Olá Luis,
Baixe o arquivo completo, aqui: http://www.imasters.com.br/conteudo2/lvieira/27/buscaInstantanea.zip
Fred Tavares
01/03/2006 02h24
Beleza
Cara gostei d+ desse, tem como fazer para buscar na web?
João Ricardo de Albuquerque Si
02/03/2006 06h44
Ao Fred,
Cara, se tem possibilidade eu ainda não conheço, mas com certeza seria um sistema bem sobrecarregado. Imagine, a busca do google nesse sistema. Um abraço.
carlosmarian
07/03/2006 19h13
busca instantanea
Olá, Leandro
Busca muito legal. Como posso colocar paginação?
Rene Sarli
11/05/2006 14h19
Cadastrar
Como faço para cadastrar e excluir os dados da busca?
Robson Cabral
04/09/2006 11h41
Muito bom.
Esta busca foi maior adianto na minha vida. Valeu Leandro.
Excelente Tuto
Parabéns Leandro pelo Tutorial.
Está D+.
Era tudo que eu precissava, agora fica mais fácil implementar algumas rotinas no sistema que estou desenvolvendo.
Espero um dia poder divulga-lo assim que estiver pronto e poder contribuir com alguns tutoriais também.
Vc está de parabéns.
muito bom.
Olá, parabéns pelo artigo, mas tem alguns links que estão off-line, será que você poderia postar os arquvios para download?
Obrigado.
Priscila Ricardo Andrade
18/03/2009 14h47
Pense, muito legal!
Cara só assim eu aprendo ajax, maravilha!
iMasters
- Sobre o iMasters
- Política de privacidade
- Anuncie
- Feeds iMasters
- Fóruns iMasters
- Fale conosco
2001 - iMasters FFPA Informática Ltda - Todos os direitos reservados.