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 Captura

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

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 :) Captura

Referencias:

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

Acerca de MaritoCares

Ingeniero Informático. Con tendencias a la programación en [C#, VB].NET, Java(Web principalmente...), PHP, JavaScript, algo mínimo de [ruby, python], y el clásico C.
Esta entrada fue publicada en JavaScript, php, Tips. Guarda el enlace permanente.

Responder

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión / Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión / Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión / Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión / Cambiar )

Conectando a %s