En ciertos proyectos es necesario poder obtener datos de otro servidor por AJAX pero el inconveniente de siempre que los navegadores por seguridad no lo permiten solo permiten los que estén en el mismo servidor. JSONP también conocido como JSON con Padding es una tecnica que permite obtener datos de servidores externos.
En que consiste esta técnica?
el json convertirlo en una funcion
como ya saben siempre soy mas practico que teorico.
/*aqui temenos un json no tiene nada de ciencia*/ ({"respuesta":"Validacion Correcta","validacion":"ok"}) |
con la tecnica JSONP
/*aqui temenos un json no tiene nada de ciencia*/ CualQuierNombre({"respuesta":"Validacion Correcta","validacion":"ok"}) |
Listo!
Jquery ya nos da una funcion que simplifica las llamadas a ajax que nos devuelve un JSON
Bueno les pongo un ejemplo practico, tenemos en el dominio1.com un login y en dominio2.com tenemos la base de datos entonces desde el dominio2.com vamos a enviar un la data.
<script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.js"></script><script type="text/javascript" src="script.js"></script> <!--formulario de donde obtenemos los datos--> <form>< input id="username" type="text" /> < input id="pass" type="text" /> < input id="enviar" type="button" value="inicia sesion" /></form> |
script.js
$(document).ready(function(e) { /*capturamos los datos al cliekar el boton enviar*/ $("#enviar").on("click",function(){ /*declaramos las variables del fromulario y la url que llamaremos*/ var username=$("#username").val(); var pass=$("#pass").val(); var url = "http://luisrodriguez.pe/demos/scripts/jsonp/login.php?jsoncallback=?"; //hacermos el llamado a la url externa y enviamos 2 ger usuario y password que luego en el php login los //capturamos para hacer la comprobacion si los datos enviados existen en la base de datos, pero en este // ejemplo solo estaran en duro $.getJSON(url,{usuario:username ,password:pass}).done(function(data) { console.log(data.respuesta + ' '+ data.validacion); }).fail(function( jqxhr, textStatus, error ) { var err = textStatus + ', ' + error; console.log( "Request Failed: " + err); }); }) }) |
login.php
//capturamos los datos enviamos $user=addslashes(trim($_GET["usuario"])); $pass=addslashes(trim($_GET["password"])); //comprobamos los datos enviados son los sigueintes esta en duro //pero claro que podrian hacerlo con base de datos if ($user=="root" and $pass=="pass") { //si todo es correcto //puedes cargar sessiones para manejar el tema de seguridad $resultados["respuesta"] = "Validacion Correcta"; $resultados["validacion"] = "ok"; } else { //si esta errado $resultados["respuesta"] = "Usuario y password incorrectos"; $resultados["validacion"] = "error"; } //aqui va el truco debes mostrar el valor de la variable que envias desde el getJSON jsoncallback echo $_GET['jsoncallback'] . "(" . json_encode($resultados)." ) "; |
entonces ya esta listo!!
PERO!!!!
si no tuviéramos acceso al archivo json para modificarlo directamente?, bueno tambien ahi solucion para llamar un json de un servidor que no tenemos accesos y tambien es facil la solucion.
/*jalamos el contenido del archivo externo*/ $file = file_get_contents ("http://dominio.com/archivo.json", "r"); echo $_GET['jsoncallback']." (".utf8_decode($file).")"; |
por ahora lo que hace el script es mostrarte en console una mensaje si los datos estan correctos o no pero puedes redireccionar la pagina de entorno privado o mandar un error en la pantalla . como indique arriba puedes cargar sesiones y hacer las validaciones en la área privada.
el ejemplo a descargar esta solo para que lo coloques en un servidor web y correrlo ya que el login.php lo tengo en mi servidor.
like para descarga 🙂
[to_like id=»239″]
Descarga
[/to_like]
