AJAX e PHP: Aprendendo a base [Parte 1]

Neste artigo, pretendo apresentar ao Leitor a tecnologia AJAX, resolvendo algumas confuses sobre o que
realmente , e como e onde deve ser usada. Este artigo apresenta um exemplo de como implementar uma
soluo AJAX sem auxlio de Frameworks. Aps palestrar sobre o assunto no 1 PHPDF RoadShow (E no PHP
Conference 2007 em So Paulo) decidi por todo material das palestras em um artigo, que foi publicado pela
primeira vez na PHP Magazine, e que agora re-publico aqui em meu Blog. Esta primeira parte esta dividida
em duas pois descobri que meu WordPress fica louco com artigos grandes. E e breve este artigo ter uma
sequencia que entrar no uso de FrameWorks.
Desde que comecei a pesquisar sobre AJAX devo admitir que me apaixonei pela forma que ele permite
executar tarefas simples e avanadas de forma amigvel, simples e gil. Desde ento, tenho procurado
repassar este contedo, contribuindo brevemente com o site AJAX Online (www.ajaxonline.com.br) e
publicando diversos artigos em meu blog pessoal.
1. AJAX: detergente ou tecnologia?
O caminho para o aprendizado de AJAX no muito longo, mas mesmo assim possui diversos atalhos que
podem agilizar no desenvolvimento, porm podem acabar saindo pela culatra mais tarde, pois prejudicam
o conhecimento. O primeiro passo e tambm o ponto de maior confuso, a velha pergunta, O que
AJAX?. Leigos lhe diro que um detergente, alguns diro que uma nova linguagem de programao, eu
lhes digo que se trata apenas de uma nova forma de ver algo mais antigo.
O AJAX um conjunto de tcnicas novas, envolvendo diversas tecnologias antigas, dentre elas: Javascript,
XML, Document Object Model (DOM). Dentre estas tecnologias o nico elemento novo o XMLHttpRequest,
e mesmo assim ele no to novo quanto parece.
O XMLHttpRequest surgiu pela primeira vez em 2000, criado pela Microsoft para ser usado no Outlook Web
Access. Em 2002 a Mozilla incorporou o objeto em seus browsers e somente em 2006 foi lanado o primeiro
draft na W3C. Neste ponto d inicio o grande hype da Web 2.0 e o AJAX comea a ser amplamente
utilizado.
Conceitualmente, AJAX significa Asynchronous JavaScript and XML ou Javascript Assncrono e XML, mas na
prtica possvel utilizar objetos com notao JSON (JavaScript Object Notation) tambm, ao invs de XML.
Mais adiante vou discutir as vantagens e desvantagens disto. O grande conceito de AJAX permitir que o
cliente se comunique com o servidor atravs deste request, que realizado em segundo plano, sem
recarregar a pgina, efetivamente unindo a tecnologia client-side com a tecnologia server-side e
potencializando a comunicao.
Ateno: use com moderao! Embora seja algo muito legal, o AJAX no deve ser usado em qualquer lugar, pois,
ao invs de ajudar, pode tornar truncada a experincia do usurio, evite usar AJAX, por exemplo, como sua forma
de navegao principal.

Figura 1 Fluxo de uma requisio AJAX

2. Aprendendo AJAX
Como disse anteriormente, o caminho para aprender AJAX tem diversos atalhos e, no momento em que se
decide aprender AJAX, necessrio avaliar qual caminho ir tomar. Existem dois caminhos principais para se
trilhar, aprender AJAX com frameworks ou sem frameworks. Cada um tem sua vantagem como, por
exemplo, com frameworks a produtividade aumenta, porm sem ter trilhado o caminho primitivo dar
manuteno em scripts que apresentam erros pode se tornar uma tarefa difcil. Eu, pessoalmente, defendo
que se deve aprender pelo caminho difcil para depois viver no caminho fcil, ento vou abordar as duas
formas de se usar e aprender AJAX, iniciando neste artigo pelo AJAX puro, ou seja, primitivo, e deixando o
segundo exemplo para uma futura contribuio..
2.1. AJAX primitivo
Implementar funes de AJAX na mo no tarefa difcil, ao contrario do que muitos pensam, porm
importante, antes de mais nada, entender como funciona o objeto XMLHttpRequest.
O Request simula o funcionamento do browser. Neste ltimo, quando se clica em um link, feita uma
requisio para determinado arquivo e o resultado desta requisio apresentado na tela do browser. No
AJAX, essa requisio feita da mesma forma, porm o resultado no se carrega na janela e sim dentro do
prprio objeto de request, isso causa o efeito de segundo plano que o AJAX apresenta.
Para isso, o objeto possui alguns mtodos e propriedades importantes. Primeiro as propriedades:
ReadyState: estado atual da requisio, indica se a pagina ainda est sendo buscada ou se o

