JSON es el acrónimo de JavaScript Object Notation.JSON es un formato alternativo de envío y recepción de datos, es decir remplaza a XML o el envío de texto plano.Este formato de datos es más liviano que XML.Veremos que hace el código más sencillo ya que utiliza el código JavaScript como modelo de datos.
Repaso de arrays literales y objetos literales en Javascript
Tenemos que repasar un poco como se definen los array literales y objetos literales en JavaScript, ya que serán las estructuras para la transmisión de datos:
var usuario=['juan',26];
Como vemos los elementos de un array literal se encierran entre corchetes y los valores contenidos van separados por coma.Cuando definimos un array literal no le indicamos a cada elemento de que tipo se trata, podemos almacenar cadenas (entre comillas), números, valores lógicos (true,false) y el valor null.Paraacceder a los elementos de un array literal lo hacemos por su nombre y entre corchetes indicamos que elementos queremos acceder:
alert(usuario[0]); //Imprimimos el primer elemento del array alert(usuario[1]); //Imprimimos el segundo elemento del array
Veamos como definimos los objetos literales en javascript:
var persona={
'nombre':'juan',
'clave':'xyz',
'edad':26
};
Los objetos literales se definen por medio de pares “nombre”:”valor”.Todo objeto literal tiene un nombre, en el ejemplo le llamé persona. Un objeto literal contiene una serie de propiedades con sus respectivos valores. Todas las propiedades del objetos se encuentran encerradas entre llaves. Luego cada propiedad y valor se las separa por dos puntos. Y por último cada propiedad se las separa de las otras propiedades por medio de la coma.Para acceder a las propiedades del objeto literal lo podemos hacer de dos formas:
alert(persona.nombre); //Imprime el valor de la propiedad nombre del objeto persona.
La segunda forma es indicando la propiedad entre corchetes:
alert(persona['nombre']);
Luego se pueden combinar objetos literales y array literales:
var persona={
'nombre':'juan',
'edad':22,
'estudios':['primario','secundario']
};
Como podemos ver podemos crear estructuras de datos complejas combinando objetos literales y array literales.Luego para acceder a los distintos elementos tenemos:
alert(persona.nombre); alert(persona.estudios[0]); alert(persona.estudios[1]);
Sintaxis JSON
La sintaxis de JSON difiere levemente de lo visto anteriormente:
{
'nombre':'juan',
'edad':22,
'estudios':['primario','secundario']
}
Como podemos ver en la sintaxis JSON no aparecen variables, sino directamente indicamos entre llaves las propiedades y sus valores.Tambien hemos eliminado el punto y coma luego de la llave final. El resto es igual.
Diferencia entre JSON y XML
Ahora veamos la diferencia entre JSON y XML utilizando este ejemplo:
XML:
<persona> <nombre>juan</nombre> <edad>22</edad> <estudios> <estudio>primario</estudio> <estudio>secundario</estudio> </estudios> </persona>
Y como vimos en JSON:
{
“nombre”:”juan”,
“edad”:22,
“estudios”:[“primario”,”secundario”]
}
Podemos ver que es mucho más directa la definición de esta estructura (de todos modos cuando la estructura a representar es muy compleja XML sigue siendo la opción principal).Como podemos ver si tenemos que transmitir estas estructuras por internet la notación JSON es más liviana.
Leer datos JSON en Javascript
Otra ventaja es como recuperamos los datos en el navegador, como vimos si se trata de un archivo XML llamamos al método requestXML y luego accedemos por medio del DOM.En cambio con JSON al llegar el archivo procedemos a generar una variable en JavaScript que recree el objeto literal, esto mediante la función eval:
var persona=eval('(' + conexion1.responseText + ')');
Ya veremos en el próximo concepto como recuperar los datos del servidor mediante el objeto XMLHttpRequest.
Ejemplo
Para probar y generar un objeto a partir de una notación JSON haremos el siguiente problema: Confeccionar una página que contenga un botón. Al ser presionado evaluar un string que almacena un objeto literal con notación JSON. El objeto literal debe representar las características de una computadora (procesador, memoria ram, capacidad de cada disco duro)
Mostrar los datos mediante el método alert.Hay que tener bien en cuenta que en este problema no hay nada de AJAX ya que no nos comunicaremos con el servidor para el envío de datos.
pagina1.html
<html> <head> <title>Problema</title> <script src="funciones.js" language="JavaScript"></script> </head> <body> <h1>Evaluar una variable que contiene notación JSON.</h1> <input type="button" id="boton1" value="Ver"> </body> </html>
funciones.js
addEvent(window,'load',inicializarEventos,false);
function inicializarEventos()
{
var ob=document.getElementById('boton1');
addEvent(ob,'click',presionBoton,false);
}
function presionBoton(e)
{
var cadena="{ 'microprocesador':'pentium'," +
" 'memoria':1024," +
" 'discos':[80,250]" +
" }";
var maquina=eval('(' + cadena + ')');
alert('microprocesador:'+maquina.microprocesador);
alert('Memoria ram:'+maquina.memoria);
alert('Capacidad disco 1:'+maquina.discos[0]);
alert('Capacidad disco 2:'+maquina.discos[1]);
}
//***************************************
//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;
}
Cuando se presiona el botón se ejecuta la función presionBoton. En esta lo primero que hacemos definimos un string que contiene un objeto con notación JSON:
var cadena="{ 'microprocesador':'pentium'," +
" 'memoria':1024," +
" 'discos':[80,250]" +
" }";
Seguidamente pasamos a evaluar este string:
var maquina=eval('(' + cadena + ')');
Ahora si tenemos un objeto JavaScript. Esto se logra utilizando la función eval de JavaScript. Es importante que siempre al string que contiene la notación JSON le debemos anteceder el paréntesis de apertura y finalizarlo con el paréntesis de cerrado (esto para que JavaScript no tenga problemas con las llaves de apertura y cierre de la notación JSON.Una vez que tenemos el objeto en JavaScript procedemos a acceder a sus atributos:
alert('microprocesador:'+maquina.microprocesador);
alert('Memoria ram:'+maquina.memoria);
alert('Capacidad disco 1:'+maquina.discos[0]);
alert('Capacidad disco 2:'+maquina.discos[1]);
Llaves, corchetes, dos puntos y comas
Las llaves actuan de ‘contenedores’.Los corchetes almacenan arrays ,es decir delimitan arrays.Names y values son separados por dos puntos.Los elementos de un array son separados por comas
Piensa en JSON como un ‘XML con Anorexia’
O también se pueden ver como ‘ficheros INI con jerarquia’.
JSON es similar a XML por lo siguiente:
- Ambos tienen significado ‘autodescriptivo’, es decir los valores están nombrados, y eso lo hace muy legible
- Ambos tienen una estructura jerárquica (es decir puedes tener valores dentro de valores)
- Ambos pueden ser parseados y utilizados en la mayoría de los lenguajes de programación
- Ambos pueden ser pasados por AJAX (es decir HttpWebRequest)
JSON es distinto de XML por lo siguiente:
- XML utiliza ‘<‘ y ‘>’ ,con un nombre de tag al comienzo y al final del elemento. JSON utiliza llaves con el nombre sólo al principio del elemento.
- JSON es mas simple, luego es más rápido de escribir a los humanos, y también más fácil de leer.
- JSON puede ser parseado trivialmente utilizando el procedimiento ‘eval()’ de Javascript
- JSON puede incluir arrays (donde los elementos no tienen que tener unname cada uno)
- En XML puedes utilizar cualquier nombre que quieras para un elemento, en JSON no pueden utilizar palabras reservadas de Javascript.
Por qué es bueno utilizar JSON?
Cuando estamos escribiendo código JSON, si utilizamos JSON eliminamos el tener que escribir a mano XML, lo cual es más rápido. JSON parece más fácil de utilizar:
| Aproximación XML | Aproximación JSON |
| Recupera un documento XML
Navega por el documento, recuperando valores que necesites Haz algo con estos valores |
Recupera una cadena JSON
‘eval’ el JSON
|
Es JSON orientado a objetos?
No estrictamente. JSON proporciona una buena técnica de encapsulamiento, que puedes utilizar para separar valores y funciones, pero no hay nada de herencia, polimorfismo, interfaces, etc.
Se utiliza solo JSON en el lado del cliente?
Si y no. En el lado de servidor se puede serializar / deserializar objetos a/desde JSON. Los programadores .net pueden utilizar librerias como Json.net que hace esto automáticamente.
(Other side note: Jason and Ajax were both mythical greek heroes. Prediction: other forthcoming technology jargon will include: Heracles, Perseus, Deucalion, Theseus and Bellerophon.)