Conceptos de Ajax

Ahora nos queda ver como en el servidor recibir datos con formato JSON y proceder a generar una clase en PHP mediante la librería JSON.php.

La sintaxis es:

$json=new Services_JSON();
$cad=$json->decode(stripslashes($_REQUEST['cadena']));
echo 'Nombre:'.$cad->nombre;
...
...

Es decir la clase Services_JSON tiene un método llamado decode que recibe como parámetro una cadena con datos codificados en JSON y procede a retornar la información en un objeto.

Confeccionaremos un problema que envíe desde el navegador información en formato JSON y en el servidor la convertiremos en un objeto de PHP y procederemos a generar un trozo de HTML que retornaremos al navegador para que lo muestre.

El archivo pagina1.html

<html>
<head>
<title>Problema</title>
<script src="../json.js" language="JavaScript"></script>
<script src="funciones.js" language="JavaScript"></script>
</head>
<body>
<h2>Enviar datos desde el navegador en formato JSON y proceder a la
decodificación en una clase PHP con la librería JSON.php</h2>
<input type="button" value="Enviar" id="boton1">
<div id="resultados"></div>
</body>
</html>

El archivo con las funciones JavaScript es:

addEvent(window,'load',inicializarEventos,false);

function inicializarEventos()
{
  var ref=document.getElementById('boton1');
  addEvent(ref,'click',botonPresionado,false);
}

function botonPresionado(e)
{
  var obj={
    nombre:'juan',
    edad:25,
    sueldos:[1200,1700,1990]
  };
  var cadena=obj.toJSONString();
  enviarDatos(cadena);
}

var conexion1;
function enviarDatos(cadena) 
{
  conexion1=crearXMLHttpRequest();
  conexion1.onreadystatechange = procesarEventos;
  conexion1.open('GET','pagina1.php?cadena='+cadena, true);
  conexion1.send(null);
}

function procesarEventos()
{
  var resultados = document.getElementById("resultados");
  if(conexion1.readyState == 4)
  {
    resultados.innerHTML = conexion1.responseText;
  } 
  else 
  {
    resultados.innerHTML = "Cargando...";
  }
}

//***************************************
//Funciones comunes a todos los problemas
//***************************************
function addEvent(elemento,nomevento,funcion,captura)
{
  if (elemento.attachEvent)
  {
    elemento.attachEvent('on'+nomevento,funcion);
    return true;
  }
  else  
    if (elemento.addEventListener)
    {
      elemento.addEventListener(nomevento,funcion,captura);
      return true;
    }
    else
      return false;
}

function crearXMLHttpRequest() 
{
  var xmlHttp=null;
  if (window.ActiveXObject) 
    xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
  else 
    if (window.XMLHttpRequest) 
      xmlHttp = new XMLHttpRequest();
  return xmlHttp;
}

Cuando se presiona el botón procedemos a partir de un objeto JavaScript generar una cadena en formato JSON, luego procedemos a llamar a la función enviarDatos:

  var obj={
    nombre:'juan',
    edad:25,
    sueldos:[1200,1700,1990]
  };
  var cadena=obj.toJSONString();
  enviarDatos(cadena);

La función enviarDatos procede a crear un objeto de la clase XMLHttpRequest y pasa mediante el parámetro GET la cadena en formato JSON:

var conexion1;
function enviarDatos(cadena) 
{
  conexion1=crearXMLHttpRequest();
  conexion1.onreadystatechange = procesarEventos;
  conexion1.open('GET','pagina1.php?cadena='+cadena, true);
  conexion1.send(null);
}

Solo queda mostrar el trozo de datos en HTML que retorna el servidor:

function procesarEventos()
{
  var resultados = document.getElementById("resultados");
  if(conexion1.readyState == 4)
  {
    resultados.innerHTML = conexion1.responseText;
  } 
  else 
  {
    resultados.innerHTML = "Cargando...";
  }
}

Lo nuevo se centra en el archivo pagina1.php:

<?php
require('../JSON.php');
$json=new Services_JSON();
$cad=$json->decode(stripslashes($_REQUEST['cadena']));
echo 'Nombre:'.$cad->nombre;
echo '<br>';
echo 'Edad:'.$cad->edad;
echo '<br>';
echo 'Primer sueldo:'.$cad->sueldos[0];
echo '<br>';
echo 'Segundo sueldo:'.$cad->sueldos[1];
echo '<br>';
echo 'Tercer sueldo:'.$cad->sueldos[2];
?>

El método que convierte una cadena con formato JSON en un objeto de PHP es:

$cad=$json->decode(stripslashes($_REQUEST['cadena']));

Recordemos que con la función stripslashes sacamos los caracteres de escape(barras invertidad para las comillas entre otras)

Luego podemos fácilmente acceder a los atributos del objeto con la sintaxis:

echo 'Nombre:'.$cad->nombre;
echo '<br>';
echo 'Edad:'.$cad->edad;
echo '<br>';
echo 'Primer sueldo:'.$cad->sueldos[0];
echo '<br>';
echo 'Segundo sueldo:'.$cad->sueldos[1];
echo '<br>';
echo 'Tercer sueldo:'.$cad->sueldos[2];

24 - De JSON a PHP (utilizando la librería JSON.php)