Pages

martes, agosto 07, 2012

JSONP - Cross Domain AJAX, Ejemplo con jQuery y PHP

Si ud. como yo, es un pobre programador que ha intentado hacer alguna aplicacion para telefonos Android y tuvo la peregrina idea de hacer que el telefono tenga la logica de su lado y se comunique via Ajax con su servidor... Entonces esta entrada se la dedico desde el fondo de mi corazón.

Después de mucho deambular leyendo un montón de incoherencias llegué a un post que me mostró la luz. http://bob.ippoli.to/archives/2005/12/05/remote-json-jsonp/
De ahí en mas avancé y aqui van mis conclusiones.

1) llamada ajax en javascript con jQuery:

$.ajax({
 dataType: "jsonp",
 url: "http://algunotrodominio.com/unscript.php",
 data: "parametro1=valor1&parametro2=valor2",
 type: GET,
 crossDomain: true,
 jsonpCallback:'jpCallback',
 success: function(jsondata) {   
  datos = jsondata[0].respuesta.datos;
  otros = jsondata[0].respuesta.otracosa;
  (hacer algo con todo esto.)
 },
 error: function (jqXHR, textStatus, errorThrown) {
   (haceralgo)
 }
});

jpCallback(jsondata){
  (pueden ejecutar alguna validación previa con los datos,
 o no hacer absolutamente nada.)
} 

2) unscript.php :
<?php

$json = '{ "respuesta": {
   "datos": [ 
              {"codigo": 1, "dato": "algo1"},
              {"codigo": 2, "dato": "algo2"}
            ],
   "otracosa":"undatomasadevolver"  
   }   
}';
  
echo 'jpCallback(['.$json.'])';
?> 

Y eso es todo. Si no lo captaron: al $.ajax() de jQuery modifican el dataType a "jsonp", esto solo ya habilita a hacer una llamada cross domain. pero hay un parametro mas crossDomain : true. Sin esto tambien funciona. jsonpCallback : 'nombredefuncioncallback' Al decir que esto es "jsonp" jQuery agrega 2 parametros a la cadena de datos que se envian por ejemplo:

http://algunotrodominio.com/unscript.php?callback=jQuery17206061169685839634_1344380380503&parametro1=valor1&parametro2=valor2&_=1344380387364

si en cambio agregamos el parametro jsonpCallback : 'funcioncallback' entonces la llamada se parecera a esto:

http://algunotrodominio.com/unscript.php?callback=funcioncallback&parametro1=valor1&parametro2=valor2&_=1344380387364

Como sea lo importante es que la devolucion del script PHP debe ser el nombre de la funcion callback y como parametro de la funcion el JSON que quiero devolver. jQuery ejecuta entonces la funcion callback y luego al success: envia solo el objeto JSON. En el ejemplo muestro como acceder a los distintos componentes.

Espero que les sea útil.