Document Actions
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.
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 <head> e <body>. 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:
<?php echo $row_rsBusca["tuto_titulo"]; ?> (página busca.php)
<?php echo urlencode($row_rsBusca["tuto_titulo"]); ?> (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.
Fonte: www.imasters.com.br
Saiu a Programação da PyConBrasil 2008!