jQuery: ajax desde diferentes dominios (cross domain ajax)

Portada

Tecnología

Programación

Detalles: Categoría: Programación; Última actualización el Jueves, 26 Abril 2012 09:53; Escrito por cybnet; Visto: 7084

Las llamadas ajax a diferentes dominios desde el que carga el script es algo "prohibido" por todos los navegadores modernos, algo achacado a motivos de seguridad pero que sin duda puede no ser práctico en determinados casos. La llamada ajax es prohibida incluso entre subdominios diferentes. No obstante, hay diferentes modos de saltarse esta restricción. Uno de ellos es usar un método que, aunque en esencia es un ajax, los datos cargados son en sí un script, permitiéndose en el navegador.

El método que vamos a ver aquí es realizar la llamada ajax con jQuery usando jsonp como leguaje de intercambio de datos.

¿Qué es jsonp?

jsonp es es la versión padding de json. Esto es, json con padding, un complemento de uso de json que permite la obtención de datos desde diferente dominios ya que los datos devueltos son en formato json encapsulados en una función javascript ...... y los scripts pueden ser cargados desde diferentes dominios!!!!!!. Técnicamente jsonp no es ajax en absoluto ya que no usa XMLHttpRequest sino que se realiza insertando dinámicamente un script en el DOM de la página.

La respuesta en formato json es obtenida en una forma similar a esta:

{'uid': '68', 'username': 'paquito', 'status': 'disconected'}

Mientras que los datos jsonp vienen en una función javascript:

callback({'uid': '68', 'username': 'paquito', 'status': 'disconected'});

La función javascript devuelta (callback) debe ser especificada en el lado del servidor y conocida para cofigurar nuestra llamada ajax con jquery y jsonp correctamente. Esto lo veremos más adelante.

¿Cómo usar jquery con jsonp?

Se puede usar jQuery para leer y trabajar con datos jsonp usando cualquiera de las funciones de jQuery .getJSON() o .ajax(), ambas soportan de forma nativa jsonp. También se puede implementar con las funciones .post() y .getScript().

Veamos como usar .ajax() y .getJSON().

La función .getJSON() es una forma más corta de escribir una función .ajax() que va usar datos tipo json:

.getJSON(url,[datos enviados],function(datos devueltos));

Los [datos enviados] son opcionales y han de ir en formato json.

Para especificar que los datos a usar son jsonp simplemente se debe poner al final de la url algo como &callback=?. callback será la función que contiene los datos recibidos en formato json. Esta función debe ser conocida, por ejemplo flickr usa "jsoncallback" por lo que al final de la url tendremos que poner &jsoncallback=?.

Para usar la función .ajax() con jsonp simplemente se especifica que los tipos de datos son jsonp. Al hacer esto jQuery pone automáticamente &callback=? al final de la url solicitada. Si es necesario escpecificar otro callback debes ponerlo especificamente:

.ajax({ 
  //....aquí usarías .ajax() de forma normal 
  dataType: 'jsonp', 
  callback: 'callback', //si no pones ninguno será &callback=? por defecto 
  //....sigues usando .ajax() de forma normal 
}):

jQuery recibirá los datos jsonp y los trata de forma igual a como lo hace con json. Veamos el ejemplo que pusimos en ajax con jquery, php y json pero ahora usando jsonp.

En el ejemplo mencionado teníamos tres archivos, un html desde donde mostramos los datos, un js donde ponemos nuestro código ajax de jquery y un archivo php donde procesamos la respuesta enviada por el servidor en función de los datos recibidos.

El html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="es-es" lang="es-es" >
 <head>
  <script type="text/javascript" src="/js/jquery.js"></script>
  <script type="text/javascript" src="/js/ajax.js"></script>
 </head>
 <body>
  <a href="#" id="myid">Detalles casa 2</a>
  <div class="info"></div>
 </body>
</html>

El código ajax con jquery

El siguiente código sería el que ponemos en el archivo ajax.js cargado en nuestro html:

function restults(data) {
       $("div.info").show();
       $("div.info").append("ID: "+data.id);
       $("div.info").append("M2: "+data.m2+"");
       $("div.info").append("Habitaciones: "+data.hab);
       $("div.info").append("Lacalización: "+data.direccion);
     }
  $(document).ready(function(){
     $("#myid").click(function(){
       $.ajax({
         data: "id=2",
         type: "GET",
         dataType: "jsonp",
         url: "http://www.miweb.com/casas.php",
         success: function(data){ 
           restults(data); 
         }
       });
    });
  });

Nota que no he especificado un callback, por tanto jQuery pondrá al final de la url &callback=? por defecto. En el archivo php verás por qué es necesario conocer el callback para que nuestro ajax tenga éxito.

Nota también como la sintaxis en jQuery para trabajar con los datos recibidos no cambia.

El archivo php

Este archivo php estaría en otro dominio distinto al dominio donde estaría el html y javascript anterior. Este sería un ejemplo de como lo podríamos construir si este segundo dominio también es nuestro. En caso de que queramos hacer un crossdomain ajax a un dominio que no es nuestro, el dueño de este domino tendrá que proveer de un API con los datos necesarios para trabajar, como mínimo el callback que debemos utilizar, las variables que podemos enviar y los datos que podremos recibir. Por ejemplo flickr.com lo incorpora en su API (vea Formato de respuesta JSON en el API de flickr).

<?php 
(int) $id = $_GET['id'];
if($id > 0) {
   process($id);
 }

 function process($id) {
   $db = mysql_connect('localhost', 'mysql_user', 'mysql_password'); 
   if (!$db) { 
     die('Could not connect: ' . mysql_error());
   } 
   if (!mysql_select_db('nombre_base_de_datos')) { 
     die('Could not select database: ' . mysql_error());
   }    
   $result = mysql_query("SELECT id,m2,hab,direccion FROM casas WHERE id=".$id); 
   if (!$result) { 
     die('Could not query:' . mysql_error()); 
   }

   $row = mysql_fetch_object($result);
   $jsondata['id'] = $row->id;
   $jsondata['m2'] = $row->m2;
   $jsondata['hab'] = $row->hab;
   $jsondata['direccion'] = $row->direccion;

   $json = json_encode($jsondata); 
  if($_GET['callback']) { 
    echo $_GET['callback']."(".$json.")"; 
  } else { 
    echo $json; 
} 
mysql_close($link);
 } 
?>

Puedes ver que se verifica la existencia del callback a través de $_GET['callback'], podría ser por ejemplo $_GET['jsoncallback'] como en el caso del API de flickr y en este caso tendremos que especificar este callback en la función .ajax() tal y como explicamos anteriormente. Si no existe el callback el script php devuelve los datos en formato json normal.

+1 -1 Reportar

Comentarios (15)

RSS

cybnet

(07.05.2012 (09:49:39))

El callback se explica en el post

Citando "jose francisco" :

mira lei otro foro y encontre que tenia que definir un atributo jasonp en la peticion, el cual llevaria el nombre de mi callback function, entonces del lado del servidor obtienes por get el callback, y si esta definido, pues ya puedes realizar operaciones y mandar una respuesta al cliente.

Todo eso del callback se explica en el post, si lo hubieses leído antes de preguntar te hubiéses ahorrado mucho tiempo, ¿no crees? lol

jQuery: ajax desde diferentes dominios (cross domain ajax)

¿Qué es jsonp?

¿Cómo usar jquery con jsonp?

cybnet

Artículos Relacionados