Esta vez voy a intentar explicar como realizaríamos una carga ajax de un archivo xml el cual contiene cierta información que queremos mostrar en nuestra web, para ello realizaré un ejemplo y os iré describiendo detalladamente todos los pasos que voy siguiendo. En nuestro ejemplo tendremos un listado con tres películas, al pinchar sobre cada una de ellas conectaremos con un archivo xml que es donde gurdamos toda la información relativa a las tres pelis, buscaremos la información relativa a la película sobre la que se a clicado y la imprimiremos por pantalla en un formato HTML específico. A continuación os pongo el ejemplo en funcionamiento:

VER EJEMPLO

Ver código js completo

Paso 1: Añadir los eventos

El primer paso que daremos será asignar el evento correspondiente a cada uno de los enlaces disponibles en el listado, en nuestro caso son tres.

function addLoadEvent(func) {
			var oldonload = window.onload;
			if (typeof window.onload != 'function') {
				window.onload = func;
			}
			else {
				window.onload = function() {
					oldonload();
					func();
				}
			}
		}
function anadeEvento(elemento,evento,funcion) {
		 if(document.addEventListener){
			 elemento.addEventListener(evento, funcion, false);  // Resto navegadores
		 }
		 else{
			 elemento.attachEvent("on"+evento,  funcion ); // IE8-
		 }
	  }

//Asignamos eventos
      addLoadEvent(function() { 

	     var listado_pelicula = document.getElementById("listado-peliculas");
    	 var enlaces_pelicula = listado_pelicula.getElementsByTagName("a");
				 
	     for(var i=0; i<enlaces_pelicula.length; i++)  
		     anadeEvento(enlaces_pelicula[i], "click", function(e){cargadorPeliculas(this.getAttribute("id")); e.preventDefault();});	
         });	

Para evitar el uso de javascript intrusivo hacemos uso de las funciones addLoadEvent y anadeEvento (ya hable de estas funciones en este post)

Una vez se haya cargado la página capturamos los tres enlaces del listado y los recorremos uno por uno pasándolos como parámetro a la función anadeEvento, junto con el evento que deseamos, en este caso el evento click y junto a la función que queremos que se ejecute al hacer clic sobre uno de nuestros enlaces.

Mucho cuidado con llamar a la función que queremos ejecutar directamente, porque no nos funcionará. Por ejemplo:

for(var i=0; i<enlaces_pelicula.length; i++)  
		     anadeEvento(enlaces_pelicula[i], "click", cargadorPeliculas(this.getAttribute("id")));	

Leer el resto de esta entrada »