Palavra:   

Revista PHP / AJAX

Alexandre Semmer

Bacharel em Ciências da Computação pela UNIPAN-Cascavel PR, trabalha com desenvolvimento em PHP para sistemas web à 3 anos. Gerente de projetos da WebGenium System. Tem conhecimentos em Java, Ajax, JavaScript, CSS, Padrões de Projetos, XML e JSON. Banco de dados MySQL e PostgreSQL

Trabalhando com AJAX e JSON no PHP

Neste artigo vou dar uma introdução de como trabalhar com JSON no PHP. Primeiramente JSON (pronuncia-se “djeison”) significa JavaScript Object Notation ( Notação de Objetos JavaScript), é uma formatação leve para troca de dados. Para informações mais precisas acesse http://json.org/json-pt.html . Mas resumindo, é um vetorzão de dados transformado em uma string, que pode ser utilizada pelo JavaScript e  pelo PHP. Uma boa, na verdade, ótima alternativa para o XML na utilização do AJAX.

Existem as funções json_decode e json_encode do PHP5 (http://br.php.net/manual/pt_BR/ref.json.php), mas nem todos os servidores as têm instalado, além de ter alguns erros de acentuação no retorno do json. Por isso vamos utilizar uma classe criada por Michal Migurski, Matt Knapp e Brett Stimmerman , (segue em anexo, linkar aqui “ json.php” ), esta classe pode ser usada em qualquer versão do PHP5 sem ter que mexer em configurações no servidor.

Na parte do AJAX, vou utilizar a biblioteca Prototype (http://prototypejs.org), vou mostrar dois exemplos da utilização do JSON, a primeira como resultado do responseText e outra retornando através do cabeçalho HTTP.

Os arquivos.

javascript/prototype.js: script do prototype, para quem não tem (http://prototypejs.org/download).
json.php : Classe JSON.
getvalores.php: arquivo que ira criar a string JSON e retornará para o ajax.
Index.php: arquivo principal.

PHP
  1. <?php
  2. require_once("json.php");
  3.  
  4. $dados[0]["Nome"] = "Alexandre";
  5. $dados[0]["Idade"] = "25 anos";
  6. $dados[0]["Sexo"] = "Masculino";
  7.  
  8. $dados[1]["Nome"] = "Maria";
  9. $dados[1]["Idade"] = "19 anos";
  10. $dados[1]["Sexo"] = "Feminino";
  11.  
  12. $dados[2]["Nome"] = "Pedro";
  13. $dados[2]["Idade"] = "31 anos";
  14. $dados[2]["Sexo"] = "Masculino";
  15.  
  16.  
  17. $json = new Json();
  18. $resposta = $json->encode($dados);
  19. if($_POST["tipo"] == "texto"){
  20. echo $resposta;
  21. }else{
  22. header("Content-Type: text/html; charset=iso-8859-1");
  23. header('X-JSON: '.$resposta);
  24. }
  25.  
  26. ?>
www.revistaphp.com.br

Arquivo getvalores.php,  nele é incluído a classe Json, e atribuido o vetor para ela criar a string JSON atravez do método encode(), no caso ficaria:

[{"Nome":"Alexandre","Idade":"25 anos","Sexo":"Masculino"},{"Nome":"Maria","Idade":"19 anos","Sexo":"Feminino"},{"Nome":"Pedro","Idade":"31 anos","Sexo":"Masculino"}]

Depois é verificado se ira retornar um responseText ou irá incluir essa string no cabeçalho X-JSON do HTTP.

JavaScript
  1. <script type='text/javascript' src='javascript/prototype.js'></script>
  2. <script type='text/javascript' >
  3. function ajaxJson(tipo)
  4. {
  5. $('retorno').innerHTML = "";
  6. var url = "getvalores.php";
  7. var parametros = "?tipo="+tipo
  8. new Ajax.Request(
  9. url,
  10. {
  11. method: 'post',
  12. parameters: parametros,
  13. onComplete: function(resposta,json) {
  14. if(json){
  15. $('retorno_json').innerHTML = json;
  16. for(x=0; x< json.length; x++ ){
  17. $('retorno').innerHTML += json[x].Nome +"<br>"+
  18. json[x].Idade +"<br>"+
  19. json[x].Sexo +"<br>----<br>" ;
  20. }
  21. }else{
  22. $('retorno_json').innerHTML = resposta.responseText;
  23. var objeto = eval('(' + resposta.responseText + ')');
  24. for(x=0; x< objeto.length; x++ ){
  25. $('retorno').innerHTML += objeto[x].Nome +"<br>"+
  26. objeto[x].Idade +"<br>"+
  27. objeto[x].Sexo +"<br>----<br>" ;
  28. }
  29. }
  30.  
  31. }
  32. });
  33. }
  34. </script>
  35.  
  36. <input type="button" onclick="ajaxJson('texto')" value="Json por texto"/>
  37. <input type="button" onclick="ajaxJson('header')" value="Json por header HTTP"/>
  38. <script type='text/javascript' src='javascript/prototype.js'></script>
  39. <script type='text/javascript' >
  40. function ajaxJson(tipo)
  41. {
  42. $('retorno').innerHTML = "";
  43. var url = "getvalores.php";
  44. var parametros = "?tipo="+tipo
  45. new Ajax.Request(
  46. url,
  47. {
  48. method: 'post',
  49. parameters: parametros,
  50. onComplete: function(resposta,json) {
  51. if(json){
  52. $('retorno_json').innerHTML = json;
  53. for(x=0; x< json.length; x++ ){
  54. $('retorno').innerHTML += json[x].Nome +"<br>"+
  55. json[x].Idade +"<br>"+
  56. json[x].Sexo +"<br>----<br>" ;
  57. }
  58. }else{
  59. $('retorno_json').innerHTML = resposta.responseText;
  60. var objeto = eval('(' + resposta.responseText + ')');
  61. for(x=0; x< objeto.length; x++ ){
  62. $('retorno').innerHTML += objeto[x].Nome +"<br>"+
  63. objeto[x].Idade +"<br>"+
  64. objeto[x].Sexo +"<br>----<br>" ;
  65. }
  66. }
  67.  
  68. }
  69. });
  70. }
  71. </script>
  72.  
  73. <input type="button" onclick="ajaxJson('texto')" value="Json por texto"/>
  74. <input type="button" onclick="ajaxJson('header')" value="Json por header HTTP"/>
  75. <br><b>Retorno do JSON:</b><br>
  76. <div id="retorno_json"></div>
  77. <br><b>Retorno do JSON trablhado:</b><br>
  78. <div id="retorno"></div>
  79.  
www.revistaphp.com.br

No arquivo  index.php,  primeiramente é incluído o prototype.js. Na função ajaxJson, recebe como parâmetro uma string (“texto” ou “header”) que definira o tipo de retorno para do arquivo getvalores.php.

responseText

Caso for usado o responseText como retorno, deverá ser utilizado o primeiro parâmetro no caso “resposta” e aplicar um eval() dentro de “(“ nesta variável, criando assim um vetor de objetos. Exemplo:

var objeto = eval('(' + resposta.responseText + ')');

 * Este exemplo poderá ser utilizado com qualquer classe AJAX, não necessariamente com o prototype.

Retorno da requisição AJAX pelo response.

Cabeçalho X-JSON

Se for retornado pelo cabeçalho HTTP, o prototype tem um método especifico para isso, no caso o segundo parâmetro “json”, já retornando o vetor de objetos, sem precisar do uso do eval.

* Essa é uma funcionalidade própria do prototype, não sei se outras bibliotecas tem isso, ou como implementar na mão essa funcionalidade
.

Retorno da requisição AJAX pelo cabeçalho X-JSON.

Espero ter ajudado novamente, para quem não conhecia o JSON esta ai uma boa oportunidade para começar a usar, depois que descobri o JSON, XML nunca mais J.  Qualquer dúvida só entrar em contato. Valeu e tudo de bom.

Opções de Interação

Comentários

Classe Json
Por: Alexandre, 30/01/2009   15:59:01
Pode pegar direto da fonte entao..
http://pear.php.net/pepr/pepr-proposal-show.php?id=198
Class Json
Por: Marcelo, 30/01/2009   15:40:48
Alexandre,

o link para download do JSON.rar está quebrado.
Teria como ter um link válido?
Agradeço!
classe json
Por: Alexandre, 30/07/2008   17:54:17
ola Hugo, acho que devo ter esquecido de mandar junto com o artigo.. tai o link..
www.alexandresemmer.com/classes/JSON.rar
Download Class Json
Por: Hugo, 30/07/2008   17:39:09
Olá, tem como disponibilizar o link para download da class json.