Solicitar un fichero JSON al mismo dominio/servidor.
En el caso más sencillo, la página activa en el navegador del cliente solicita al mismo servidor un contenido en formato JSON mediante una solicitud Ajax. La forma más simple de implementar este caso es utilizando la la librería JQuery.
Creamos un fichero json de prueba “datos.json” con el siguiente contenido:
{"dato": "Esto es un dato simple","primos": [ 1, 2, 3, 5, 7, 11, 13 ]} |
ponemos el fichero en la raíz del servidor, para que sea accesible mediante la url “/datos.json”. A continuación, lo leemos con una función “lee_json()” que hace uso del método getJSON de la librería JQuery:
<html><head> <title>Prueba de lectura de datos en formato JSON</title> <script type="text/javascript" src="/control/jquery-1.7.2.min.js"></script> <script type="text/javascript"> function lee_json() { $.getJSON("/datos.json", function(datos) { alert("Dato: " + datos["dato"]); $.each(datos["primos"], function(idx,primo) { alert("Numero primo: " + primo); }); }); } </script></head><body onload="lee_json();"></body></html> |
Como vemos, en el ejemplo también estamos haciendo uso del método “each” para recorrer el array presente en el fichero leido.
Solicitar un fichero JSON a otro dominio
El ejemplo que hemos presentado no funcionaría en navegadores Firefox y Chrome si la url utilizada para recuperar el fichero JSON pertenece a un dominio distinto al de la página que contiene el código javascript que realiza la solicitud.
Por razones de seguridad, en las implementaciones de Javascript que utilizan estos navegadores, no se permiten las solicitudes del ficheros json inter-dominios.
Sin embargo, si están permitidas las solicitudes de ficheros javascript interdominios. Utilizando esta posibilidad, se puede utilizar el mecanismo conocido como JSON-P (JSON with Padding), para entregar contenido JSON como si fuera javascript.
Para ello, sustituimos la llamada a getJSON por una llamada al método “ajax” de jQuery:
$.ajax({ dataType: 'jsonp', success: function(datos) { for (var clave in datos) { if (datos.hasOwnProperty(clave)) { alert(clave + " -> " + datos[clave]); } } }, error: function() { alert("Error leyendo fichero jsonP"); }}); |
como vemos, en lugar de solicitar el fichero estático “datos.json”, se realiza la solicitud a un script “datos.php”. El código de éste script es:
<?php echo $_GET["callback"] ?> ({ "dato": "Esto es un dato simple", "primos": [ 1, 2, 3, 5, 7, 11, 13 ]}); |
Explicación:
Al expecificar “dataType: ‘jsonp’ , el método ajax añade un argumento “callback” a la url, con un valor generado dinámicamente. Así, la solicitud que le llega al servidor es de la forma:
http://OTRO-DOMINIO.com/datos.php?callback=jQuery17200075442985920404215_1352635617448 |
El valor del argumento “callback” es utilizado por el script “datos.php” como el nombre de la función javascript que va a envolver los datos JSON solicitados. De esta manera, el resultado que entrega al cliente es un código javascript de la forma:
jQuery17200075442985920404215_1352635617448 ({ "dato": "Esto es un dato simple", "primos": [ 1, 2, 3, 5, 7, 11, 13 ]}); |
jQuery se encarga de interpretar este resultado y generar la estructura de datos javascript que entrega como resultado final.
El comportamiento de la llamada ajax que realiza jQuery se puede alterar con párametros adicionales “jsonp” y “jsonpCallback”. El efecto de estos parámetros se puede consultar en la documentación de referencia del método ajax de jQuery:
Fuente: http://blog.openalfa.com/como-leer-ficheros-json-en-javascript
No hay comentarios:
Publicar un comentario