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.