Hacer llamadas ajax a dominios distintos del host usando jsonP

Lo último en aplicación de tecnología web se llama jsonp, una técnica que viene hace mucho tiempo pero ha tenido mucho auge recien ahora debido a los nuevos webservices y aplicaciones orientadas a servicios que facilitan sus APIs para interactuar con los usuarios.
En este artículo pretendo explicar de que se trata jsonP y como se utiliza.

Cuando usamos ajax nos topamos con el limite de no poder hacer consultas ajax a sitios o dominios distintos del que proviene nuestra página esto es , si mi sitio es www.codigogratis.com.ar y quiero hacer una llamada ajax solamente lo podre hacer al mismo dominio www.codigogratis.com.ar, no hay lugar para poder hacerlo en otro dominio como example.com o twitter.com por ejemplo.

Bueno de la mano de jsonp un hack descubierto hace un tiempo se puede simular algo que permitirá hacer ese tipo de llamadas, la idea es muy simple.

Para esto mediante código javascript se crea dinámicamente un elemento o tag script del tipo javascript , y como source se ubica la url que queremos acceder, esto seria crear un tag <script> y cargarle la propiedad src dinamicamente. Estas etiquetas si tienen permitido acceder a dominios que no son propios de hecho lo hacemos cuando traemos librerias como jquery alojadas en google,( si no lo sabian google nos proporciona las últimas versiones de jquery prototype, mootools y demás, para usarlas directamente desde su sitio web, esto nos ahorra ancho de banda, y agiliza nuestro sitio)

Haciendo uso de esta posibilidad que tienen las etiquetas script creamos entonces una rutina que cree dinamicamente esta etiqueta y la coloque en el header con el source que queremos.

Esto ejecuta inmediatamente la url sobre el dominio que definimos sin siquiera pasar por nuestro server , la comunicación se logra cliente -> server externo.

Si el server externo esta preparado para recibir llamadas jsonp, cuando nos responde, nos responde con un json envuelto en una función de callback

El nombre de esa función de callback también lo definimos nosotros , ya que previamente en el src del tag script se la pasamos por parametros.

El resultado final es que el server devuelve una función la cual sabemos el nombre con un json como parametro de esa función.

Sabiendo esto nosotros debemos tener definida una función javascript con esas características esperando la respuesta. al coincidir nuestra función con la que devuelve esta se ejecuta permitiendonos parsear la respuesta que viene en el json pasado por parametros.

Es un poco complicado de explicar y entender pero si lo leen un par de veces y lo prueban veran lo fácil que es y lo genial que puede ser.

Les dejo un ejemplo con el código fuente javascript para que bajen y prueben las llamadas Jsonp

Ejemplo llamada jsonP

This entry was posted in JavaScript. Bookmark the permalink.

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos necesarios están marcados *

Puedes usar las siguientes etiquetas y atributos HTML: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>