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.

Para quem não sabe, Google Analytics é um serviço do Google que permite coleta e acompanhamento de diversas informações de uma página na internet, como número de visitas, origem das visitas, tempo de permanência na página, palavras chaves usadas para chegar até sua página e várias outras. Ou seja, indispensável para quem desenvolve para web (indispensável o tipo de ferramenta, existem alternativas, como o Yahoo! Web Analytics).

Para os que conhecem: uma coisa que sempre me “frustou” foi ter meus trabalhos em Flash (Ajax entra no mesmo ramo, apesar de não ter nada publicado ainda) não terem a mesma facilidade para coleta e acompanhamento de informações. O máximo que conseguia era saber de onde o individuo havia chegado, quanto tempo permaneceu no site e as palavras chaves mais comuns. Mas apesar do Google indexar o conteúdo dos arquivos em Flash, eu não podia, por exemplo, saber quais partes do site/apresentação recebia mais visita.

Agora meus problemas acabaram(-se): A resposta para o problema é 42.

Bom, na verdade a solução deveria ser óbvia para quem conhece a API ou o sistema de coleta de informações do Google, mas ainda não havia reparado no óbvio: é só fazer uma chamada a função _trackPageview();
Essa função é incluída em nossas páginas no meio do código que o Google nos passa na hora que criamos a conta no Analytics.

O interessante é que essa função aceita um parâmetro, e é esse o ponto da solução, é só dizer que “seção” do site a pessoa vai estar entrando ao clicar em um link que ela será computada pelo Analytics.

Seguindo o exemplo fornecido pelo PRÓPRIO:

seuBotao.addEventListener( MouseEvent.CLICK, this.clicked );
function clicked(MouseEvent e):Void
{
    getURL("javascript:pageTracker._trackPageview('/contato')");
}

Com este código, quando alguém clicar no botão “seuBotao”, será invocado a função clicked e nela será chamada a função javascript do Analytics, dizendo que a pessoa está acessando a pasta ‘contato’. Notem que a pasta ‘contato’ não precisa existir, pode ser um arquivo ou o que você achar melhor. Depois é só entrar no painel do Analytics e conferir as novas informações.

Supimpa, não?