Jsonp es una forma de conseguir algo parecido a ajax cross-domain. Ajax, por motivos de seguridad nunca ha incluido la posibilidad de lanzar peticiones fuera del dominio cargado lo cual lo invalida como tecnología para usar servicios web de terceros.
Con jsonp esto es posible puesto que lo que hacemos realmente no es una llamada ajax sino una carga de un script js completo que lo que hace es lanzar una función que definimos en la llamada y que actúa como callback.
- Más información: jsonp
Jquery contiene entre sus funciones Ajax desde hace tiempo la opción usar jsonp como forma de cargar contenido. El problema, por el cual esto pasa desapercibido, es que se incluye en su funcion getJSON y al no ser exactamente lo mismo un json que un jsonp esto lleva a confusiones.
Para hacer una llamada jsonp usando jquery tenemos que usar la función getJSON indicando al final la variable que va a definir el nombre de la función a ejecutar como callback con un «?». Si hacemos esto el resto de opciones las manejamos como en una llamada ajax de jquery cualquiera:
$.getJSON("http://dominioExterno.com/pagina?var1=valor1&callback=?",
function(data){
data.value; // data es el json cargado por jsonp
});
Esto hace realmente sencillo el manejo de ajax cross-domain con jsonp ya que ni siquiera tenemos que ponerle nombre a la función de callback y podemos definirla en el mismo momento de la llamada.
3 respuestas a “ajax cross-domain con jquery y jsonp”
Buen artículo Iñaki, pero faltaría explicar un poquito más.
sobre todo como enviar la respuesta, ya que creo que no está del todo claro.
Un saludo gatuno.
Buenas Jose David,
No incluí el formato jsonp, que es el que se usa como respuesta porque ya escribí una explicación de como hacer jsonp en otro articulo. Échale un ojo:
http://blog.ikhuerta.com/jsonp-json-con-padding
Así pues…
Si nosotros creamos una url que usa la variable «callback» tipica de jsonp y la informase como «micallback».
Esta página devolvería algo así como:
micallback({value:’hola hola!’})
Por lo tanto, ahora al llamar a esta pagina con…
$.getJSON(«http://dominioExterno.com/pagina?callback=?»,
function(data){
alert(data.value);
});
Jquery reemplazará «?» por la variable que el quiera para poder provocar el callback y lanzará esa pagina. Esta devolverá el objeto y, claro, se mostrará un alert con el valor «hola hola!».
Saludos!
Por post como estos es que me encanta jquery!! Gracias.