resultado j chegou, pode possui estes estados:

o

0 = uninitialized (no inicializado)

1 = loading (carregando)

2 = loaded (carregado)

3 = interactive (interagindo)

4 = complete (pronto)

ResponseText: Resultado da requisio em formato de texto comum, usado tambm para

JSON

ResponseXML: Resultado em formato XML

Status: Cdigos de erro ou sucesso como: 200,404,403

StatusText: mesmo erro, mas de forma textual (Not found)

Onreadystatechange: propriedade/evento, indica a funo que ser executada quando a

requisio mudar seu readyState
Para executar seu papel, o objeto conta tambm com alguns mtodos:

Open(method,URL,async,uname,pswd) este mtodo abre uma nova requisio para a URL

determinada com o mtodo escolhido (GET ou POST). Esta requisio pode ser sncrona ou assncrona,
determinando se o cdigo continua sendo executado independente da resposta ou se a resposta
aguardada para continuar o processamento.

Send(content) este mtodo inicia a comunicao com a URL e recebe apenas o parmetro (opcional)
de que contedo deve enviar. Este contedo est em formato de URL, ou seja, var=valor&var2=valor2.

Abort() este mtodo simples e pode ser muito importante, pois finaliza uma requisio que ainda
no retornou qualquer resposta do servidor, e til em casos onde novas requisies podem ocorrer
descartando as anteriores sem respostas, como em campos de auto-complete.

SetRequestHeader(label, value) este mtodo importante quando POST utilizado, permitindo

setar o contedo da requisio para multipart/form-data, por exemplo. Uma falha neste ponto pode
derrubar toda a requisio.

GetResponseHeader(headername) e getAllResponseHeaders() estes mtodos so teis em

verificaes de segurana que permitem, por exemplo, verificar se o contedo da resposta realmente est
em JSON ou XML.
Para entender como usar este objeto e como devemos manipular seus mtodos e propriedades, a seguir,
definirei um exemplo simples de uma aplicao que pode utilizar AJAX, e acompanharei passo a passo com
vocs a implementao.
3. Desenvolvendo um mural de recados com AJAX
O sistema proposto bem simples, justamente para facilitar o entendimento do AJAX e no se focar em
outros aspectos. De forma geral, o sistema deve possuir uma regio onde apresenta as mensagens, o mural,
e um campo que permita a algum digitar algo, sendo isto inserido no mural sem haver um re-carregamento
da pgina como um todo.
3.1 Modelagem
O primeiro passo de um sistema deve ser sempre a modelagem, utilizando UML ou outras formas de
modelagem, porm, como este no nosso foco, farei apenas uma modelagem simples para compreenso
do sistema. O sistema contar com duas funcionalidades, adio e visualizao de imagens. Portanto a
figura abaixo apresenta o fluxo dos dados e eventos do momento que o usurio envia seu recado at ele
aparecer no mural (por motivos de simplicidade, ao recarregar a pgina, as mensagens no so
recarregadas no mural).

Figura 2 - Fluxo do exemplo

Separei o sistema em trs mdulos: javascript (verde), HTML (amarelo) e PHP (azul), para podermos ver a
interao entre essas linguagens. No mdulo de javascript, ser realizada toda a operao de AJAX
propriamente dita, como demonstrado na figura acima. Para isso, devemos criar 3 funes: uma para criar o
request, uma para enviar a mensagem e outra para receber o retorno e publi
car no mural.
No PHP precisamos de duas funes: uma que receba os dados e grave no banco e outra que formate o
retorno e envie de volta para o javascript. Neste caso, estamos usando XML, mas o uso de JSON ser
demonstrado em futuros artigos. A estrutura do retorno XML proposta a seguinte:

