Lo que sigue es una serie de ejemplos sobre como utilizar JSON y AJAX de la mano de Mootools.

Podés ver la explicación completa sobre Remote.AJAX en mi blog,
donde también podrás encontrar mas información, ejemplos y tutoriales sobre Mootools en Castellano como asi también
sobre algunos otros temas.

Suscribite a mi blog para recibir articulos directamente en tu lector de Feeds favorito.

JSON.js

toString(objeto)

  1. $('uno').addEvent('click', function(ev)
  2. {
  3. 	new Event(ev).stop();
  4. 	var objeto = 
  5. 	{
  6. 		nombre: 'Mootools',
  7. 		descripcion: 'Framework'
  8. 	}
  9. 	//Pasamos nuestro objeto a un simple string
  10. 	var str = Json.toString(objeto);
  11. 	
  12. 	$('respuesta1').setHTML(str);
  13. });
Click para probar

evaluate(string, secure)

  1. $('dos').addEvent('click', function(ev)
  2. {
  3. 	new Event(ev).stop();
  4. 	var str = '{"nombre":"Mootools","descripcion":"Framework"}';
  5. 	//Pasamos nuestro string a un objeto
  6. 	var objeto = Json.evaluate(str);
  7. 	
  8. 	$('respuesta2').setHTML('Nombre: ' + objeto.nombre + '<br />Descripci&oacute;n: ' + objeto.descripcion);
  9. });
Click para probar
String incorrecto con secure false 
  1. $('tres').addEvent('click', function(ev)
  2. {
  3. 	new Event(ev).stop();
  4. 	var str = '{"nombre":"Mootools","descripcion":"Framework}';
  5. 	//Nuestro string en este caso es incorrecto, falta una " luego de Framework
  6. 	var objeto = Json.evaluate(str);
  7. 	//Como dejamos el parametro secure en false(predefinido), no se chequea la sintaxis
  8. 	//y al intentar convertir el string a objeto obtenemos un error.
  9. });
Click para probar
String incorrecto con secure true 
  1. $('cuatro').addEvent('click', function(ev)
  2. {
  3. 	new Event(ev).stop();
  4. 	var str = '{"nombre":"Mootools","descripcion":"Framework}';
  5. 	var objeto = Json.evaluate(str, true);
  6. 	//Si indicamos secure como true y el string es incorrecto, objeto vale null pero no habra error como en el ejemplo anterior
  7. 	if(objeto != null)
  8. 		$('respuesta4').setHTML('Nombre: ' + objeto.nombre + '<br />Descripci&oacute;n: ' + objeto.descripcion);
  9. 	else
  10. 		$('respuesta4').setHTML('El string JSON es incorrecto.');
  11. });
Click para probar

JSON.Remote.js

Combinar AJAX con JSON fácilmente 
  1. $('cinco').addEvent('click', function(ev)
  2. {
  3. 	new Event(ev).stop();
  4. 	//Enviamos una peticion a recibe.php
  5. 	var miJSON = new Json.Remote("recibe.php",
  6. 	{
  7. 		//la peticion nos devolvera un objeto el cual llegara como parametro en el evento onComplete
  8. 		onComplete: function(objeto)
  9. 		{
  10. 			$('respuesta5').setHTML('Nombre: ' + objeto.nombre + '<br />Descripci&oacute;n: ' + objeto.descripcion);
  11. 		}
  12. 	});
  13. 	miJSON.send();
  14. }); 
  1. <?php
  2. /* recibe.php */
  3. echo "{'nombre': 'Mootools', 'descripcion': 'Framework'}"; 
  4. ?>
Click para probar
Enviando parámetros junto con la petición 
  1. $('seis').addEvent('click', function(ev)
  2. {
  3. 	new Event(ev).stop();
  4. 	var miJSON = new Json.Remote("recibe2.php",
  5. 	{
  6. 		onComplete: function(objeto)
  7. 		{
  8. 			$('respuesta6').setHTML('Nombre: ' + objeto.nombre + '<br />Descripci&oacute;n: ' + objeto.descripcion);
  9. 		}
  10. 	});
  11. 	//junto con nuestra peticion tambien podemos enviar un objeto
  12. 	miJSON.send(
  13. 	{
  14. 		nombre:"Mootools2"
  15. 	});
  16. }); 
  1. <?php
  2. /* recibe2.php */
  3. $request = file_get_contents('php://input'); // json={nombre:"Mootools2"}
  4. $data = str_replace('json=', '', $request);
  5.  
  6. $json = json_decode($data);
  7. echo "{'nombre': '" . $json->nombre . "', 'descripcion': 'Framework'}";
  8. ?>
Click para probar