Do not speak Spanish? Read this post in English.

Martes, 24 d febrero d 2009.

JSONP : JSON con Padding

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('<script src="http://blog.ikhuerta.com/JsonP?callback=funcionCallback"><!--mce:0--></script>");

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

Temas Relacionados: jquery

Autor:

3 Comentarios para “JSONP : JSON con Padding”

  1. Roberto I dice:

    Hola,

    Me parece muy buena tu explicacion, yo tengo un desarrollo en mi trabajo donde despues de capturar unos datos se guarda la informacion y al mismo tiempo se debe enviar un sms al cliente.

    Para el envio de sms tenemos que mandar los parametros por url pero a un dominio externo, despues necesito cachar el resultado que me arrija esa web para mostrar al operador si el sms fue enviado correctamento o no.

    Mi duda es, si ingreso, como muestras "window.document.write('");" pero con mis datos podria solucionar mi problema?

    • ikhuerta dice:

      Como siempre en estos casos tienes 2 soluciones.

      1) Realizar el proceso que indicas desde el servidor, haciendo que sea el servidor el que llama a esta url externa, recoja el resultado y luego genere la página web (esto te permitiría además almacenar en base de datos ese resultado y así tener información de cuantos sms se han enviado o fallado)

      2) Realizar la llamada con jsonp. En este caso se trataría de que el servidor que envía SMS devolviese un resultado jsonp y lo capturases. La respuesta que de este mensaje yo la puse de ejemplo con un document.write pero sería más útil que manipulases el DOM del documento:

      function callback(jsonp)
      {
      document.getElementById("respuestaSMS").innerHTML =jsonp.respuesta;
      }

      Mírate el framework jquery para javascript ya que incorpora de forma nativa jsonp y ayuda mucho a manipular el DOM

  2. Josue dice:

    Hola, Disculpen pero no muy entiendo como funciona esto, en el sentido de como se genera el js, por ejemplo:

    esta url: http://blog.ikhuerta.com/JsonP?callback=funcionCallback
    osea hay un archivo llamado Jsonp ???
    creo que ando perdido con esto

    agreadeceria cualquier ayuda gracias

Anímate y deja tu comentario