1
2
3
4
5

<?xml version="1.0" encoding="iso-8859-1" ?>

<response>
<erro>0/1</erro>
<item id="1">Retorno em HTML ou Texto</item>
</response>

No HTML teremos apenas um campo de input, um boto e um div que representa o mural.
A figura abaixo demonstra como as funes interagem entre sim, de forma simplificada. Escolhi separar o
sistema em 3 arquivos, onde cada um representa um dos mdulos acima descritos.

Figura 3 - Interao das funes

A tabela onde os dados sero guardados pode ser criada com este cdigo:
1
CREATE TABLE `mural` (
2
`id` int(3) NOT NULL auto_increment,
3 `msg` text character set latin1 collate latin1_general_ci,
4 PRIMARY KEY (`id`)
5 ) ENGINE=InnoDB DEFAULT CHARSET=latin1;
3.2 Mdulo Javascript
A primeira funo que precisamos a funo responsvel por criar o request de XMLHTTPRequest, mas por
que fazer uma funo? Simples, como o IE implementa o objeto de forma diferente de outros browsers
implementamos estes diferentes mtodos em uma funo, com isso a instanciao do objeto se torna algo
mais simples e pontual, veja cdigo:
1
function criaRequest(){
2
try {
3
request = new XMLHttpRequest();
4
} catch (trymicrosoft) {
5
6
try {
7 request = new ActiveXObject("Msxml2.XMLHTTP");
8 } catch (othermicrosoft) {
9
10
try {
11 request = new ActiveXObject("Microsoft.XMLHTTP");
12 } catch (failed) {
13
request = false;

14
15
16
17
18
19
20
21
22

}
}
}
if (!request)
alert("Error initializing XMLHttpRequest!");
else
return request;
}

Agora devemos definir a funo que vai enviar estes dados. Esta funo deve chamar a funo anterior para
obter um request, e ento iniciar seu processamento. O prximo passo buscar o texto do campo e montar
a requisio. Usaremos o mtodo POST e, com isso, devemos definir o header de Content-Type, passando o
texto do campo com o nome de varivel msg.
Neste momento, tambm importante definirmos a funo que ser executada ao final da requisio,
usando o onreadystatechange. Para dar um efeito a mais neste momento, tornamos visvel um DIV com o
texto Carregando para que o usurio possa saber que algo est acontecendo.
1
function enviaDados(){
2
//Novo Request
3
linkReq = criaRequest();
4
5
if(linkReq != undefined){
6
//Pegar dados
7 var msgBox = document.getElementById('msgBox');
8
9 //Montar requisio
10
linkReq.open("POST","mural.ajax.php",true);
11 linkReq.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
12 linkReq.onreadystatechange = recebeDados;
13
14
var params = "msg="+msgBox.value;
15
16
//Carregar DIV de "loading"
17 document.getElementById('loading').style.display = 'block';
18
19
//Enviar
20
linkReq.send(params);
21
22
//Esvaziar form
23
msgBox.value = "";
24
}
25
26
}
Definimos a funo recebeDados como o retorno do request, mas ela ser chamada a cada alterao de
estado. Portanto, precisamos verificar o novo estado para sabermos se o resultado final j foi retornado.
Uma vez confirmado o estado 4, podemos tratar o retorno.

