jQuery / Ajax – Cargando datos desde un script

Bienvenidos sean a este post, hoy continuaremos viendo como cargar datos externamente.

En este post vimos como cargar datos desde una pagina html, en el post anterior vimos como cargar datos desde un archivo .json, en este caso nos centraremos en como hacerlo desde un archivo script, para ello seguiremos trabajando con el codigo del post anterior sino lo tienen simplemente descarguen los archivos del siguiente link:

Solamente extraigan los archivos en un directorio, con esto realizado podemos pasar a crear un nuevo archivo con el nombre de e.js y le agregaremos el siguiente codigo:

e.js

var 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."
	}
];

var html='';

$.each(entradas, function() {
	html += '<div class="entrada">';
	html += '<h3 class="nombre">' + this.nombre + '</h3>';
	html += '<div class="resumen">';
	html += this.resumen;
	html += '</div>';
	html += '</div>';
});

$('#diccionario').html(html);

Al principio definiremos una variable con todas las entradas que mostraremos, observen que son los mismos datos que utilizamos en el post anterior en el archivo e.json pero en lugar de tenerlos ahi lo pasamos al principio de este, luego definimos a la variable html vacia, despues por medio de each pasamos por todos los elementos del array anterior, por eso lo pasamos primero y despues a traves de una funcion anonima crearemos los elementos para mostrar los datos con formato html y estilo, observen un detalle para saber que dato procesaremos usaremos al this para indicarle que es el actual, despues pasamos cada uno de los campos donde tenemos la informacion, en todo los casos cada linea la agregamos a la variable html, todo como lo hicimos en el post anterior, por ultimo seleccionamos a diccionario y con ell metodo html llenaremos el div con lo almacenado en la variable html, con esto realizado pasemos al archivo codigo.js y tomemos el siguiente bloque de codigo:

$(document).ready(function() {
	$('#exteriores a').click(function(ev) {
		ev.preventDefault();
		$.getJSON("e.json", function(datos) {
			var html='';
			$.each(datos, function(indice, entrada) {
			html += '<div class="entrada">';
			html += '<h3 class="nombre">' + entrada.nombre + '</h3>';
			html += '<div class="resumen">';
			html += entrada.resumen;
			html += '</div>';
			html += '</div>';
			});
			$('#diccionario').html(html);
		});
	});
});

De la siguiente manera:

$(document).ready(function() {
	$('#exteriores a').click(function(ev) {
		ev.preventDefault();
		$.getScript('e.js');
	});
});

Basicamente lo que hicimos fue eliminar todo el codigo que agregamos al archivo y cambiamos al metodo encargado de cargar los datos, en lugar de ser getJSON usamos a getScript y le pasamos el archivo creado anteriormente, despues es lo mismo que antes, agregamos un evento click al link del div exterirores y usamos a preventDefault para que no haga su conducta predeterminada y ejecute nuestro script, con esto comentado si lo prueban deberia funcionar de la siguiente manera

Si lo comprueban con lo visto en el post anterior veran que hace exactamente lo mismo, alguno puede resultar mas practico que el otro pero los dos cumplen con su cometido, si lo probaste desde tu pc y no funciono es porque solo lo hace desde un servidor web, esto es por un tema de seguridad de los navegadores, si necesitas probarlo te recomiendo crear una pc virtual para instalar un servidor web, en el siguiente post te explico como crear una pc virtual e instalar un debian

Y en este otro post te explico como instalar un servidor web

En este caso explico como instalar un Apache, y te recomiendo instalar PHP tambien porque lo usaremos proximamente y mariadb, este no es necesario pero no esta demas instalarlo, una vez instalados pueden copiar los archivos en el servidor y deberia funcionar como en el video, antes de finalizar les dejo un link con todo los codigos finalizados trabajado en este post:

En resumen, hoy hemos visto como cargar datos desde un sccript, como en cierto punto es similar a como lo hicimos con JSON, como puede ser mas practico en algun punto o no, 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.