JOURMOLY

Mootools trae una serie de herramientas que nos facilitan el uso de JSON, éstas herramientas son JSON.js y JSON.Remote.js, las cuales veremos a continuación. Si no sabes que es JSON, podés consultarlo en la 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 pero no requiere el uso de XML.

(…)

JSON se emplea habitualmente en entornos donde el tamaño del flujo de datos entre cliente y servidor es de vital importancia (de aquí su uso por Yahoo, Google, etc, que atienden a millones de usuarios) cuando la fuente de datos es explícitamente de fiar(…)

Json.js

Json.js nos facilita la tarea de pasar de un string Json a un Objeto Javascript y viceversa.

Json.toString(objeto)
Nos permite pasar un Objeto Javascript a un simple String.

1
2
3
4
5
6
7

var objeto =
{
	nombre: 'Mootools',
	descripcion: 'Framework'
}
var str = Json.toString(objeto);
//{"nombre":"Mootools","descripcion":"Framework"}

Json.evaluate(string, secure)
Nos permite pasar de un String Json a un Objeto Javascript.

1
2
3
4

var str = '{"nombre":"Mootools","descripcion":"Framework"}';
var objeto = Json.evaluate(str);
alert(objeto.nombre); //Mootools
alert(objeto.descripcion); //Framework

secure es un parámetro opcional que por default es false, pero si lo cambiamos a true, se chequeará la sintaxis del string Json. En caso de que el string sea incorrecto, Json.evaluate devolverá null.

1
2
3
4
5
6
7
8

var str = '{"nombre":"Mootools","descripcion":"Framework}';
//Faltan " para Framework
var objeto = Json.evaluate(str, true);
if(objeto != null)
	alert(objeto.nombre);
else
	alert('El string JSON es incorrecto.');
//El string JSON es incorrecto.

Json.Remote.js

Json.Remote nos permite enviar y recibir objetos JSON mediante AJAX de manera muy simple. Hereda de xhr.js por lo cual se pueden usar todos sus métodos, opciones y eventos.

Recibiendo un objeto

1
2
3
4
5
6
7
8
9

var miJSON = new Json.Remote("recibe.php",
{
	onComplete: function(objeto)
	{
		alert(objeto.nombre); //Mootools
		alert(objeto.descripcion); //Framework
	}
});
miJSON.send();

El código de recibe.php es:

1
2
3

< ?php
echo "{'nombre': 'Mootools', 'descripcion': 'Framework'}";
?>

Como se puede apreciar en el ejemplo, la manera de enviar la petición es muy similar a lo que ya veníamos viendo. Indicamos la url de nuestro script, en este caso recibe.php, y luego recibimos el objeto que nos devuelve recibe.php que es el que viene como parámetro en la función del evento onComplete.

Supongamos que tenemos una base de datos de productos y queremos, mediante PHP y AJAX, mostrar todos esos productos. Con Json.Remote enviaríamos la petición a PHP, éste buscaría todos los productos y los devolvería en formato JSON. Una vez que tenemos los datos en dicho formato, solo debemos mostrarlos con javascript.

Ahora, si no queremos mostrar todos los productos o si deseamos realizar una búsqueda debemos indicarle a PHP cual es el filtro que debe aplicar, y Json.Remote nos permite enviárselo.

1
2
3
4
5
6
7
8
9
10
11
12

var miJSON = new Json.Remote("recibe.php",
{
	onComplete: function(objeto)
	{
		alert(objeto.nombre); //Mootools2
		alert(objeto.descripcion); //Framework
	}
});
miJSON.send(
{
	nombre:"Mootools2"
});

Ahora con el método send estamos enviando un objeto, el cual puede ser un filtro o un parámetro de búsqueda.

El código de recibe.php es:

1
2
3
4
5
6
7

< ?php
$request = file_get_contents('php://input'); // json={nombre:"Mootools2"}
$data = str_replace('json=', '', $request);
 
$json = json_decode($data);
echo "{'nombre': '" . $json->nombre . "', 'descripcion': 'Framework'}";
?>

En este caso PHP recibe los parámetros de una manera muy distinta a como ya habíamos visto. Incluso, a la hora de hacer los ejemplos me perdí un buen rato con este asunto, pero luego googleando un poco pude hacerlo funcionar.

Como complemento a este artículo, preparé una serie de ejemplos sobre Json y Json.remote. Asimismo, próximamente habrá un segundo artículo sobre éste tema en el cual mostraré un ejemplo un poco mas práctico.

Popularity: 12% [?]

Otros artículos

• Mootools 1.2 ya está lista!
• attachSound y LoadMovie
• Efectos con Mootools: Fx.Styles
• Trabajando con AJAX, JSON y Mootools
• URL amigables genéricas