HIJAX con JQuery

By | 20 julio 2011

HIJAX no es ninguna tecnología, se trata mas bien de una metodología de programación para fomentar la accesibilidad en nuestras aplicaciones web, aunque cada día menos, aun quedan exploradores sin javascript o con javascript deshabilitado, y si programamos una aplicación dependiente de javascript estamos renunciando automáticamente a ese potencial grupo de usuarios (por pequeño que sea).

En esta entrada os voy a explicar como con JQuery podemos realizar una función/conjunto de funciones muy simples  que de forma no intrusiva (cabe recalcar esta cuestión) nos facilitan enormemente esta tarea.

Imaginaros que tenemos el siguiente enlace.

<a href="/programacionj2ee/miejemplo/">Mi Ejemplo</a>

Se trata de un enlace HTML ordinario, al hacer click sobre él nuestro navegador solicitara al servidor el recurso especificado en el atributo href.

Ahora es cuando haremos uso del potencial de JQuery y de una función que os explicare a continuacion, primero la funcion:

 $(document).ready(function(){
     $('a').click(function() {
         $.ajax({type: 'POST',
             url: 'ajax/' + $(this).attr('href'),
             error: function(xhr, ajaxOptions, thrownError) {
                 // Código si error.
             },
             success: function(response) {
                 // Código si la operación se ha realizado correctamente.
             return false;
             }
         })
         return false;
         });
 });
 

 Como veis, es una función que captura el evento click sobre cualquier elemento a de nuestra pagina, ejecuta un JQAJAX al que se le especifican los parámetros necesarios, en el caso de esta función, el método POST y la dirección del recurso extraído con JQuery del atributo href al que he añadido el prefijo “/ajax” para así poder diferenciar en la llamada que se trata de una operación AJAX, y no de una llamada ordinaria y así poder presentar la vista que proceda.

Comparte esta entrada enShare on LinkedIn0Tweet about this on Twitter0Share on Facebook0Share on Google+0

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos necesarios están marcados *