Un gran número de sitios web ya utilizan AJAX para cargar y actualizar sus contenidos (Facebook, Tuenti, y la mayor parte de las aplicaciones de Google: Calendar, Gmail, Docs…). Con estas tecnologías, mejoramos de forma considerable la experiencia del usuario, y disminuimos en parte la carga del servidor, al ser menor la cantidad de datos que tiene que devolver en cada petición.

En este articulo me voy a centrar en la librería jQuery, ya que es una de las más importantes, y con la que más he trabajado. Aun así disponemos de otras muchas librerías como pueden ser: Prototype, Dojo o YUI entre otras.

Ventajas de usar una librería como jQuery.

La mayor ventaja del uso de una librería como jQuery para trabajar con AJAX reside principalmente en la gran cantidad de código que podemos ahorrar.

Gracias a jQuery podemos reducir el código JavaScript que necesitamos para alterar elementos en nuestra página web, realizar animaciones, cargar contenidos en AJAX (haciendo peticiones tanto GET como POST), cambiar estilos CSS… y en la mayoría de las ocasiones, nos llevara poco mas de una linea de código.

Otra de las ventajas que obtenemos del uso de jQuery en lugar de escribir código JavaScript sin ayuda, es que ganamos en compatibilidad con los navegadores, ya que el equipo de desarrollo de jQuery ya ha tenido en cuenta las distintas sintaxis y particularidades de cada navegador.

Paso a mostrar dos ejemplos de como podríamos hacer una petición AJAX al servidor, tanto con jQuery como sin el.

Sin usar jQuery (Ejemplo extraído de w3schools):

Usando jQuery:

Inconvenientes de cargar contenidos usando AJAX.

Cuando realizamos cargas de contenido mediante AJAX, nos estamos apoyando en JavaScript, por lo que los navegadores que no soporten JavaScript no podrán visualizar correctamente el contenido.

Otro de los inconvenientes de este tipo de cargas de contenido esta relacionado con el posicionamiento de la página en los buscadores. Al realizar las cargas de forma dinámica, los robots de los buscadores no son capaces de visualizar el contenido ya que este se carga con JavaScript.

Estos dos inconvenientes quedan solventados en su mayor parte con el uso de la función pushState(), cuyo funcionamiento expliqué hace unos días en este articulo: Cambiar URL mediante JavaScript.

Tras cambiar la URL con esta función, seria necesario editar nuestro fichero .htaccess para conseguir que si alguien accede directamente a una URL cargada de forma asíncrona, cargue los contenidos adecuados. De la misma forma, deberíamos cambiar tanto el titulo de la página como la descripción cuando recibamos los datos pedidos por AJAX.

Conclusiones.

Las páginas web que hacen uso de jQuery consiguen una gran mejora. Son páginas más agradables para el usuario, y necesitan un menor tiempo para ser cargadas, ya que elementos estáticos de la página como pueden ser el menú, el fondo o el píe de página se encuentran cargados desde un principio.

Por contra, requiere un mayor desarrollo para que el sitio funcione adecuadamente. Es necesario programar las funciones JavaScript que cargar los contenidos, y modificar la descripción y titulo de la página. Al mismo tiempo es necesario realizar la programación para que nuestro servidor devuelva la página completa si no es pedida mediante AJAX.