Login:

iMasters | Por uma internet mais criativa e dinâmica

Feeds

Ajax

Feed da seção Ajax

Newsletter de Ajax


Quarta-feira, 11/01/2006 - 12:00 - Por Leandro Vieira
Seções relacionadas:

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)

Vários tutoriais sobre Ajax

Resultado do Google para Ajax

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:

Exemplo da função que inicia o Ajax.

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.

Todos os artigos de Leandro Vieira

18 comentários publicados

  • 1. Mto bom!

    Quinta-feira, 12/01/2006, por hogs

    Ajax é mto bom! Parabens pelo artigo, vou ver se eu escrevo alguma coisa ajax :) abração leandrim, SUCESSO!

    Responder comentário

  • 2. Grande Vitor

    Quinta-feira, 12/01/2006, por João Ricardo de Albuquerque Si

    Valeu brother, que bom que gostou. Ficarei no aguardo do seu artigo. Um abração e divirta-se aí nas férias, heheh.

    Responder comentário

  • 3. Busca em TXT?

    Quinta-feira, 12/01/2006, por Laybows

    Será q existe algo parecido para realizar uma busca em base de textos? Arquivos .txt? Preciso muito de algo assim. :]

    Responder comentário

  • 4. No firefox

    Quarta-feira, 18/01/2006, por vittor

    Ai cara, no IE funcionou 10, no firefox ele não funcionou !?!? o que temos que mudar ?!

    Responder comentário

  • 5. Ao Vittor

    Quarta-feira, 18/01/2006, por João Ricardo de Albuquerque Si

    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.

    Responder comentário

  • 6. O erro !

    Quinta-feira, 19/01/2006, por vittor

    Opa, encontrei o erro, eu estava usando o campo assim
    &lt;input name="cpf" onkeyup="buscacpf();" type="text" class="edit" size="20" maxlength="20"&gt;
    no IE funcionava , porem no FF não !
    quando eu coloquei
    &lt;input name="cpf" id="cpf" onkeyup="buscacpf();" type="text" class="edit" size="20" maxlength="20"&gt;
    Funcionou !
    o id = "" que arrumou a minha vida !
    Obrigado Leandro e até a próxima

    Responder comentário

  • 7. Opera

    Quinta-feira, 26/01/2006, por Maicon Santos

    Ola...
    Testei no IE e deu beleza...
    Mais no Opera 8.5 (navegador que eu uso) naum funfo...
    Alguem tem alguma dica ??

    Responder comentário

  • 8. Ao Nickael

    Quinta-feira, 26/01/2006, por João Ricardo de Albuquerque Si

    Cara, eu também testei no Opera, e aqui funfou e está funfando legal.

    Responder comentário

  • 9. buscaInstantanea.js

    Sexta-feira, 27/01/2006, por Lawrence Carvalho

    Cadê o arquivo buscaInstantanea.js? Não consigo fazer o seu download...

    Responder comentário

  • 10. Pegue aqui

    Sexta-feira, 27/01/2006, por João Ricardo de Albuquerque Si

    Olá Luis,

    Baixe o arquivo completo, aqui: http://www.imasters.com.br/conteudo2/lvieira/27/buscaInstantanea.zip

    Responder comentário

  • 11. Beleza

    Quarta-feira, 01/03/2006, por Fred Tavares

    Cara gostei d+ desse, tem como fazer para buscar na web?

    Responder comentário

  • 12. Ao Fred,

    Quinta-feira, 02/03/2006, por João Ricardo de Albuquerque Si

    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.

    Responder comentário

  • 13. busca instantanea

    Terça-feira, 07/03/2006, por carlosmarian

    Olá, Leandro

    Busca muito legal. Como posso colocar paginação?

    Responder comentário

  • 14. Cadastrar

    Quinta-feira, 11/05/2006, por Rene Sarli

    Como faço para cadastrar e excluir os dados da busca?

    Responder comentário

  • 15. Muito bom.

    Segunda-feira, 04/09/2006, por Robson Cabral

    Esta busca foi maior adianto na minha vida. Valeu Leandro.

    Responder comentário

  • 16. Excelente Tuto

    Quarta-feira, 13/08/2008, por Juliano Eloi Felisberto

    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.

    Responder comentário

  • 17. Obrigado

    Terça-feira, 26/08/2008, por Leandro Vieira

    Obrigado! Abraços.

    Responder comentário

  • 18. Obrigado

    Terça-feira, 26/08/2008, por Leandro Vieira

    Obrigado! Abraços.

    Responder comentário

Poste um comentário


Os textos publicados neste espaço são de responsabilidade única de seus autores (colunistas e leitores) e podem não expressar necessariamente a opinião do iMasters.

Sobre o autor

Leandro Vieira trabalha com desenvolvimento web desde 2002. Em 2005, foi convidado para integrar o time de referências profissionais do iMasters. No mesmo ano, lançou o CD-ROM Dreamweaver + PHP + MySQL recordista de vendas do TI SHOP. Em 2006, lançou o CD-ROM Curso Web Sites com AJAX, uma das primeiras referências de Ajax no Brasil. Em 2007 lançou o Curso Interativo Adobe Dreamweaver CS3 abordando as novas funcionalidades e recursos do Dreaweaver CS3. Atualmente, Leandro Vieira é desenvolvedor web, professor do iPED Premier, criador de cursos exclusivos para o TI SHOP, editor do blog leandrovieira.com e cursando Comunicação Social (Publicidade e Propaganda) na UNIVALE.


Indique para um amigo

captcha

TI SHOP Produtos iMasters

  • Lançamento: CD-ROM Treinamento Aplicado de SQL - Lançamento! Treinamento Aplicado de SQL - Aprenda a trabalhar com SQL com bancos de dados Oracle e SQL Server. São mais de 100 tópicos explicados por Mauro Pichilliani, um articulistas mais lidos do iMasters. Aproveite! Apenas R$ 69,90 no TI SHOP.
  • Lançamento: Livro iMasters "O Encontro de 2 Mundos"- Este livro conta com 56 crônicas de profissionais mais admirados e influentes do mercado brasileiro de Internet. Aproveite o preço especial para leitores do iMasters. Apenas R$ 40,00 e envio imediato!
  • DVD Curso Completo de Photoshop - Do conceito à finalização Lançamento! Curso Completo de Photoshop, em DVD, com mais de 230 aulas dividas em 4 módulos: conceito, básico, avançado e finalização. Apenas R$ 69,50 no TI SHOP - Frete com 50% de desconto
  • DVD Javascript Starter - Curso Completo Com mais de 9 horas de vídeo-aulas, é um curso completo sobre Javascript. Ideal para quem deseja aprender a linguagem. Apenas R$ 64,90 no TI SHOP - Frete com 50% de desconto!

2001 - iMasters FFPA Informática Ltda - Todos os direitos reservados.