Para isso, como foi definido o retorno em XML, leremos os dados da varivel responseXML, lendo os campos
atravs de DOM e inserido este retorno no DIV, dentro de uma DIV prpria da mensagem. Esta manipulao
toda feita atravs de DOM com funes que esto disponveis desde o incio dos browsers.
1
function recebeDados(){
2
3 //Verificar pelo estado "4" de pronto
4 if (linkReq.readyState == '4'){
5
6
//Pegar dados da resposta XML
7
var xmlRes = linkReq.responseXML;
8
9 //Verificar erro
10
var erro = xmlRes.getElementsByTagName('erro');
11
12
if (erro[0].firstChild.nodeValue == '1'){
13 alert("Erro no retorno"+erro[0].firstChild.nodeValue);
14 }else{
15 //Pegar mensagem
16 var msg = xmlRes.getElementsByTagName('item');
17
18
//Pegar DIV destino
19 var targetDiv = document.getElementById('msgList');
20
21
//Montar Nova msg
22
var mDiv = document.createElement('div');
23
mDiv.id = "msg_"+msg[0].id;
24
mDiv.innerHTML = msg[0].firstChild.nodeValue;
25
26
//Adicionar ao destino
27
targetDiv.appendChild(mDiv);
28
29 //Remove loading
30 document.getElementById('loading').style.display = 'none';
31
}
32
33
}
34
}
3.3 Mdulo PHP
Este mdulo simples e, na verdade, pode ser substitudo por qualquer linguagem server-side. Como uma
requisio AJAX nada mais do que uma requisio normal feita em segundo plano, o nosso arquivo PHP
trabalha como qualquer outro script, recebendo dados, processando e retornando, sendo a nica diferena
que vamos retornar XML e no HTML.
Ao invs de criar duas funes como defini anteriormente, vou apenas implementar um script de forma
estruturada que execute as aes das duas funes. A primeira parte deve receber os dados e gravar em
banco, utilizei neste exemplo um banco mysql e as funes normais de mysql para no complicar muito o

aprendizado. A segunda parte deve pegar os mesmos dados e convert-los em uma sada XML, de acordo
com o padro que escolhemos.
1 //Conexo com banco
2 $db = mysql_connect("localhost","user","senha");
3 $db_selected = mysql_select_db('phpajax', $db);
4
5 //Simular processo demorado para vermos o carregando (descartar em produo)
6 sleep(3);
7
8
//Receber dados
9 //Gravar no banco
10
$sql = "INSERT INTO mural (msg) VALUES ('".$_POST['msg']."')";
11
$res = mysql_query($sql);
12
13
//XML de Retorno
14
$xmlDoc = new DOMDocument('1.0','iso-8859-1');
15 $response = $xmlDoc->createElement('response');
16 $response = $xmlDoc->appendChild($response);
17
18
//Elemento de erro
19 $erro = $xmlDoc->createElement('erro',($res)? "0":"1");
20 $erro = $response->appendChild($erro);
21
22
//Elemento item
23 $item = $xmlDoc->createElement('item',$_POST['msg']);
24 $item->setAttribute('id',mysql_insert_id());
25
$item = $response->appendChild($item);
26
27
header('Content-Type: application/xml');
28
29
echo $xmlDoc->saveXML();
3.4 Mdulo HTML
Como descrito vrias vezes, este simples arquivo tem um DIV de carregando, um DIV que ser o Mural e um
campo de input com boto, sem o uso de um form, pois os dados so obtidos diretamente pela funo
enviaDados.
1 <script src="mural.funcs.js"></script>
2 <div id="form"><textarea id="msgBox" cols="10" rows="3"></textarea>
3
4 <input onclick="enviaDados();" type="button" value="Enviar" /></div>
5 <div id="loading">Carregando...</div>
3.5 Produto Final
Para ver o produto final funcionando, verifique o endereo abaixo:
http://hosted.rafaeldohms.com.br/cursos/php_ajax/pratica1/mural.php
E faa download do cdigo fonte neste endereo:
http://hosted.rafaeldohms.com.br/cursos/php_ajax/php_ajax_pratica1.zip

Este exemplo como eu disse, apenas apresenta os dados uma vez enviados, e no mostra novamente os
mesmos quando a pgina re-carregada.
Consideraes finais
Neste primeiro artigo, espero ter apresentado a todos o que realmente AJAX e dissolvido alguns dos mitos
que circulam por toda internet em relao tecnologia. Considero o AJAX parte fundamental da internet e
pea importante no desenvolvimento de sites que aproximem o usurio e tornem sua experincia na web
algo mais natural e intuitivo. Por isso, seu aprendizado algo muito importante e saber usar este recurso de
forma crua qualifica o profissional e pode auxiliar muito na hora do aperto. Em um prximo artigo
(programado para Setembro), irei me aventurar no mundo dos frameworks, mostrando como obter uma
maior produtividade em seus trabalhos, facilitando muito o as tarefas dirias.
Caso tenham alguma dvida ou problema, sintam-se a vontade para visitar meu blog ou utilizar o contato
abaixo, pois estarei disponvel para tirar qualquer dvida.