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 id’s, passam a existir apenas depois que a página é totalmente carregada. Pesquise sobre o padrão Observer do Javascript para melhor entendimento.