viernes, 30 de noviembre de 2012

Cross-Domain en JQuery $.ajax, cuándo y cómo usar Json o Jsonp

Si nos disponemos a usar

Ajax

desde un script para comunicar con un servicio alojado en un dominio diferente al de la página que está originando la llamada hemos de tener en cuenta una serie de aspectos para evitar problemas de seguridad.

Aquí veremos un ejemplo sobre como hacer una llamada

Cross-Domain

con

ajax

a un servicio remoto. Por situarnos un poco, cuando realizamos una llamada a un servicio desde un script el navegador lanza una petición http a la Url y el servidor responde en formato

Json

. Si la Url está alojada en un dominio diferente, el concepto será el mismo, pero por motivos de seguridad hemos de tener en cuenta que el servidor no responderá al script con la respuesta

json

'plana', si no que la encapsulará en un método 'CallBack' que hemos de indicar en la URL desde cliente al invocar el servicio. Esta técnica se conoce como

Jsonp

(Json con Padding), veamos como adaptar el script en cliente.

Ejemplo Ajax mismo dominio:

Script
function localSample() {
        $.ajax({
            type: "POST",
            url: "UrlLocal",
            dataType: 'json',
            success: function (data) {
                //...
            },
            error: function (response) {
                //...
            }
        });   
}
Petición
http://UrlLocal
Respuesta
{"ObjetoJson":[{"id":1,"titulo":"blabla","descripcion":"blabla"},{"id":2,"titulo":"blabla","descripcion":"blabla"}]}
Ejemplo Cross-Domain:

Script
function login() {
        $.support.cors = true;
        $.ajax({
            type: "POST",
            url: "http://UrlRemota",
            dataType: 'jsonp',
            crossDomain: true,
            success: function (data) {
                //...
            },
            error: function (response) {
                //...
            }
        });
    }
}
Petición
http://UrlRemota?callback=jQuery16407422359699849039_1353499175935&_=1353499176045
Respuesta
jQuery16407422359699849039_1353499175935({"ObjetoJson":[{"id":1,"titulo":"blabla","descripcion":"blabla"},{"id":2,"titulo":"blabla","descripcion":"blabla"}]})
En el segundo ejemplo hemos alterado los valores de los atributos crossDomain y dataType del método

$.ajax

. Automáticamente se generará un método CallBack en runtime que tiene como función interpretar la respuesta

json

del servicio y cuya referencia se pasa como parámetro en la petición http al servidor.

Por lo que respecta a servidor hemos de tener en cuenta que el servicio debe estar preparado para procesar respuestas cross-domain. Si tenemos el control del código servidor y no está preparado por defecto podemos investigar como tratar este tipo de peticiones en función del lenguaje en que esté desarrollado el servicio.

Espero os sea útil, como siempre os recuerdo que podéis seguir

areaTIC.net

en las redes sociales!


No hay comentarios:

Publicar un comentario