¡Hola! Me parece que andas usando un bloqueador de anuncios =( ¿Nos desbloqueas? ¿Por qué?
F13

Funcion 13

Cómo realizar peticiones AJAX cross-domain usando JSONP y jQuery

Si ya os habéis familiarizado con la idea de realizar peticiones AJAX en jQuery, hoy vamos a darle una vuelta de tuerca y vamos a ver cómo realizar peticiones contra otros dominios que no son el nuestro.

Por motivos de seguridad, las peticiones por defecto en jQuery al usar AJAX, no permiten que sea a otros dominios. No obstante, a veces resulta útil o incluso necesario, realizar peticiones entre dominios para hacer uso de APIs externas o usar nuestras propias APIs desde local o desde cualquier sitio.

Por suerte, AJAX permite hacer peticiones cross-domain para obtener contenido JavaScript. Para ello necesitamos hacer uso de JSONP que, a un nivel muy básico, lo que hace es que en vez de pasar JSON plano, lo pasamos dentro de una función de JavaScript.

Hacerlo es rápido y sencillo pero necesita ajustes tanto en la parte cliente como en la parte servidor.

Cliente

$.ajax({ url : 'http://www.aqui-la-url.com', dataType : 'jsonp', data : data });

¿Y ya está? Sí. Tan simple como eso. Lo que hacemos es incluir en el dataType el valor jsonp, en vez de json, para indicar que estamos realizando una petición cross-domain y que esperamos este tipo de contenido. La única parte “difícil” es la parte del servidor. Únicamente voy a ponerla en PHP pero se podría adaptar a cualquier lenguaje.

Servidor

<?php  
$array = array("mensaje" => "Hola desde otro punto de la red"); //Por ejemplo
if(isset($_GET['callback'])){ // Si es una petición cross-domain  
  echo $_GET['callback'].'('.json_encode($array).')';
}
else // Si es una normal, respondemos de forma normal  
  echo json_encode($array);
?>

Voy a explicar un poco. Cuando hacemos una petición JSONP, jQuery añade un identificador único a cada petición y va en forma de atributo callback. En la imagen que acompaña estas líneas, podéis ver una petición que realiza BuSeViCi al pedir tiempos de una línea de Autobuses. Como podeis observar, el valor de la variable callback es jQuery17107112555727362633_1334050373252.

En el lado del servidor comprobamos que hemos recibido esta variable, ya que únicamente se manda (a no ser que especifiquemos otra cosa), si vamos a hacer este tipo de peticiones. Para que el navegador sea capaz de entender la petición de vuelta, el servidor debe devolver el resultado, encapsulado en esa función. Para que también podamos usar peticiones normales desde nuestro servidor, devolvemos el json normal en caso de que la petición no contenga la variable callback.

La respuesta devuelta en el caso de la petición de la imagen, es:

jQuery17107112555727362633_1334050373252({"12":null});  

Conclusión

Como ves, es muy sencillo hacer peticiones cross-domain y es un requisitio imprescindible para atacar a APIs como la de Twitter.

Si el artículo te pareció interesante, útil o incluso equivocado, por favor considera el dejar un comentario. ¡Lo apreciaré mucho!

Programador Front-end en First + Third y Potato. Trabajando con JavaScript y HTML5 desde el corazón de Sevilla.

Comentarios ¡Únete a la conversación!