unijimpe

JSON (JavaScript Object Notation) es un formato basado en Javascript para intercambio de datos. JSON es una alternativa a XML pues brinda sencillez al momento de leer los datos, en Javascript puede ser analizado utilizando eval(), además provee sencillez para manipular los datos. Para mas información acerca de las diferencias con XML además de sus virtudes en: JSON.

Obteniendo los datos
Para nuestro ejemplo vamos a utilizar Google AJAX Search API, el cual es un servicio que nos utilizar los resultados de búsqueda de Google. No utilizaremos la funciones que provee Google si no que lo haremos utilizando JSON, para ello encontramos documentación en Flash and other Non-Javascript Environments.

Si deseamos obtener los resultado de la búsqueda de la palabra Google, lo podemos hacer accediendo al siguiente URL:

http://ajax.googleapis.com/ajax/services/search/web?v=1.0&q=Google

Este URL devolverá un objeto conteniendo los resultados de la búsqueda en un array ademas de estadísticas de resultados:

{ "results": [
  {
   "GsearchResultClass": "GwebSearch",
   "unescapedUrl": "http://en.wikipedia.org/wiki/Paris_Hilton",
   "url": "http://en.wikipedia.org/wiki/Paris_Hilton",
   "visibleUrl": "en.wikipedia.org",
   "cacheUrl": "http://www.google.com/search?...",
   "title": "\u003cb\u003eParis Hilton\u003c/b\u003e",
   "titleNoFormatting": "Paris Hilton",
   "content": "In 2006, she released her debut..."
  },
  {
   "GsearchResultClass": "GwebSearch",
   "unescapedUrl": "http://www.imdb.com/name/nm0385296/",
   "url": "http://www.imdb.com/name/nm0385296/",
   "visibleUrl": "www.imdb.com",
   "cacheUrl": "http://www.google.com/search?...",
   "title": "\u003cb\u003eParis Hilton\u003c/b\u003e",
   "titleNoFormatting": "Paris Hilton",
   "content": "Self: Zoolander. Socialite..."
  },
  ...
 ],
 "cursor": {
  "pages": [
   { "start": "0", "label": 1 },
   { "start": "4", "label": 2 },
   { "start": "8", "label": 3 },
   { "start": "12","label": 4 }
  ],
  "estimatedResultCount": "59600000",
  "currentPageIndex": 0,
  "moreResultsUrl": "http://www.google.com/search?..."
 }
}, 200, null)

Creando un Proxy
Normalmente cuando se accede a datos JSON se hacen sobre el mismo dominio, pero como nosotros deseamos acceder a los datos de Google necesitamos crear un proxy para cambiar de dominio los datos recibidos. Esto por que nos browsers no permites acceder a datos de otros dominios. Entonces creamos el archivo proxy.php.

$apiQue = "Google"; // variable a consultar
$apiKey = "tu_key_google"; // key para acceder al servicio
$apiUrl = "http://ajax.googleapis.com/ajax/services/search/web";
if (isset($_GET['query'])){
   $apiQue = urlencode($_GET['query']);
}
readfile($apiUrl."?v=1.0&key=".$apiKey."&q=".$apiQue);

Cargando los datos con Mootools
La nueva versión de Mootools trae el método Request.JSON que permite cargar y parsear automáticamente datos JSON, para nuestro caso cargaremos los datos del proxy recién creado y lo mostraremos utilizando la función alert. Primero incluimos la librería Mootools en el header de nuestro html y luego obtenemos los datos JSON.

<script type="text/javascript" src="mootools.js"></script>

window.addEvent('domready', function() {
	var path = "proxy.php?query=unijimpe";
	var json = new Request.JSON({url: path, onComplete: onLoad});
	json.get();
	function onLoad(obj){
		var results = obj.responseData.results;
		for (i=0; i " + tmp.title + "\n" + tmp.url)
		}
	}
});

Pueden ver el resultado en: /json/index.html.

Como pueden observar, la función onLoad se ejecuta cuando se ha completado la carga de los datos, dentro de esta función podemos acceder a los datos recién cargados como si fueran objetos es decir podemos acceder a todas sus propiedades utilizando el operador punto (.).

Entonces si deseamos mostrar la cantidad total de resultados podríamos hacer mediante obj.estimatedResultCount, entonces para acceder a los resultados de la búsqueda accedemos a obj.responseData.results el cual contiene un array con los resultados de la búsqueda por lo cual utilizamos un FOR para acceder a cada elemento.

Ahora si deseamos mostrar estos resultados como HTML y no como alerts, lo primero es crear un div en donde escribiremos los resultados y modificar brevemente nuestro script.

window.addEvent('domready', function() {
	var path = "proxy.php?query=unijimpe";
	var json = new Request.JSON({url: path, onComplete: onLoad});
	json.get();
	function onLoad(obj){
		var tmpHTML = "";
		var results = obj.responseData.results;
		for (i=0; i"+tmp.title+"";
			tmpHTML+= "
"+tmp.content+"
";
			tmpHTML+= ""+tmp.url+"

";
		}
		$("results").set("html", tmpHTML);
	}
});

<div id="results">Loading...</div>

Pueden ver el resultado en: /json/json.html.

Finalmente, agregamos un campo te texto y un botón para crear un formulario de búsqueda para mostrar la potencia de JSON. Esto lo hacemos con el siguiente código.

window.addEvent('domready', function() {
	var path = "proxy.php?query=unijimpe";
	var json = new Request.JSON({url: path, onComplete: onLoad});
	json.get();
	function onLoad(obj){
		var tmpHTML = "";
		var results = obj.responseData.results;
		for (i=0; i"+tmp.title+"";
			tmpHTML+= "
"+tmp.content+"
";
			tmpHTML+= ""+tmp.url+"

";
		}
		$("results").set("html", tmpHTML);
	}

	function sendSearch() {
		$("results").set("html", "Loading...");
		path = "proxy.php?query=" + $("q").value;
		json = new Request.JSON({url:path, onComplete: onLoad});
		json.get();
	}
	
	$("bt").addEvent("click", sendSearch);
});

<div id="search">
Buscador JSON 
<input type="text" id="q" name="q" /> 
<input type="submit" id="bt" name="bt" value="Buscar" />
</div>
<div id="results">&nbsp;</div>

Pueden ver el resultado en: /json/search.html.

Como pueden ver utilizando Mootools para manejar JSON es muy fácil el implementar aplicaciones con acceso remoto a datos o también llamado AJAX solo que no estamos utilizando XML y además tenemos la posibilidad de formatear a nuestro antojo los resultados obtenidos.

Mas Información

• JSON en Wikipedia
• Mootools – Class: Request
• Mootools – Class: Request.JSON

Posts Relacionados

• Crear JSON con PHP
• Online JSON Parser
• JSON con Flash
• Ranking Delicious con PHP
• JSON con PHP