El llamado JSONP o más concretamente Json con Padding es una ténica descubierta en 2005 para conseguir algo parecido al famoso y deseado AJAX crossDomain. Mientras que por motivos de seguridad es bástante lógico que Ajax no funcione en dominios distintos al que lanza la web la verdad es que para ciertos desarrollos el no poder usar servicios web vía ajax cómodamente es como mínimo frustrante.

Para solucionar esa parte (la de los servicios web, y no cualquier carga por Ajax) se ideó una técnica a la que se llamó JSON con Padding. Se trata de generar un archivo JSON dinámicamente dejando abierto en el script que lo crea una variable que podemos definir nosotros mismos. Esa variable, tal cual es escrita en la llamada a la url será colocada antes del objeto Json. Así si yo al crear mi script Json decido que la variable «callback» será la que ayude a lanzar JsonP distintos dominios podrían lanzar urls del tipo:

http://blog.ikhuerta.com/JsonP?callback=[XXX]

Mi script, si no recibe esa variable debería devolver un objeto jSon normal y corriente. Por ejemplo:

// llamada: http://blog.ikhuerta.com/JsonP
({
   "propiedad1" : "valor1",
   "propiedad2" : "valor2"
})

En cambio si utilizo la variable «callback» debe devolverse el JSON como llamada a una función, o lo que es lo mismo… poner el nombre de la variable antes de la definición json 😉

// llamada: http://blog.ikhuerta.com/JsonP?callback=funcionPuente
funcionPuente({
   "propiedad1" : "valor1",
   "propiedad2" : "valor2"
})

¿Que nos permite esto? Básicamente nos da la posibilidad de no hacer una llamada Ajax real sino incluir el archivo como script. El acceso a los datos podremos hacerlo, puesto que hemos puesto un nombre que nosotros mismos controlamos a la llamada y le enviamos los datos del Json. Seguidamente un ejemplo de como usaríamos un JsonP en nuestra web:

1) Definirmos la funcion que llamaremos con el json:

var funcionCallback = function( json ) {
   alert(json.propiedad1);
   alert(json.propiedad2);
}

2) Incluimos el script:

window.document.write('");

3) Cuando el script termine de cargarse se lanzaran dos alerts: «valor1» y «valor2»

Sencillo, no?

Seguidamente algunos servicios preparados para ser usados de esta forma (o similares)

del.icio.us posts : http://del.icio.us/feeds/json/${username}/${tag}
del.icio.us tags : http://del.icio.us/feeds/json/tags/${user}
del.icio.us url : http://badges.del.icio.us/feeds/json/url/data
del.icio.us network : http://del.icio.us/feeds/json/network/${user}
del.icio.us fans : http://del.icio.us/feeds/json/fans/${user}
Blogger blog posts : http://www.blogger.com/feeds/${blogID}/posts/${type}?alt=json-in-script
Blogger blog comments : http://www.blogger.com/feeds/${blogID}/comments/${type}?alt=json-in-script
Blogger post comments : http://www.blogger.com/feeds/${blogID}/${postID}/comments/${type}?alt=json-in-script
Flickr API : http://api.flickr.com/services/rest/?format=json
Flickr public photos : http://www.flickr.com/services/feeds/photos_public.gne?format=json
Flickr friends’ photos : http://api.flickr.com/services/feeds/photos_friends.gne?format=json
Flickr group discussions : http://api.flickr.com/services/feeds/groups_discuss.gne?format=json
Flickr group pool : http://api.flickr.com/services/feeds/groups_pool.gne?format=json
Flickr forum discussion : http://api.flickr.com/services/feeds/forums.gne?format=json
Flickr recent activity : http://api.flickr.com/services/feeds/activity.gne?format=json
Flickr recent comments : http://api.flickr.com/services/feeds/photos_comments.gne?format=json
Flickr news : http://api.flickr.com/services/feeds/news.gne?format=json
Panoramio photos : http://www.panoramio.com/map/get_panoramas.php