Cauan Cabral – Geek

Prototype é uma biblioteca javascript bastante utilizada, mas que pra mim nunca chamou atenção (ao contrário do JQuery), mas como tenho utilizado o CakePHP e em sua estrutura de Helpers ele usa esta biblioteca, tive de “perder” um tempinho estudando-a.

Para isso, fiz como meu amigo PorKaria e montei um sisteminha simples de comentários (na verdade o dele era o guestbook, mas no fim fazem a mesmo coisa, hehehe).

Descrição do sistema:

Sistema usando AJAX (na verdade o X aqui é de XHTML, porque não utilizo XML) Permite a inserção de comentários, salvando-os em um banco de dados (MySQL), tudo de forma assíncrona. A bibliote utilizada para implementação da parte em javascript é a Prototype, a formatação (CSS) foi retirada de um tutorial do Tableless sobre formatação de formulários e o PHP foi escrito por mim. Além do cadastro, fiz o que pode se chamar início de um sistema de busca com sugestão (famoso autocomplete). Digo o início porque ele não avalia bem o momento de se fazer a busca e não é possível clicar nos resultados, apenas vê-los.

Estrutura:

• main.php : é a página onde está todo o sistema, apartir dela que é feito a leitura dos comentários e o envio de novos comentários;
• adiciona_comentario.php : nesta página fazemos o processamento dos dados vindos do formulário e os salvamos no banco;
• le_comentario.php : arquivo que recupera do banco todos os comentarios e retorna os dados em uma lista html;
• busca_comentario.php : script que faz a busca dos comentários no banco para o “autocomplete” e retorna-os como uma lista;
• validation.class.php : velho conhecido que faz a validação dos dados… a classe ainda está em implementação, mas já está mais completa do que a versão anterior que compartilhei.

Irei comentar apenas a parte javascript, qualquer dúvida sobre o restante, deixe nos comentários ou email-me.

//Funcao que recupera os dados do banco para apresentar ao usuário
function recupera(){
	new Ajax.Updater('comentarios', 'adiciona_comentario.php');
};

O trecho acima define uma função que cria uma nova instância de Ajax.Updater, que fará uma chamada ao arquivo adiciona_comentario.php e usará a resposta para substituir o conteúdo da tag XHTML com ID ‘comentarios’. Ou seja, é essa função que ira carregar os comentários feitos na página.

//Funcao que envia os dados do formulário para serem salvos no banco
function envia(){
	new Ajax.Request('adiciona_comentario.php',
	{
		method: 'post',
		parameters: $("adiciona").serialize(),
		onCreate: function() {
			$('adiciona').hide();
			$('enviando').show();
		},
		onSuccess: function(transport){
			$('enviando').hide();
			$('adiciona').show();
			recupera();
		},
		onFailure: function(){ alert('Alguma coisa não deu certo...') }
	});
}

Este outro trecho define a função envia os dados do formulário para o arquivo adiciona_comentario. Aí é utilizado o objeto Ajax.Request, que é a implementação mais genérica do Prototype para Ajax.
O que é passado para o objeto:

1. O arquivo que receberá a requisição
2. Aqui vem o segundo parâmetro que é composto por vários subparâmetros
   1. Método de envio: POST;
   2. Variáveis enviadas: utilizo a função ’serialize()’ no formulário, ela transforma os dados dele em uma lista de variáveis, entendíveis pelo navegador e PHP;
   3. Uma função callback que é disparada quando é criado a requisição. Uso ela para mostrar uma mensagem ‘Enviando…’;
   4. Uma função callback que é disparada quando é concluído com sucesso a requisição. Ela esconde a mensagem mostrada anteriormente e chama a função ‘recupera()’ para recarregar os comentários;
   5. Por última uma função callback que é disparada quando ocorre um erro na requisição.

//Funcao que faz uma busca em Ajax e retorna os resultados como em um autocompletar
function fazBusca(event){
	new Ajax.Request('busca_comentario.php',
	{
		method: 'post',
		parameters: $('termo').serialize(),
		onCreate: function() {
			$('resultados').hide();
		},
		onSuccess: function(transport){
			$('resultados').update(transport.responseText);
			$('resultados').show();
	},
	onFailure: function(){ alert('Alguma coisa não deu certo...') }
	});
}

Aqui uma função que faz a busca pelos termos digitados. Utiliza o mesmo objeto da função anterior, o Ajax.Request, então não entrarei em detalhes.

//Evento que é disparado quando o documento termina de carregar sua estrutura
document.observe("dom:loaded", function() {
	$('enviando').hide();
	$('carregando').hide();
	$('resultados').hide();
	recupera();
 
	$('busca').observe('keydown', fazBusca);
});

Por ultimo utilizo a função ‘observe()’ no elemento ‘document’ para que após concluída o carregamento da página (não incluído aí o carregamento de possíveis imagens), execute alguns comandos:
Com a função ‘hide()’ escondo os elementos de aviso ao usuário;
Com a última linha, faço com que sempre que uma tecla for pressionada (keydown) no elemento com ID ‘busca’, execute a função ‘fazBusca’.

Um bônus:

Muitas pessoas enfrentam problemas com codificação quando trabalham com AJAX, para poupar dores de cabeça é recomendado o uso de UTF8 tanto no seu editor de texto (na hora de criar os códigos), quanto nos header dos documentos e no banco de dados. Tendo certeza que está tudo em UTF8, você provavelmente não terá problemas. Só não esqueça de um detalhe: o PHP não trabalha nativamente com UTF8, então, antes de usar qualquer função que trate uma string, use a função utf8_decode do PHP e depois, mas antes de salvar no banco de dados, utilize a função utf8_encode. Isso será necessário até o lançamento do PHP 6.

Download de todos os arquivos do exemplo.
obs.: descompacte os arquivos numa mesma pasta, em seguida crie um novo diretório chamado ‘lib’ e mova o arquivo validation.class.php para ele.

7 Comentários to “AJAX com Prototype”