¿Qué es JSONP?


Share on FacebookTweet about this on TwitterShare on LinkedInEmail this to someoneShare on Google+

JSONP o JSON con padding es una API para el intercambio de datos que pueden estar alojados en nuestro servidor o en servidores remotos. Se está popularizando porque es ligera y es compatible en la mayoría de sistemas.  Se utiliza en programas realizados con Javascript, que permite realizar llamadas asíncronas a distintos dominios.

Programacion_s

Su metodología está creada para suplir la limitación de AJAX entre dominios, en la que sólo se pueden realizar, por razones de seguridad,  peticiones entre las páginas de un mismo dominio y puerto. Aunque esto se consigue activando la configuración Cross-origin resource sharing, también puede solucionarse, independientemente de la configuración del servidor, a través del uso de JSONP.

¿Cómo es?

JSON y JSONP son básicamente lo mismo y lo único que los difiere es  su envoltura. En JSONP en lugar de enviar sólo el dato, lo que se envía es una función normalmente llamada callback, que es como un Javascript, que engloba el dato que hemos solicitado. Por eso, el nombre de JSONP como JSON con padding.

¿Por qué con JSON no puedo accederlo y sí JSONP?

Seguramente, nos preguntemos que si debido a la restricción que poseen los navegadores no se pueden acceder a datos que se encuentran en servidores externos, ¿por qué no puedo acceder a los datos JSONP y no a los JSON normales?

Para hacer esto posible con JSONP en situaciones cross-domain se usa una alternativa permitida de carga de scripts en una página, pues un navegador sí que admite la carga de código Javascript que traigas con la etiqueta SCRIPT y el atributo src de otro dominio.

<script src="http://example.com/otro/dominio"></script>

JSONP se aprovecha de ello porque esto no provoca ningún obstáculo de seguridad y así acceder al recurso solicitado, inyectando ese script en la página y ejecutando su código para recoger el dato.

Cómo procesamos un JSONP para extraer el dato

Para nuestro gozo y disfrute, nuestra librería favorita Javascript  deberá ser capaz de extraer ese dato de una manera semi-transparente. Tan sólo tendremos que advertir que vamos a recibir el dato en JSONP en lugar de JSON clásico. Naturalmente la forma en la que haremos esto, dependerá de la construcción de nuestra librería. Veremos un ejemplo de código para que veas lo sencillo que esto resulta.

JSONP en jQuery

Indicamos a jQuery que el dato de respuesta llega en JSONP y aplicamos la variable de configuración “dataType”, estableciendo el valor “jsonp”.

$.ajax({
 url: "http://api.openbeerdatabase.com/v1/beers.json",
                 data: {
                                query: "beer"
                 },
                 type: "GET",
                 dataType: "jsonp",
                 success: function(respuesta){
 console.log("Recibes: ", respuesta);
 $("<pre>").text(JSON.stringify(respuesta)).appendTo("body");
                 }
 });

Vemos que en la función success() el parámetro respuesta tiene un objeto Javascript natural, siendo el resultado de la cadena JSONP recibida y convertida en su correspondiente objeto.

Con el console.log() se aplica ese dato en la consola de Javascript. Con la etiqueta PRE creada al vuelo y el método JSON.stringify() consigo que se convierta ese objeto a un literal de cadena, con lo que puede volcarse como texto en la página y visualizarlo sin que la consola sea un requisito. Generalmente en el programa haremos con el objeto una cosa totalmente diferente, porque dependerá de tu aplicación y la función que tengan esos datos recibidos.

Lo importante, al fin y al cabo, es que el JQuery que acabamos de realizar se encarga de manera autónoma de transformarte el JSONP en un objeto manipulable mediante código Javascript.


Share on FacebookTweet about this on TwitterShare on LinkedInEmail this to someoneShare on Google+