Ajax más sencillo con jquery-fragments
18/05/2011 || jquery-fragments, Software LibreCualquiera que haya estado desarrollando una web completamente en ajax (es decir que todo el contenido se cargue mediante peticiones ajax sobre la página inicial) se habrá encontrado con el mismo problema: es sencillo cambiar el contenido principal de la web pero cuando hay que cambiar otros contenidos como menús, bloques laterales, etc la cosa se empieza a complicar.
Para cargar los distintos contenidos de la web con jQuery, normalmente se recurre al método load() sobre el bloque que se desea actualizar. Si con esta petición queremos actualizar otros datos podemos recurrir a técnicas más complejas (peticiones que nos devuelven JSON con las zonas/contenidos a cambiar) o simplemente recargar otras zonas de la web que pueden haber cambiado (usando de nuevo el método load() en cada zona que queremos actualizar).
Todo esto es más eficiente que cargar toda la web para cada petición pero nos puede obligar a hacer peticiones inútiles y a tener que programar la carga de cada zona de la web independientemente, lo que es más trabajoso y difícil de mantener.
¿No sería estupendo el poder realizar una sola petición al servidor y que este decida que contenidos deben cambiarse sin tener que escribir una sola linea de javascript?
Pues esto es exactamente lo que hace jquery-fragments.
jquery-fragments permite procesar de una sola petición todos los contenidos los fragmentos que envíe el servidor.
¿Que son los fragmentos?
Para jquery-fragments un fragmento es un bloque de código html delimitado por una sola etiqueta que se corresponde con uno o varios bloques de código del documento original. Por ejemplo esto sería un fragmento:
Contenido principal
Y esto serían dos fragmentos:
Contenido principal cambiado
135
Un fragmento sería el div y otro el span.
Así jquery-fragments considera como un fragmento cada etiqueta de primer nivel que se encuentre en la respuesta a la petición ajax. Cada respuesta puede contener tantos fragmentos como se desee.
¿Y que hace con los fragmentos?
Por cada fragmento el plugin busca el/los elementos que le corresponden en el documento actual y sustituye el contenido. Así para el ejemplo anterior sustituiría el contenido del div con id main_content con el proporcionado en el fragmento; así como todos los span con clase visitantes_online con el contenido de este.
Para hacer estas correspondencias entre los fragmentos recibidos y el contenido existente dispone de una serie de métodos. Todos ellos son configurables, se pueden añadir nuevos o desactivar los existentes, aunque con los proporcionados inicialmente es suficiente para la mayoría de los casos.
¿Y eso es todo?
No. El plugin ofrece funcionalidades mucho más complejas (aunque igualmente sencillas de implementar), permite añadir contenido (antes o después del tag al que corresponde), modificarlo, borrar bloques, añadir scripts, css, etc mediante la asignación de clases especiales a los fragmentos. Permite además activar o desactivar el plugin desde el servidor (mediante cabeceras http) de forma que el mismo servidor notifique al plugin si está enviado fragmentos o respuestas ajax normales.
Uso del plugin
El plugin sobreescribe el método load() de jQuery de forma que se usa de forma transparente. Cuando ejecutas el método load() sobre un selector los tags de destino de los fragmentos se buscarán en los contenidos del selector. Por ejemplo para la siguiente petición:
$("#main").load("my_content.php");
Se buscarían, según los ejemplos anteriores, el div con id main_content así como los span dentro del tag sobre el que se hace la petición (“#main”).
Se ha creado un método $.load() para poder generar llamadas sin especificar un selector y que afecten a todo el documento. De forma que puedes ejecutar:
$.load("my_content.php");
Para cargar los fragmentos en todo el contenido del documento.
Existe además el parámetro de configuración useFullDocument que permite que llamadas a load() sobre un selector tengan efecto sobre todo el documento, esto unido a la activación por cabeceras http permite implementar jquery-fragments en un desarrollo ya existente sin tener que modificar el código javascript existente, sólo las respuestas del servidor.
Accede a la documentación (en inglés) para información detallada sobre el uso del plugin.
Todo esto es un poco lioso, ¿donde puedo ver algunas demos y ejemplos?
Estamos preparando una serie de demos que ilustren y faciliten el entendimiento del uso de plugin además de su integración con otros plugins como jQuery Address para conseguir su máximo potencial.
Licencia
El plugin tiene la misma licencia que jQuery, una licencia dual MIT y GPL. Esto quiere decir que puedes usar el plugin para uso personal o comercial seleccionando la licencia que más te interese.
Enlaces relacionados: