En este post te voy a explicar qué es JSONP, para qué usarlo, cuál es la diferencia entre JSONP y JSON, algunos ejemplos y por qué fue creado.

Recuerda que JSONP está ligado a JavaScript del lado del cliente, y que la programación del lado del servidor puede ser con cualquier lenguaje, pero del lado del servidor se maneja de igual manera; justo como las peticiones AJAX.

Definición de JSONP

JSONP quiere decir JSON with padding y permite el uso de callbacks para el intercambio de datos.

¿Por qué fue inventado JSONP?

Para entender esto hay que irnos a otras cosas básicas, comenzando con las peticiones AJAX. No se puede hacer una petición AJAX a otro dominio que no sea el mismo de origen.

Es decir, desde parzibyte.me no se puede hacer una petición AJAX a google.com, ya que parzibyte.me solo puede hacer peticiones a parzibyte.me; y lo mismo para otras páginas.

Así que, si queremos intercambiar datos aunque sean de otro dominio, ¿Cómo lo hacemos? muy fácil, solicitando un script de JavaScript.

Por ejemplo, desde mi página parzibyte.me no puedo hacer peticiones AJAX a googleapis.com pero sí puedo solicitar un script de JavaScript para una librería:

https://ajax.googleapis.com/ajax/libs/d3js/5.9.0/d3.min.js

Obviamente esa librería de ejemplo me va a traer datos que yo no entiendo ni necesito, pero JSONP usa ese método para regresar datos y llamar a un callback.

Es decir, al final es simplemente solicitar un script de JS y trabajar del lado del servidor para hacer que el lenguaje escriba código de JavaScript llamando a la función del lado del cliente y pasándole datos.

Entonces, con este principio, se puede saltar la restricción de que no se pueden hacer peticiones a otros dominios, pues aunque las peticiones AJAX están denegadas a otros dominios, la carga de scripts no.

Diferencia entre JSON y JSONP

JSON es una forma de intercambiar datos, serializando y haciendo el proceso inverso. JSON solo es un formato de codificación de datos, y no hace nada por sí solo, se necesita usar AJAX u otra petición para traer y enviar datos.

En cambio, JSONP define una manera de intercambiar datos sin usar AJAX; usando JSON para codificar y decodificar, pero el verdadero intercambio de datos se hace al solicitar el script en el servidor.

Ejemplo de JSONP

Veamos un ejemplo, porque con palabras no se entiende mucho. Primero defino el callback en mi cliente; recuerda que a esta función se le van a pasar los datos desde el servidor.

const mi_funcion = datos =>{
  // Esta función será invocada cuando la petición
  // de JSONP termine
  console.log(datos);
};

Ahora hacemos la petición de JSONP al servidor. Para hacer la petición cargamos un script de manera dinámica así:

script = document.createElement("script");
script.type = "text/javascript";
script.src = "https://parzibyte.me/jsonp_api.js?callback=mi_funcion";

Estamos cargando un simple script llamado jsonp_api.js, y le estamos pasando el nombre de una función. Ahora, en el lado del servidor se debe escribir código JavaScript; es decir, se debe generar un código JavaScript.

Al final se debe regresar o escribir algo así:

mi_funcion({nombre: "Luis"});

Cuando el script sea incluido dentro de mi página web, todo el script se va a evaluar. Y, ¿a qué evalúa el código? a una simple llamada a la función global mi_funcion. Ahora se puede trabajar con esos datos.

Nota: recomiendo codificar con JSON y decodificar en la función usando JSON.parse del lado del cliente (del lado del servidor esto varía)

Lenguajes de programación para JSONP

Cualquier lenguaje que maneje HTTP puede usar JSONP, pues al final simplemente tiene que ser capaz de escribir código de JavaScript y pasarle datos codificados como JSON.

Alternativa a JSONP

JSONP no es una cosa muy aceptada, para pasar los límites de los dominios es mejor usar CORS, pero si el servidor al que consumimos no lo permite, podemos usar JSONP.

Si realmente no puedes usar AJAX, recurre al viejo método de usar formularios o trabajar del lado del servidor para hacer peticiones.

Muy pronto traeré un ejemplo con PHP o tal vez con Node.

Actualización: ya existe un ejemplo con PHP.