Boa noite, me chamo Guilherme Soares Soldateli , sou conhecido de longa data do Eduardo Trialforce Bonfandini, atualmente somos colegas de trabalho também.

Uma das coisas que mais me chama atenção no desenvolvimento web é a interatividade, onde AJAX é simplesmente um requisito !

Comecei a estudar a pouco tempo mesmo esta tecnologia, no entanto a minha falta de conhecimento sobre o assunto me permitiu criar um passo a passo direto de como implementar AJAX com PHP.

Este artigo está direcionado para quem sabe por cima o que o AJAX deve fazer, caso não tenha uma noção mínima desenvolvida, atente a este artigo da wikipédia : http://pt.wikipedia.org/wiki/AJAX_%28programa%C3%A7%C3%A3o%2

Notas iniciais sobre os conceitos do AJAX que são descritos nos poucos artigos que pesquisei sobre :

• O Ajax significa Asynchronous Javascript And XML , ou seja , serve para ter uma conversa utilizando Javascript e XML com o servidor sem precisar dar refresh ou coisa do gênero no browser.

• Que apesar de ter o nome dizendo que é utilizado XML para esta conversação com o servidor, não é obrigatório que se lide diretamente com este formato de dados.

• Que existem três passos na conversação com o servidor :

Enviar uma requisição para o servidor.

Ter um script no servidor que lê esta requisição e gera uma resposta.

Ter uma função em javascript na página que enviou a requisição, para tratar como vai ser mostrada na tela a informação retornada pelo servidor [esta função é chamada assim que for identificado que o servidor entendeu direitinho o que lhe foi pedido].

Mãos a obra !

Para mostrar como é que esse bicho funciona, vou mostrar um exemplo que consiste em uma página em que tem um campo, e quando este campo for submetido ao servidor , o mesmo irá retornar [utilizando Ajax] o que foi digitado.

Tenho o exemplo pronto em anexo ao post, basta descompactá-lo em seu diretório configurado no virtual host.

São três arquivos :

• index.html : É a página html que vai ter a estrutura visual do exemplo.
• script.js : É o script que vai ser importado no index.html para dar a este a capacidade de lidar conversas/requisições assíncronas com o servidor.
• script_que_vai_tratar_requisicao_ajax.php : É o script PHP que vai receber o pedido enviado por javascript, processá-lo e retornar o que foi processado.

Fluxograma exemplficando a comunicação :

Fluxo de conversação Browser X Servidor por AJAX



No mais até este ponto foi onde eu tive maior dificuldade de entender o funcionamento básico do AJAX, e onde espero ter ajudado vocês a entender o “pulo do gato” para captar o conceito.

Irei realizar uma breve explicação das estruturas de cada um dos arquivos do exemplo, para que vocês possam entender da onde a requisição começa e até onde termina :

O trabalho do Browser

Envio Requisição

1. No index.html existe um formulário chamado form1 e um campo chamado departamento.

NOTA : No index.html foi importado o arquivo script.js que vai servir como a “cabeça” da aplicação, que pensa em uma pergunta, então a manda para o servidor , e fica em espera até ter uma resposta dele.

2. Ainda no index.html , ao ser submetido o form1, a função enviar_form(this) é chamada.

3. A função enviar_form(this) é responsável por instanciar um objeto XMLHttpRequest [Objeto padrão para tratar requisições AJAX , vide código que está bem documentado para entendimento fácil], e enviar para o servidor a requisição, que no caso é o conteúdo do campo departamento.

O trabalho do servidor

Recebimento da requisição feita pelo Browser

1. O script script_que_vai_tratar_requisicao_ajax.php trata a requisição vinda do browser e da um echo com o resultado da mesma. É importante frisar, que ao script terminar de ser executado com sucesso o mesmo diz assim “Ô XMLHttpRequest que está no script.js, recebi o teu pedido e ta ai a resposta certinha, toma ela ai !”.

O trabalho do Browser

Recebimento do resultado da requisição feita.

1. O XMLHttpRequest que está no script.js vai escutar o que script_que_vai_tratar_requisicao_ajax.php respondeu e vai pegar a resposta e passá-la para a função mensagem.

2. A função mensagem altera o conteúdo interno da span chamada mensagem que está localizada no index.html.

Voilá ! Dei-lhes o caminho das pedras, utilizem o artigo escrito como um “mapa” dos arquivos em anexo, vale lembrar que deixei estes bem comentados, para que possam entender da lógica bruta do AJAX com maior facilidade.

Aqui está o link com os arquivos de exemplo compactados : Exemplo Ajax.

Até a próxima e bons estudos !