Neste artigo vamos estudar uma forma simples e objetiva de criar um sistema de busca utilizando os recursos da biblioteca Prototype.

Para saber mais sobre a biblioteca Prototype, visite o site oficial: http://prototype.conio.net. A documentação não é um ponto forte do site, mas você pode encontrar uma boa referência no site do Sérgio Pereira: http://www.sergiopereira.com/articles/prototype140.js.ptBR.html.

Com o Prototype é possível desenvolver de forma simples e direta. Essa biblioteca encapsula diversas funções do Javascript. Neste artigo daremos ênfase aos métodos $(), $F(), Event.observe e principalmente à classe Ajax.Request.

Começaremos pela tela do usuário, página totalmente em HTML, onde há a inclusão dos arquivos prototype.js e request.js. No arquivo resquest.js estão as funções construídas para realizar a busca de livros.

Figura 1.1 Interface com o usuário, a primeira parte do sistema a ser construída.

Repare que no botão de pesquisa (Linha 16) não há o onclick, comumente utilizado para chamadas de funções Javascript. Isso é possível porque o sistema está utilizando Javascript não-obstrutivo. Em outras palavras você não precisa modificar seu código html para fazer chamadas a funções Javascript. A função responsável em iniciar o processo de busca ao clicarmos no botão de pesquisa está no arquivo request.js.

Ao realizar uma busca utilizando, por exemplo, o termo ajax, deverá retornar uma tela como a da Figura 1.2.
 

Figura 1.2 Tela HTML com retorno da pesquisa realizada pela palavra-chave ajax.

Na figura 1.3 temos o código-fonte do arquivo request.js:

Figura 1.3 Arquivo request.js, com todas as funções Javascript construídas pelo desenvolvedor, necessárias para a comunicação entre a tela HTML e o script de busca.

Examinando o arquivo request.js:

Linha 1: início da função responsável pelo processo de chamada do arquivo de busca que realizará a pesquisa no banco de dados.

Linha 2: informamos qual o nome da página responsável por ir ao banco de dados e trazer as informações.

Linha 3: é declarada a variável termo onde será armazenado o que foi digitado pelo usuário no campo de busca. A função $F() do Prototype que captura o valor do elemento identificado na linha 15 da página index.html.

Linha 4: é declarada a variável contendo o parâmetro que será enviado para a página debusca (busca.php).

Linhas 5 a 7: aqui instanciamos a classe Ajax.Request. O método de envio é post. Quando a requisição terminar (onComplete) é chamada a função listaLivros().

Linha 8: função $() do Prototype, faz o papel do document.getElementById(). O innerHtml Insere a mensagem Buscando livros... no div divResultados, mensagem que será posteriormente sobrescrita quando o script chegar na Linha 10.

Linha 10: Função responsável em inserir no div divResultados o retorno HTML  da página busca.php, armazenado em responseText.

Linhas 14 a 16: função observadora Init() contendo o Event.observe do Prototype, cujo papel é observar o elemento btnBusca (linha 16 do arquivo index.html). Quanto acionado o botão de busca, será chamada a função buscaLivros().Aqui é aplicado o conceito do Javascript não-obstrutivo, citado anteriormente.

Linha 17: Dessa vez o Event.observe tem como objetivo chamar a função Init() ao término do carregamento da página (window, load). É importante a compreensão desse trecho, pois os elementos da página index.html, identificados pelos seus respectivos ids, passam a existir apenas depois que a página é totalmente carregada. Pesquise sobre o padrão Observer do Javascript para melhor entendimento.

Finalmente a página de busca:

Figura 1.3 Página de busca. Um script comum em PHP, que devolve o resultado do banco de dados.

Essa página não tem segredo. Ela foi construída em PHP e por funcionar de forma independente pode ser reescrita em qualquer outra linguagem, como JSP ou ASP.

Na linha 2 é instanciada a classe mysqli, que estabelece  a conexão com o MySQL. A linha 7 recupera o parâmetro enviado pela Ajax.Resquest (linha 5 do arquivo request.js).

Nas linhas 14 a 17 o script varre o resultado da consulta imprimindo os dados no formatado HTML que serão exibidos no div divResultado da página index.html. Caso nenhum registro seja resultado, retornará a mensagem da linha 20.

O objetivo da requisição com HttpResquest é que o tráfego das informações ocorra em background, sem que o usuário precise esperar a página inteira ir com a requisição e depois voltar com a resposta, como acontece na navegação clássica.

Para fins didáticos, não utilizei orientação a objetos com arquitetura em camadas, mas recomendo que você construa seus aplicativos com base na arquitetura MVC: separação da lógica de banco (persistência), negócio, controle e visualização. Para quem desenvolve em PHP, recomendo para a camada de visualização o uso do template Smarty (http://smarty.php.net).

Espero que você tenha um bom proveito da biblioteca Protrotype. É uma biblioteca segura e amplamente usada e certamente ela vai agilizar seu desenvolvimento em Javascript.