Usando Json para aplicaciones ricas en Ajax (parte 1)

Cada vez es mas común las páginas web ricas en Ajax, donde gran parte de las funcionalidades de la página se desarrollan sin tener que realizar refresh completos de la misma, en su lugar se utiliza Javascript para comunicarnos con el servidor vía Ajax, por ejemplo tenemos gmail o google docs.


Tradicionalmente la comunicación entre el servidor y el cliente se ha manejado de dos maneras: el servidor envía el html completo que se quiere dibujar en el browser, o el servidor envía datos en formato XML que luego es interpretado por el cliente utilizando javascript, generando el HTML a dibujar.


Sin embargo en años reciente se ha desarrollado un estándar para intercambio de datos: Json. Este estándar se caracteriza por ser liviano, fácil de leer y requiere pocos caracteres para representar datos, comparado con XML.


Esto se traslada en una gran ventaja para su uso en aplicaciones con ajax, ya que  reduce en gran medida la cantidad de datos que se envían entre el servidor y el cliente, lo cual siempre es algo deseado en el envió de datos en la internet. 


A esto se le suma que los motores de javascript actuales poseen soporte nativo para leer datos Json, a diferencia de tener que parsear un XML, lo que es un trabajo mucho mas tedioso y lento, que ademas puede requerir datos adicionales como archivo XSD que aumenta aun mas la carga de datos.


Un objeto Json es una colección nombre/valor, que puede almacenar 5 tipos de datos: string, número, objeto (json), array, booleano. 


Los objetos Json se declaran inicialmente con una llave abriendo '{' y se finalizan con una llave cerrando '}'. Dentro de estás llaves declaramos los pares nombre/valor, colocando primero el nombre seguido de dos puntos ':' seguido de su valor. Cada par nombre/valor es separado por una coma ','.


Por ejemplo, supongamos que queremos definir un objecto de una persona en javascript, con una lista de números telefónicos, y datos de su habitación:

var persona = { nombre: 'pedro', apellido: ' perez', numerosTelefonicos: [3712424, 4569874], habitacion: { ciudad: 'caracas', estado: 'Miranda'} }

La navegación en Javascript es igual de sencilla, simplemente referenciamos lo que deseamos obtener:

var nombre = persona.nombre;
var segundoNumero = persona.numerosTelefonicos[1];
var ciudadHabitacion = persona.habitacion.ciudad;
Para mas información acerca de esté estadar puedes visitar su página oficial http://www.json.org/ o el articulo en wikipedia http://en.wikipedia.org/wiki/JSON

En cuanto al servidor, retornar esté tipo de objetos es bastante sencillo, simplemente colocamos en la respuesta la cadena con el objeto JSon, como por ejemplo:
 { nombre: 'pedro', apellido: ' perez', numerosTelefonicos: [3712424, 4569874], habitacion: { ciudad: 'caracas', estado: 'Miranda'} }
y el mime type application/json

En caso de que uses asp mvc framework puedes utilizar la funcion Json, que retorna un ActionResult, con un objeto anonimo:

public ActionResult ejemplo()
{
     return Json(new { nombre = "Jose" });
}
Incluso puedes retornar un arreglo de objetos:

public ActionResult ejemplo()
{
  List<Persona> personas = new List<Persona>();
  personas.Add(new Persona { nombre = "David" });
  personas.Add(new Persona { nombre = "Andres" });
  return Json(personas);
}

Esto retornara lo siguiente al cliente:
[{nombre:'David'},{nombre:'Andres'}]
En la próxima parte de este articulo veremos como facilitar el manejo de estos datos y generar Html en el cliente con la ayuda del Plugin de JQuery para templates http://api.jquery.com/jquery.tmpl/