Una sola funcion para todas tus llamadas Ajax

Recien leía en un foro que alguien preguntaba como es que podía procesar sus links para que todos funcionaran via Ajax sin tener que hacerlo uno por uno, bueno aquí hay una solución, primero veamos el codigo html, tenemos un pequeño menu:

<div id="div_a_actualizar">Esta es la zona que se actualizara</div>
<ul>
<li><a href="pagina1.html" class="links">Pag. 1</a></li>
<li><a href="pagina2.html" class="links">Pag. 2</a></li>
<li><a href="pagina3.html" class="links">Pag. 3</a></li>
<li><a href="pagina4.html" class="links">Pag. 4</a></li>
</ul>

Tenemos las distintas opciones y pongan atencion que todos comparten la clase links

Ahora el JS

window.addEvent('domready', function() {

function links (){
//A todos los elementos de la clase links se les agrega el evento click y la funcion llamar_ajax, pasando como parametro el objeto <a>
$$('.links').addEvent('click',function(ev){
new Event(ev).stop();
llamar_ajax(this);
});

}

function llamar_ajax (objeto){
var req = new Request.HTML({
//objeto es el <a> al que se dio click, de el obtenemos con la funcion getProperty la propiedad href, para saber que pagina abriremos+
url:objeto.getProperty('href'),
update:$('div_a_actualizar')
});
req.send();
}//fin de llamar_ajax

//Procesamos todos los links inicialmente
links();

});

El Js tiene la funcion links que lo unico que hace es recorrer cada uno de los vinculos (identificados por la clase links) y les asigna la funcion llamar_ajax pasando como parametro el objeto <a> (para eso sirve el “this”).

La función llamar_ajax hace el llamado y toma del <a> que se le paso en la variable objeto la propiedad href para hacer el request.

Pueden verlo funcionando aquí

Si quieren implementarlo solo peguen los codigos donde corresponda y recuerden que esta hecho con la version mas reciente de mootools. Asi que hay que agregarlo a las cabeceras del sitio.