O Desenvolvedor PHP

Apesar de eu ter criado a série de artigos sobre AJAX + CPAINT, estou criando essa nova, com artigos rápidos explicando o uso da Prototype. Segundo o site oficial: "Prototype is a JavaScript Framework that aims to ease development of dynamic web applications.". Melhor explicando:

• É um framework JavaScript, contido em um pequeno e único .js;
• Possui funções de DHTML, shortcuts (exemplo: em vez de document.getElementById(’elementoId’), simplesmente diga $(’elementoId’));
• Uma das abstrações de AJAX mais completas e rápidas de implementar;
• etc.

Bom, faça já o download.

Nesse primeiro artigo da série, uma busca muito, muito simples, com retorno em HTML, para você entender como é a interação da Prototype com o PHP. Na verdade não existe interação (a Prototype é apenas esse pequeno JS!), e sim, uma série de Chamadas (feita por ela) -> Respostas (pelo PHP ou qualquer outra linguagem do lado de servidor que você utilize). Vamos ao código:

busca.php

formulario.html

Passo-a-passo

1. Como é de se esperar, sempre inclua a prototype: <script type="text/javascript" src="prototype.js"></script>.
2. A função $ é um atalho para document.getElementById. Agora acostume-se. Use e abuse!
3. Não é necessário declarar nem instanciar nada. Você só chama a prototype quando for utilizá-la. No nosso caso, ela é chamada dentro da função Buscar. A chamada AJAX é simplesmente feita pelo comando: new Ajax.Request e, assim inserindo os variados parâmetros. São dezenas deles, que tentarei explicar no decorrer de toda a série. Você pode ver a lista completa na documentação oficial.
4. Primeiro defino o modo de envio: method:‘get’, (pode ser ‘post’) .
5. Os dados que envio: parameters: $(‘formBusca’).serialize(true), . Nesse caso eu envio todos os campos do formulário. No PHP eles são recebidos simplesmente dentro da variável $_GET (ou $_POST). Exemplo: se no formulário há um campo nome e email, o PHP receberá: $_GET[’email’] e $_GET[’nome’].
6. Defino como o retorno será tratado:
   onSuccess: function(transport) {
  var response = transport.responseText || "Nada Encontrado";
  $(‘retorno’).innerHTML = response;
}, . Nesse exemplo o PHP imprime texto com "echo", logo a resposta vem como texto puro, dentro de response.Text. Caso não venha nada, o || é tratado, e a resposta fica "Nada encontrado". O que quer que seja a resposta, eu passo para o div retorno.
7. E defino um tratamento de erro (caso ocorra perda de conexão, por exemplo): onFailure: function(){ alert(‘Something went wrong…’).
8. Logo acima do Request, temos a criação de "Responders". O que fazem? Eles executam uma ação quando um Request é criado e outra quando o Request é destruído. Através dos Responders você pode criar mensagens de "loading" por exemplo, ou alguma outra interação necessária.
   Ajax.Responders.register({
  onCreate: function(){
     $(‘loading’).className = ‘ativo’;
  }, 
  onComplete: function(){
     $(‘loading’).className = ‘oculto’;
  }
});
   Veja que na criação, ele exibe o div de loading, e na destruição do objeto, ele oculta.
9. Simples, não? Veja o PHP como fica limpo. E o JavaScript mais limpo ainda.

Veja esse exemplo em funcionamento. Digite "dinheiro" e aperte TAB, digite "cidade", e depois qualquer coisa.

Referências

1. Documentação da API do objeto AJAX: http://www.prototypejs.org/api/ajax
2. Introdução ao objeto AJAX, com exemplos: http://www.prototypejs.org/learn/introduction-to-ajax