¿Qué es JSONP?
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 ha vuelto muy popular porque es ligera y compatible en la mayoría de sistemas. En este artículo explicamos todas las características de JSONP, que se utiliza en programas realizados con JavaScript y permite realizar llamadas asíncronas a distintos dominios.
Su metodología está creada para suplir la limitación de AJAX entre tus dominios, en la que solo 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 solo 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 puede acceder a datos que se encuentran en servidores externos, ¿por qué solo 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, ya que 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='https://example.com/otro/dominio'></script>
JSONP se aprovecha de ello porque esto no provoca ningún obstáculo de seguridad y de esta forma, se puede 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. Lo único que tendremos que advertir es 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 a continuación un ejemplo de código, para observar que esto resulta más sencillo de lo que pensamos.
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: 'https://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.
Desarrollador web, crea y mantiene los sitios web de Arsys. También idea herramientas internas que facilitan y mejoran los procesos. Es experto en desarrollo FrontEnd y en la optimización del rendimiento web, áreas en las que constantemente busca innovar para ofrecer la mejor experiencia online.