jSONP

Eso …

Resulta que aquí en el trabajo, mi jefe tiene un sistema en un servidor distinto al mio. Dicho sistema tiene registrado unos usuarios.

Mi sistema (uno nuevo que estoy haciendo) necesita usar info de los usuarios registrados en el otro sistema, pero al estar en un sistema distinto las peticiones que realizaba el mio al de mi jefe no funcionaban x_X 

Entonces buscando por internes, encontré una solución: Agregar header(«Access-Control-Allow-Origin: *»); a la respuesta de la página en php… peeeero 

Si bien podía hacer la petición, no recibía respuesta 😦 Y entonces encontré una solución que funcionaba como correspondía 😉

En vez de utilizar un

$.post(
    "http://saludcormudesi.cl/unisag/ws.php",
    {
        checkLogin:"1",
        id: "174321167",
        key: "123456"
    },
    function(data){
        alert(data)
    }
);

común y silvestre entraba a escena el tipo de petición jsonp.

Primero, en el servidor la cosa cambia un poco. Nuestra respuesta (independiente de la salida) queda así:

echo $_GET['callback'].'('.json_encode($respuesta).')'; 

Y en nuestro código en cliente:

$.ajax({
    dataType: 'jsonp',
    data: {
        checkLogin:"1",
        id: "23213",
        key: "123456"
    },
    jsonp: 'callback',
    url: "http://saludcormudesi.cl/unisag/ws.php",
    success: function (jsonData) {
            alert(jsonData.Usuario);
    },
    error: function(errorObj) {
            alert(errorObj.statusText);
    }
});

Lo importante aquí es el valor que le demos al atributo jsonp que si se fijan es el mismo que tiene la respuesta del servidor (callback). Entonces, la respuesta queda como jQuery1102007699555391445756_1385385681812({«Existe»:1,»Usuario»:»Mario Cares»})

Lo que hace jsonp es transformar todo en una función. Cada petición tiene un id específico que va en el atributo callback. Entonces al recibir la respuesta, se ejecuta la función dentro de la petición y tadaaaa , funciona de las mil maravillas. Tanto así que no es necesario agregarle el header en el php 🙂 

Referencias:

http://www.funcion13.com/2012/04/12/como-realizar-peticiones-ajax-cross-domain-jsonp-jquery/