Attakinsky

¿Qué es JSON?

Según Wikipedia “JSON, acrónimo de «JavaScript Object Notation», es un formato ligero para el intercambio de datos. JSON es un subconjunto de la notación literal de objetos de JavaScript que no requiere el uso de XML.”, mientras que json.org lo define como “JSON (JavaScript Object Notation – Notación de Objetos de JavaScript) es un formato ligero de intercambio de datos. Leerlo y escribirlo es simple para humanos, mientras que para las máquinas es simple interpretarlo y generarlo.” Lo cual no nos aclara la mayoría de dudas si deseamos entenderlo a fondo.

En realidad JSON no es más que una forma de estructurar texto, de manera que JavaScript pueda intercambiar información con otros lenguajes como ASP, C#, JAVA o Ruby entre muchos otros, pero en nuestro caso nos interesa PHP.

La especificación de JSON no es especialmente complicada, y solo debemos notar algunos pequeños detalles:

• Todo dato o conjunto de datos, se encierra dentro de llaves ‘{}‘.
• Cada dato se representa como un par ordenado separado por dos puntos, es decir {"color":"rojo"}, donde ‘color‘ es el nombre del dato y ‘rojo‘ es su valor.
• Un arreglo, donde cada valor recibe un indice auto-numérico, se encierra dentro de corchetes ‘[]‘. Por ejemplo {"colores":{["rojo","verde","azul"]}} representa un arreglo llamado ‘colores’ con tres valores, que no se representaron como par ordenado, sino que se asumen de manera automática los índices 0, 1 y 2.

Veamos un ejemplo:

$persona = array (
    'nombre' => 'Juan',
    'apellido' => 'Pérez',
    'edad' => '25',
    'preferencias' => array (
        'deporte' => 'Fútbol',
        'comida'  => 'Pizza',
        'musica'  => array('Rock','Jazz','Techno')
    );
);

…codificado en JSON, equivale a un objeto JavaScript definido como:

var persona = {
  "nombre":"Juan",
  "apellido":"Pérez",
  "edad":"25",
  "preferencias":{
    "deporte":"Fútbol",
    "comida":"Pizza",
    "musica":{["Rock","Jazz","Techno"]}
  }
}

Lo cual no sólo es fácil de entender para quien ya utiliza objetos en JavaScript, sino que además es un conjunto de datos que ya esta listo para utilizarse. Por ejemplo podemos mostrar el nombre de forma sencilla con alert(persona.nombre); Ahora bien, la transferencia de datos puede hacerse mediante XML:

<persona>
    <nombre>Juan</nombre>
    <apellido>Pérez</apellido>
    <edad>25</Edad>
    <preferencias>
        <deporte>Fútbol</deporte>
        <comida>Pizza</comida>
        <musica>
            <0>Rock</0>
            <1>Jazz</1>
            <2>Techno</2>
        </musica>
    </preferencias>
</persona>

…pero en realidad, para convertirlo de PHP a XML necesita un procedimiento relativamente largo (unas cuantas líneas) más las que necesitamos en JavaScript para leerlo.  Nuestro arreglo en PHP, se puede convertir a JSON con la simple instrucción json_encode (sólo a partir de PHP 5.2):

echo json_encode($persona);

Ahora, llevemos todo esto a la práctica. Para ello, nos ambientaremos con un sencillo formulario en nuestro archivo index.php:

<h2>Editar los datos de:</h2>
<ul>
  <li><a href="#" id="empleado_2">Juan Pérez</a></li>
  <li><a href="#" id="empleado_5">Pedro Ramirez</a></li>
  <li><a href="#" id="empleado_9">María González</a></li>
</ul>
<form action="">
  <fieldset>
    <legend>Modificar información del empleado</legend>
    <dl>
      <dt>Nombres:</dt></pre>
      <dd><input type="text" id="nombres" value="" /></dd>
      <dt>Apellidos:</dt>
      <dd><input type="text" id="apellidos" value="" /></dd>
      <dt>Edad:</dt>
      <dd><input type="text" id="edad" value="" /></dd>
      <dt>preferencias:</dt>
      <dd>
        <ol>
          <li><input type="checkbox" class="pref" id="pref_0" value="football"/>    Fútbol</li>
          <li><input type="checkbox" class="pref" id="pref_1" value="baseball" />   Beisbol</li>
          <li><input type="checkbox" class="pref" id="pref_2" value="volleyball" /> Volíbol</li>
          <li><input type="checkbox" class="pref" id="pref_3" value="chess" />      Ajedrez</li>
          <li><input type="checkbox" class="pref" id="pref_4" value="painting" />   Pintura</li>
          <li><input type="checkbox" class="pref" id="pref_5" value="poetry" />     Poesía</li>
        </ol>
      </dd>
      <dt></dt>
      <dd><input type="submit" value="Enviar" /></dd>
    </dl>
  </fieldset>
</form>

Tres links y un formulario bastan para ilustrar la manera de transferir datos de PHP a JavaScript utilizando JSON. Como se intuye, al hacer clic sobre el nombre de un empleado, el AJAX deberá traer y colocar los datos de esa persona en el formulario. El código PHP tampoco difiere mucho del que utilizamos en el ejemplo anterior, y lo colocamos en otro archivo llamado database.php:

