Anteriormente en «Una sencilla llamada AJAX con jQuery» daba las pautas para hacer una petición a un servidor y «pintar / mostrar» el resultado por pantalla. Bien pues se me olvidaba comentar que sólo es válido si las llamadas las hacemos dentro de nuestro dominio, para hacer una llamada a otro dominio hay que hacerla de forma diferente, hay que hacer una llamada Cross Domain.
¿Y por qué existe?
Para intentar evitar el sabotaje/robo en internet como puede ser:
- Cross Site Request Forgery (XSRF o session riding): Un sitio web lleno de chicas que buscan hombres atractivos como yo (y al que juro que no se cómo he llegado) me roba las cookies de mi navegador y suplanta mi identidad para así, poder acceder a mi facebook, fliker, banca online… etc.
- Cross Site Scripting (XSS): Un sitio web malo me roba información y la envía a un sitio de terceros usando una inyección de Javascript.
Vale, entendido pero ¿Cómo se hace?
Pues en realidad no es complicado solo es necesario tener en cuenta un par de cosillas y modificar un poquito el lado del servidor. Empezamos por el lado del cliente, el código javascript es muy similar solo hay que cambiar el dataType de JSON a JSONP y quedaría así:
1 2 3 4 5 6 7 8 9 |
jQuery.ajax({ url: 'http://www.otro-sitio.es', data: datos, dataType: "jsonp", success: function(response){ /* Actualizamos el contenido de nuestra página */ jQuery('.resultado').html(response.msg); } }); |
En el lado del servidor la cosa cambia, hay que devolver la información especialmente formateada si la petición es Cross Domain:
1 2 3 4 5 6 7 8 9 10 |
$respuesta = array('msg' => 'Hola desde el otro sitio'); if(isset($_GET['callback'])){ /*Si es una petición cross-domain (JSONP), devolvemos en la respuesta el identificador de la petición. */ echo $_GET['callback'].'('.json_encode($respuesta).')'; } else{ // Si es una peticion normal (JSON) echo json_encode($respuesta); } |
Cuando hacemos una petición de este tipo se le envía al servidor un identificador que va dentro de callback, en el servidor la recojemos y la devolvemos junto con la información.
Y con esta entrada termino la serie de 3 sobre llamadas AJAX que me parecen más utiles y de uso continuado día a día.
Comments are closed.