jQuery / Ajax – Cargando datos de un XML

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

En este post vimos como cargar datos desde una pagina, en este otro post vimos como hacerlo desde un archivo JSON y en el post anterior vimos como hacerlo mediante un script, pero hoy nos centraremos como hacerlo desde otro estandar como es XML, eXtensible Markup Language, que a diferencia de lo que muchos creen no es como una pagina HTML comun dado que solo contendra informacion mediante tags y no mostrara ninguno de ellos, con esto comentado tomemos el codigo que vimos en el post anterior y trabajemos con el, en caso de no tenerlo les dejo un link para descargarlo:

Simplemente extraigan todos los archivos en un directorio, una vez realizado esto podemos pasar a crear un nuevo archivo con el nombre a.xml y le agregaremos el sigueinte codigo:

a.xml

<?xml version="1.0" encoding="UTF-8"?>
<entradas>
	<entrada nombre="Bast">
		<resumen>
		Bast inicialmente fue adorada en la Atlántida, pero su culto era tan importante que acabó extendiéndose a Egipto. Allí fue una de las diosas más populares, e incluso contó con una ciudad dedicada a ella, Bubastis. La importancia de Bast se debió sobre todo a que, además de una deidad felina, también estaba asociada a la sexualidad y el erotismo.
		</resumen>
	</entrada>
	<entrada nombre="Hipnos">
		<resumen>
		Dios del Sueño, Señor del Sueño, Hijo de la Noche. Hermano de Thanatos, la Muerte. Es representado como un joven somnoliento con alas en los hombros y/o en las sienes, frecuentemente lleva el cabello engalanado con amapolas, las flores del sueño. Hay quien dice que Hypnos posee asimismo una forma original más horrible que la más temible que las pesadillas.
		</resumen>
	</entrada>
	<entrada nombre="Nodens">
		<resumen>
		Señor del Gran Abismo, El Venerable. Toma la apariencia de un ser humano masculino, con barba, montado en una concha marina tirada por varias bestias legendarias. A veces también se le describe con una barba de tentáculos. Otras veces aparece como un hombre de mediana edad, musculoso y de cabello castaño. Su comportamiento es generalmente benévolo con los humanos, pero únicamente actúa de ese modo porque está enemistado con Nyarlathotep y sabe que al proteger a los mortales logrará molestar a su rival.
		</resumen>
	</entrada>
</entradas>

Esta sera la informacion que mostraremos, observen como es la estructura, una general llamada entradas que contendra al resto, despues cada una de las entradas identificadas como tal, con la propiedad nombre para identificar a cada una de ellas y dentro otro tag para el resumen del mismo y la respectiva infomacion, con esto tenemos la informacion ahora pasemos al archivo codigo.js y agreguemos el siguiente bloque de codigo:

$(document).ready(function() {
	$('#arquetipicos a').click(function(evento) {
		evento.preventDefault();
		$.get('a.xml', function(datos) {
			$('#diccionario').empty();
			$(datos).find('entrada').each(function() {
				var $ent = $(this);
				var html = '<div class="entrada">';
				html += '<h3 class="nombre">' + $ent.attr('nombre');
				html += '</h3>';
				html += '<div class="resumen">';
				html += $ent.find('resumen').text();
				html += '</div>';
				html += '</div>';
				$('#diccionario').append(html);
			});
		});
	});
});

Como hicimos en los posts anteriores asignaremos el evento click al link dentro del div identificado como arquetipicos, en este caso usaremos un argumento para trabajar con el evento y a este le aplicaremos la funcion preventDefault para que el link no trabaje como tal y si ejecute el resto del codigo, nuestro siguiente paso sera por medio del metodo get abrir el archivo antes creado, y por medio de datos tendremos todo el contenido en este, nuestro primer paso dentro de esta nueva funcion sera limpiar el contenido del div dicccionario por medio de empty, despues seleccionaremos a la variable datos y con la funcion find buscaremos cada una de las entradas identificadas como entrada y con each trabajaremos sobre ellas.

Dentro de esta nueva funcion primero definiremos una nueva variable que representara a la entrada actual mediante el this, despues definiremos a html, este sera el encargado de mostrar el contenido formateado, por esta razon la primera linea contiene el div con la clase entrada, seguido de la linea encargada de formatear con h3 al nombre y este lo obtenemos a traves de attr y el valor actual en $ent, como argumento pasaremos el atributo a buscar, con la siguiente linea cerramos la linea anterior, despues tenemos el otro div encargado de mostrar el resumen, pero a diferencia del anterior volvemos a usar find, recuerden que resumen es un tag y no un atributo, para encontrar y por medio del metodo text lo agregamos al div, cerramos estos dos y por ultimo lo agregamos a diccionario, con todo esto comentado podemos pasar a ver como funciona ahora nuesta pagina mediante el siguiente video

En el video podemos ver no solo como funciona lo que agregamos sino tambien como funciona los otros codigos que vimos anteriormente sin ningun inconveniente, si al momento de probarlo no te funciono como en el video no te preocupes no hiciste nada mal sino que los navegadores por un tema de seguridad no permiten trabajar este tipo de codigos de forma local y necesitan de un servidor web, en caso de no tener alguno te recomiendo crear primero una pc virtual con linux y para ello te recomiendo el siguiente post:

Es super recomendable porque con poco espacio en el disco y 1 GB de ram funciona perfectamente, una vez instalado te recomiendo este otro post donde explico como instalar un servidor web:

En este caso explico como instalar un Apache en debian, y les recomiendo instalar PHP porque proximamente lo usaremos y por ultimo mariadb no seria necesario pero nunca esta demas, con todo esto comentado les dejo los archivos con los codigos finales en este post en el siguiente link:

En resumen, hoy hemos visto como cargar datos desde un archivo XML, otro de los archivos estandar mas utilizados en internet para hacerlo, hemos visto como es la estructura de este, despues en el codigo como debemos hacer para cargar la informacion y mostrarlo, 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.