$empleados = array(
  '2' => array(
    'nombres' => 'Juan Antonio',
    'apellidos' => 'Pérez Sánchez',
    'edad' => '25',
    'preferencias' => array('0','3','4')
  ),
  '5' => array(
    'nombres' => 'Pedro Ricardo',
    'apellidos' => 'Ramirez Tobar',
    'edad' => '28',
    'preferencias' => array('0','1')
  ),
  '9' => array(
    'nombres' => 'Juan Antonio',
    'apellidos' => 'Pérez Sánchez',
    'edad' => '25',
    'preferencias' => array('2','4','5')
  )
);
$emp = $_POST['emp'];
echo json_encode($empleados[$emp]);

De nuevo encontramos un caso donde los datos deberían venir de una base de datos, pero para simplicidad del ejemplo, utilizaremos un arreglo bastante pequeño. El valor recibido por medio de $_POST, es seleccionado en el arreglo e impreso en forma de JSON. Asumiendo que el usuario seleccionó al empleado Juan Pérez, la respuesta JSON sería:

{
    "nombres":"Juan Antonio",
    "apellidos":"Pérez Sánchez",
    "edad":"25",
    "preferencias":["0","3","4"]
}

HTML sencillo y un PHP simple, nos hacen deducir que es el jQuery el que hace todo el trabajo, así que nuevamente recurrimos a ver el código primero y luego a explicarlo:

$(document).ready(function(){
  $('.empleados').click(function(){
    $('.pref').each(function(){
      $(this).removeAttr('checked');
    });
    var empleado = (this.id).split('_').pop();
    $.post('database.php', { emp: empleado}, function(datos){
      $('#nombres').val(datos.nombres);
      $('#apellidos').val(datos.apellidos);
      $('#edad').val(datos.edad);
      $(datos.preferencias).each(function(){
        $('#pref_'+this).attr('checked', 'checked');
      });
    },'json');
    return false;
  });
});

Como ya es costumbre, explicaremos línea por línea cómo funciona este script:

1. El código solo podrá entrar en acción cuando el documentu haya sido cargado por completo.
2. Luego, establecemos que el script solo se activará al hacer clic sobre cualquier elemento con la clase empleados (en nuestro caso, cualquiera de los tres enlaces).
3. Antes de hacer el AJAX, es necesario “limpiar” cada checkbox. Por ello utilizamos el ciclo .each() que básicamente ejecuta una o más instrucciones por cada objeto existente. En este caso, adjuntamos el ciclo a los objetos con clase pref, es decir, nuestros checkbox.
4. Entonces, a cada uno de los checkbox, le removemos el atributo checked (lo tengan o no), y de esa manera ninguno queda marcado.
5. Fin del ciclo .each() abierto en la línea 3.
6. ¿Cómo sabemos cual es el empleado seleccionado? Pues tomamos el atributo id del enlace que estamos trabajando. Recordemos que estamos bajo el supuesto que el usuario hizo clic sobre el nombre de Juan pérez y por lo tanto el valor de dicho atributo sera “empleado_2″.  Ese valor lo separamos en partes mediante split(), utilizando como criterio de separación, el guión mayor (_) y con pop(), tomamos la última de esas partes, que es el número 2. Este valor queda almacenado en la variable empleado.
7. Iniciamos con el AJAX al igual que el ejemplo anterior, enviando al documento database.php, el valor de la variable empleado bajo el nombre emp y recibiendo la respuesta en la variable datos del callback.
8. Al input con id=”nombres”, le cambiamos el atributo value con .val(). Ahora bien, el valor que asignamos es un miembro del objeto JS que fue devuelto via JSON y almacenado en la variable datos. Por lo tanto si queremos acceder a uno de sus miembros, se hace por medio de un punto después de la variable, seguido del identificador de ese miembro: datos.nombres según nuestro ejemplo.
9. Repetimos el procedimiento con el input que tiene id=”apellidos”.
10. Y lo mismo para el input con id=”edad”.
11. El último miembro del objeto, es un arreglo con tres valores (0, 3 y 4 para Juan Pérez). Para recorrerlo, usamos nuevamente el ciclo .each() y así, accedemos a cada uno de sus valores de forma individual.
12. Ahora, utilizando cada uno de esos valores podemos construir las cadenas ‘#pref_0′, ‘#pref_3′ y ‘#pref_4′, para agregar el atributo checked=”checked” a los checkbox correspondientes.
13. Fin del ciclo .each() abierto en la línea 11.
14. Cerramos, el $.post(), no sin antes especificar el tipo de respuesta que esteramos recibir vía AJAX. Si no especificamos este parámetro, el tipo predeterminado sera tipo texto (que puede incluir html), pero también podemos indicar que la respuesta será ‘json’ o ‘xml’.
15. Aún nos encontramos dentro de las acciones a realizar al hacer clic sobre un enlace, y de manera predeterminada al activar un vínculo, el navegador intentará dirigirse a la dirección descrita en el atributo href=”". Como en AJAX no necesitamos ninguna redirección,  evitamos esto con la instrucción return false; que le indica al navegador que debe hacer caso omiso de la activación del enlace.
16. Cerramos las acciones a realizar al hacer clic sobre el vínculo.
17. Finalizamos el script.

Una vez terminado, podemos observar que el manejo del JSON por parte de el jQuery no es nada complicado. Lo que se necesita es comprender como funcionan los objetos en JavaScript.

Descargar el ejemplo

Entradas relacionadas

• 18/09/2009 -- Combos encadenados usando AJAX (jQuery) (14)
• 03/09/2009 -- Primer AJAX con jQuery (11)
• 07/02/2010 -- Función para JSON en PHP 5.1 o inferior (6)
• 27/08/2009 -- Introducción a jQuery (12)
• 21/08/2009 -- Galería simple con CSS y jQuery (2)