Bienvenidos sean a este post, hoy hablaremos sobre un tema sensible.
Si conocen algo de Ajax o no, este logra funcionar gracias a XMLHttpRequest (el cual es la verdadera encargada de hacer la magia en el navegador) pero para ello utiliza unos limites estrictos de seguridad, principalmente para evitar ataques de tipo scripting a traves de otros sitios, por esta razon es muy dificil que podamos utilizar documentos de otros sitios que no sean el local, siendo esta la razon por la cual deben implementar un servidor web para ver los ejemplos de los posts anteriores, lo cual es una buena practica pero nosotros tenemos la posibilidad de poder pasar datos de tipo JSON a traves de la llamada a eval, si bien existen otras formas tambien disponemos de esta, y el problema es que con eval se puede ejecutar codigo malicioso y esto afectar a nuestro sitio, y por esto si los datos son locales se presume que los mismos son «seguros» aunque esto no es asi al 100% pero es mas seguro.
Nota: Si quieren saber mas sobre eval y porque no debe usarse, visiten este post.
Aunque algunas veces necesitaremos tener la posibilidad de poder manipular informacion desde un sitio externo o de terceros, para ello una posibilidad que disponemos es confiar en la data, cargar en el servidor y luego enviarla al cliente cuando este la solicite, por ejemplo podemos hacer lo siguiente:
- Podemos cargar archivos XML desde un RSS
- Agregamos estos en un solo feed en el servidor
- Publicar el nuevo feed solo cuando el cliente lo solicita
Para poder lograr la carga de datos externos debemos usar un enfoque popular como es la inyeccion del tag script «on demand», y dado que jQuery nos permite hacer esto de forma sencilla veamos un simple ejemplo:
$(document.createElement('script'))
.attr('src', 'http://example.com/example.js')
.appendTo('head');
Como pueden ver por medio de createElement agregaremos el nuevo tag, el src donde estara el script remoto y por ultimo donde lo agregaremos, y a esto podemos agregar que la funcion $.getScript hara esto automaticamente si detecta que es un host remoto en el argumento de la URL, facilitando nuestra tarea, si bien el navegador ejeuctara esto no poseemos un mecanismo para poder recuperar la data entregada, lo cual nos lleva a que necesitamos una cooperacion del host remoto, una posibilidad es que el script cargado establezca una variable global que afecte a todo el entorno local, por esta razon Servicios que proveen este modelo de trabajo tambien nos posibilitan APIs para poder interactuar con el script remoto.
Otra posibilidad que disponemos es utilizar un iframe, el cual automaticamente mostrara informacion remota, dado que utilizara a la URL que le pasemos e inclusive si es un host remoto, permitiendo manipular la informacion pero para esto tambien necesitaremos algo similar a lo visto anteriormente dado que los scripts en este tambien necesitan proveer los datos de los objetos direcctamente al documento padre, pero no desesperen porque disponemos de una opcion mas.
JSONP
El concepto anterior de utilizar un tag script para buscar archivos en equipos remotos tambien puede ser implementados mediante el uso de archivos JSON desde otros servidores, para ello debemos hacer unas pequeñas modificaciones para poder implementarlo con jQuery a traves de JSONP o JSON con Padding.
Basicamente se debe encerrar la informacion normal de JSON entre parentesis y precedido por una palabra aleatoria, esta se denomina como Padding, y en base a esta palabra el cliente la procesara en una variable o funcion, parece sencillo, y lo es, pero para entenderlo mejor debemos ver un ejemplo, para ello necesitaran un servidor web, en caso de no tenerlo les recomiendo visitar primero este post:
Aqui les comento ccomo instalar un pc virtual con un linux debian, piensen que con solo 1 GB de RAM ya tienen un servidor funcional, una vez hecho esto les recomiendo el siguiente post:
Aqui veran como se instala un Apache y PHP, obligatorios para ver el ejemplo, y de forma opcional pueden instalar mariadb, con esto realizado vamos a trabajar con el codigo del post anterior y en caso de no tenerlo les paso un link para descargarlo::
Extraigan todos los archivos y copienlos en el servidor, con nuestros archivos en el servidor podemos pasar a trabajar en el ejemplo, para ello primero iremos al archivo indice.html y cambiaremos el siguiente bloque:
<div class="dioses" id="exteriores">
<h3>Dioses Exteriores</h3>
<form action="e.php">
<input type="text" name="nombre" value="" />
<input type="submit" name="buscar" value="Buscar" />
</form>
</div>De la siguiente manera:
<div class="dioses" id="exteriores">
<h3><a href="dios-ext.html">Dioses Exteriores</a></h3>
</div>
Si vienen siguiendo esta saga de posts, basicamente lo que hicimos fue volver a versiones anteriores, en este caso en lugar de buscar uno en especifico mostraremos nuevamente todos los datos, nuestro siguiente paso sera ir al archivo codigo.js y modificaremos el siguiente bloque de codigo:
$(document).ready(function() {
$('#exteriores form').submit(function(ev) {
ev.preventDefault();
var valores=$(this).serialize();
$.get('e.php', valores, function(datos) {
$('#diccionario').html(datos);
});
});
});De la siguiente manera:
$(document).ready(function() {
var url = 'http://tinchicus.rf.gd/php/ext.php';
$('#exteriores a').click(function(e) {
e.preventDefault();
$.getJSON(url + '?callback=?', function(datos) {
var html = '';
$.each(datos, function(indice, entrada) {
html += '<div class="entrada">';
html += '<h3 class="nombre">' + entrada.nombre;
html += '</h3>';
html += '<div class="resumen">';
html += entrada.resumen;
html += '</div>';
html += '</div>';
});
$('#diccionario').html(html);
});
});
});Es muy parecido a lo que vimos en este post pero aqui primero almacenaremos en una variable la direcccion donde estara nuestro archivo, despues usaremos nuevamente el evento click y el preventDefault para desactivar la conduccta predeterminada del link, volvemos a usar a getJSON pero en lugar de pasar un archhivo le pasamos la direccion anterior y le agregamos un callback seguido de un signo de interrogacion, este representara a la palabra clave y despues volvemos a tomar los datos de la pagina, para pasar por todos los elementos y almacenarlo a cada uno de ellos en html, donde haremos un div donde estaran los datos y aplicaremos unos estilos almacenados en estilo.css, para una vez finalizado cargarlo en el div diccionario de indice.html por medio de html, con esto comentado veamos como funciona mediante el siguiente video
En el video vemos que la pagina sigue funcionando y pudimos cargar los datos pero es con trampa, dado que pude cargar un archivo PHP en un servidor, pude acceder y hacer la consulta pero a la hora de usarlo en el script no funciono, el tema seguramente es debido a restricciones de seguridad porque en el servidor local al no tener certificados no se me permite este tipo de intercambio de datos mediante mis navegadores, y por eso me maneje mediante la red interna pero si tienen un servidor web con SSL y se conectan a esa pagina, este ejemplo deberia funcionar perfectamente, igualmente les comparto como es la pagina donde se saca la informacion:
<?php
$entradas = "[
{
'nombre': 'Azathoth',
'resumen': 'Azathoth, El Necio Sultán de los Demonios, El que Roe, Gime y Babea en el Centro del Vacío Final. Es el caos creativo e infinito del universo y el supremo Dios Exterior. Una maldición ha hecho que sea un dios ciego y lobotomizado, que pasa la eternidad de su encarcelamiento moviéndose incesantemente al son de una flauta.'
},
{
'nombre': 'Nyarlathotep',
'resumen': 'Nyarlathotep es un Dios Exterior. Se desconoce cuál es su forma original, pues adopta una apariencia u otra en función de sus propósitos aunque se especula que esta es una gran masa poliposa con una larga excreción roja.'
},
{
'nombre': 'Shub-Niggurath',
'resumen': 'Shub-Niggurath, es una deidad de la fertilidad. Shub-Niggurath, a pesar de su importancia, jamás aparece físicamente, por lo que jamás se da una descripción de ella y hay gente que erróneamente asocia a ella la descripción de Abhoth.'
},
{
'nombre': 'Yog-Sothoth',
'resumen': 'Yog-Sothoth es el dios más importante de Los Mitos de Cthulhu. Encarna la omnisciencia y es la contraparte de Azathoth, pues este se corresponde con la omnipotencia. Yog-Sothoth no es más que una masa amorfa de burbujas iridiscentes en continua creación y autodestrucción.'
}
]";
print ($_GET['callback'] . '(' . $entradas . ')');
?>Basicamente el array entradas es el contenido de un archivo JSON, en toda su estrucctura, y despues solamente recuperamos el valor que ingresamos junto a callback y le adjuntamos la informacion anterior entre parentesis, siendo esto mostrado en pantalla, les dejo un ejemplo:
Con todo esto comentado les dejo un link para descargar todos los archivos del ejemplo y los codigos finales en este post para que puedan trabajarlos:
En resumen, hoy hemos visto como cargar informacion por medio de JSON pero externamente, como se denomina coloquialmente, como se trabaja, un ejemplo para verlo en accion y algunos detalles para tener en cuenta al momento de implementarlo, espero les haya sido de utilidad sigueme en tumblr, Twitter o Facebook para recibir una notificacion cada vez que subo un nuevo post en este blog, nos vemos en el proximo post.
Donación
Es para mantenimento del sitio, gracias!
$1.50
El blog de Tinchicus 