AJAX, páginas web asíncronas

AJAX significa Asynchronous JavaScript and XML (que traduciríamos como JavaScript y XML Asíncronos), es una metodología de desarrollo web que se utiliza para crear páginas web que se actualicen de forma asíncrona. Es decir, sin tener que cargar nuevamente toda la página cada vez que se necesita realizar una acción o recuperar datos del servidor ya que las solicitudes se realizan en segundo plano, de un modo similar a como ocurriría con una aplicación de escritorio.

Se utilizan las habituales solicitudes HTTP para comunicarse con el servidor, lo que permite enviar y recibir datos mediante GET y POST, pero a través de JavaScript. Los navegadores web modernos proporcionan API específicas, como XMLHttpRequest o Fetch API, para facilitar la implementación de AJAX en las aplicaciones web.

Conviene matizar que aunque el nombre incluye XML, podemos utilizar diversos formatos de datos para transmitir información entre el cliente y el servidor, siendo JSON (JavaScript Object Notation) uno de los más comunes debido a su compatibilidad con JavaScript.

Origen

El origen del término «AJAX» lo encontramos allá por 2005 en el artículo «Ajax: A New Approach to Web Applications» (AJAX: Un nuevo enfoque para aplicaciones web) de Jesse James Garrett. En este artículo el autor presentó una serie de tecnologías y técnicas que estaban ganando terreno en el desarrollo web para crear aplicaciones más interactivas y dinámicas. Estas tecnologías incluían JavaScript para realizar solicitudes asíncronas al servidor, el objeto XMLHttpRequest para gestionar esas solicitudes, XML para estructurar los datos transmitidos y HTML junto a CSS para el diseño y la presentación.

A pesar de que el término se popularizó en 2005, las tecnologías que conforman esta aproximación ya existían antes. Por ejemplo, el objeto XMLHttpRequest se introdujo en Internet Explorer 5 en 1999, pero su verdadero potencial se hizo evidente con la adopción de AJAX. Desde entonces, ha sido ampliamente adoptado en el desarrollo web y ha evolucionado con el tiempo. Además, se han desarrollado bibliotecas y frameworks como jQuery, Angular, React y Vue.js, que simplifican el uso y permiten a los desarrolladores crear aplicaciones web aún más avanzadas y dinámicas.

Ventajas

El uso de AJAX en el desarrollo web ofrece varias ventajas y beneficios, lo que lo convierte en una tecnología útil para crear aplicaciones web interactivas y dinámicas. Algunas de sus ventajas serían:

• Mejora de la experiencia del usuario: permite la actualización de contenido en una web sin necesidad de recargar toda la página. Esto crea una experiencia de usuario más fluida y rápida, ya que los usuarios pueden interactuar con la aplicación sin interrupciones.
• Respuesta en tiempo real: proporciona la actualización en tiempo real de datos y notificaciones, lo que es esencial en aplicaciones como chats en línea, feeds de redes sociales y aplicaciones de colaboración.
• Actualización parcial de contenido: puedes actualizar partes específicas de una página sin afectar el resto del contenido. Esto es especialmente útil cuando se trata de aplicaciones complejas con múltiples secciones o componentes.
• Mayor interacción: con AJAX es posible crear aplicaciones web altamente interactivas, como formularios que validan datos en tiempo real, sugerencias de búsqueda instantáneas y elementos desplegables que se cargan dinámicamente.
• Optimización de recursos: al cargar solo los recursos necesarios cuando se solicitan, se puede optimizar el rendimiento de la aplicación y reducir los tiempos de carga.
• Menos carga en el servidor: las solicitudes asíncronas significan que el servidor no tiene que manejar solicitudes innecesarias, lo que puede reducir la carga en el servidor y hacer que las aplicaciones sean más escalables.
• Mejor administración de errores: los errores en solicitudes AJAX se pueden manejar de manera más efectiva, lo que permite a los desarrolladores proporcionar mensajes de error más informativos y ayudar a los usuarios a solucionar problemas.
• Mejora de la usabilidad: las aplicaciones web pueden ofrecer una experiencia más similar a las aplicaciones de escritorio como comentaba al comienzo, lo que puede hacer que los usuarios se sientan más cómodos y productivos al interactuar con ellas.

Inconvenientes

Ahora bien, si por un lado esta metodología tiene grandes ventajas para crear aplicaciones web, también tiene algunos inconvenientes y consideraciones que un desarrollador debe tener en cuenta:

• Problemas de accesibilidad: las aplicaciones web basadas en AJAX pueden presentar desafíos de accesibilidad para usuarios con problemas de visión. Los elementos que se actualizan dinámicamente pueden ser difíciles de interpretar para lectores de pantalla y si no se implementan correctamente, pueden excluir a ciertos usuarios.
• Problemas de SEO: los motores de búsqueda a menudo tienen dificultades para indexar contenido generado dinámicamente a través de AJAX. Si tenemos en cuenta que ciertos contenidos solo se mostrarán tras hacer una petición, esto puede afectar la visibilidad de la página en los resultados en los buscadores.
• Problemas de historial y marcadores: la navegación en una aplicación puede ser más compleja en comparación con una navegación tradicional de página completa. Los desarrolladores deben implementar soluciones para gestionar el historial del navegador y permitir que los usuarios utilicen los marcadores (bookmarks) de manera efectiva. Al producirse toda la interacción en la misma página, el marcador siempre llevará al comienzo del proceso.
• Seguridad: las aplicaciones AJAX deben protegerse contra amenazas de seguridad, como la exposición de datos sensibles o ataques de seguridad como Cross-Site Scripting (XSS) y Cross-Site Request Forgery (CSRF). La manipulación de datos asíncronos debe manejarse de manera segura en el lado del servidor y en el lado del cliente.
• Mayor complejidad en el desarrollo: el desarrollo de aplicaciones web basadas en AJAX puede ser más complejo que las aplicaciones web tradicionales. Requiere un buen manejo de JavaScript y un diseño cuidadoso para garantizar un rendimiento óptimo y una experiencia de usuario fluida.
• Problemas de rendimiento: el uso excesivo de solicitudes puede afectar negativamente el rendimiento de una página web si no se optimiza adecuadamente. Las múltiples solicitudes asíncronas pueden aumentar la carga en el servidor y consumir más ancho de banda.
• Problemas de compatibilidad de navegadores: si bien esta tecnología es compatible con la mayoría de los navegadores modernos, puede haber problemas de compatibilidad con versiones antiguas de navegadores. Esto puede requerir el uso de técnicas de degradación elegante (graceful degradation) o un polyfill para garantizar una experiencia adecuada para todos los usuarios.
• Dependencia de JavaScript: las aplicaciones basadas en AJAX dependen en gran medida de JavaScript. Si un usuario deshabilita JavaScript en su navegador, la funcionalidad de la aplicación se verá seriamente afectada.

En resumen, si bien AJAX es una tecnología poderosa para mejorar la interactividad y la dinámica en las aplicaciones web, es importante abordar estos inconvenientes y consideraciones durante el desarrollo para garantizar una experiencia de usuario robusta y accesible.

---

Referencias:

• Ajax: A New Approach to Web Applications (inglés) – Adaptative Path (artículo archivado)
• Guía de desarrollo web de AJAX – Recursos para desarrolladores de Mozilla
• XMLHttpRequest Standar (inglés) – WHATWG