AJAX e PHP: Aprendendo a base [Parte 2]

Continuando o post anterior, seguiremos agora para o módulo PHP, HTML e a conclusão do artigo.

3.3 Módulo PHP

Este módulo é simples e, na verdade, pode ser substituído por qualquer linguagem server-side. Como uma requisição AJAX nada mais é do que uma requisição normal feita em segundo plano, o nosso arquivo PHP trabalha como qualquer outro script, recebendo dados, processando e retornando, sendo a única diferença que vamos retornar XML e não HTML.

Ao invés de criar duas funções como defini anteriormente, vou apenas implementar um script de forma estruturada que execute as ações das duas funções. A primeira parte deve receber os dados e gravar em banco, utilizei neste exemplo um banco mysql e as funções normais de mysql para não complicar muito o aprendizado. A segunda parte deve pegar os mesmos dados e convertê-los em uma saída XML, de acordo com o padrão que escolhemos.

 //Conexão com banco $db = mysql\_connect("localhost","user","senha"); $db\_selected = mysql\_select\_db('phpajax', $db);

//Simular processo demorado para vermos o “carregando” (descartar em produção) sleep(3);

//Receber dados //Gravar no banco $sql = "INSERT INTO mural (msg) VALUES ('".$\_POST\['msg'\]."')"; $res = mysql\_query($sql);

//XML de Retorno $xmlDoc = new DOMDocument('1.0','iso-8859-1'); $response = $xmlDoc->createElement('response'); $response = $xmlDoc->appendChild($response);

//Elemento de erro $erro = $xmlDoc->createElement('erro',($res)? "0":"1"); $erro = $response->appendChild($erro);

//Elemento item $item = $xmlDoc->createElement('item',$\_POST\['msg'\]); $item->setAttribute('id',mysql\_insert\_id()); $item = $response->appendChild($item);

header('Content-Type: application/xml');

echo $xmlDoc->saveXML();

3.4 Módulo HTML

Como descrito várias vezes, este simples arquivo tem um DIV de carregando, um DIV que será o Mural e um campo de input com botão, sem o uso de um form, pois os dados são obtidos diretamente pela função enviaDados.

<script src="mural.funcs.js"></script>
<div id="form">
  <textarea id="msgBox" cols="10" rows="3"></textarea>

  <input onclick="enviaDados();" type="button" value="Enviar" />
</div>
<div id="loading">Carregando...</div>

3.5 Produto Final

Para ver o produto final funcionando, verifique o endereço abaixo: http://hosted.rafaeldohms.com.br/cursos/php_ajax/pratica1/mural.php

E faça download do código fonte neste endereço: 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 não mostra novamente os mesmos quando a página é re-carregada.

Considerações finais

Neste primeiro artigo, espero ter apresentado a todos o que realmente é AJAX e dissolvido alguns dos mitos que circulam por toda internet em relação à tecnologia. Considero o AJAX parte fundamental da internet e peça importante no desenvolvimento de sites que aproximem o usuário e tornem sua experiência 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 próximo 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 diárias.

Caso tenham alguma dúvida ou problema, sintam-se a vontade para visitar meu blog ou utilizar o contato abaixo, pois estarei disponível para tirar qualquer dúvida.