El término Javascript y XML asíncrono (AJAX) suena como un bocado, pero describe un concepto simple: actualizar partes de una página web sin recargarla por completo.
Antes de esto, si querías nuevos datos, esperabas. Hiciste clic en un enlace. La pantalla se congeló. La página se volvió blanca. Luego todo se cargó nuevamente.
AJAX cambió eso. Permitió a los navegadores comunicarse con los servidores en segundo plano. Puede escribir una consulta de búsqueda y ver los resultados aparecer al instante. Sin recarga. Sin pantalla blanca. Sólo datos.
Este no fue un invento nuevo. Fue una combinación de herramientas existentes utilizadas de una manera nueva.
Las tecnologías centrales detrás del diseño web asincrónico
AJAX no es una sola tecnología. Es un flujo de trabajo. Se basa en la coordinación de tecnologías web estándar.
En el centro está el objeto XMLHttpRequest. Esta es una característica de JavaScript incorporada. Permite que los scripts del lado del cliente inicien solicitudes HTTP (como GET o POST) a un servidor. El navegador envía la solicitud. No espera la respuesta antes de continuar renderizando la página. Esta es la parte “asíncrona”.
Una vez que el servidor responde, JavaScript toma los datos. Lo analiza. Actualiza el modelo de objetos de documento (DOM). El usuario ve el cambio sin siquiera salir de la página.
“AJAX se distingue por una arquitectura donde el código del lado del cliente organiza la recuperación, interpretación y adaptación de visualización de datos en tiempo real, sin recarga general ni pérdida de interactividad”.
Durante mucho tiempo, estos datos llegaron en formato XML. De ahí el nombre. XML es detallado. Es pesado.
Más tarde, JSON (JavaScript Object Notation) tomó el relevo. JSON es más ligero. Es más fácil de procesar para JavaScript. Los marcos modernos como jQuery y fetch API han hecho que estas solicitudes sean aún más sencillas de administrar. Pero el principio básico sigue siendo: desacoplar la interfaz de usuario de la comunicación con el servidor.
Por qué solía ser importante la compatibilidad del navegador
Al principio esto era difícil.
No todos los navegadores admiten XMLHttpRequest. O lo implementaron de otra manera.
Internet Explorer 5 y superiores finalmente se pusieron al día. Mozilla Firefox hizo lo mismo. Safari y Chrome se unieron a la fiesta más tarde. Hoy en día, todos los navegadores modernos admiten estas funciones de forma nativa.
Esta convergencia permitió a los desarrolladores crear interacciones complejas que funcionaron en todas partes. Antes de esto, tenías que escribir código hacky para que las cosas funcionaran en Firefox pero no en IE. O viceversa.
Ahora, la atención se centra en la lógica, no en los trucos de compatibilidad.
Aplicaciones del mundo real que definen la experiencia
Has usado AJAX mil veces. Probablemente no pienses en eso.
Considere Gmail. Cuando abres una bandeja de entrada, no recargas la página para leer un nuevo correo electrónico. El cliente recupera los mensajes más recientes en segundo plano. Puede arrastrar, eliminar o archivar. La página se queda ahí. Los datos se actualizan.
Windows Live Hotmail hizo algo similar desde el principio. Google Maps lo usa constantemente. Desplazas el mapa. El navegador solicita nuevos mosaicos de mapas. Aparecen al instante. No esperas a que se cargue la página completa.
LiveSearch es un ejemplo clásico. A medida que escribe palabras clave, el motor de búsqueda consulta el servidor. Los resultados se despliegan. Haces clic en uno. La página salta al resultado. Todo esto sucede mediante llamadas AJAX.
Las aplicaciones son infinitas.
- Secciones de comentarios dinámicas.
- Formularios de guardado automático
- Tickers de acciones en tiempo real
- Feeds de desplazamiento infinito
Estas características crean una sensación de “aplicación de una sola página”. El sitio se comporta más como una aplicación de escritorio. Se siente ágil. Se siente vivo.
El cambio hacia aplicaciones de página única (SPA)
AJAX allanó el camino para los SPA.
En un sitio web tradicional, cada clic es una carga de página nueva. El navegador descarta el DOM antiguo y crea uno nuevo.
En un SPA, se carga la página inicial. JavaScript maneja toda la navegación posterior. Intercambia contenido dinámicamente. La URL puede cambiar, pero la página no se recarga.
Esto requiere un código del lado del cliente más complejo. Necesitas gestionar el estado. Necesitas manejar el enrutamiento. Pero la experiencia del usuario es superior.
Las redes sociales dependen de esto. Cuando publicas una actualización de estado, el feed se actualiza. Se carga tu foto de perfil. Aparecen notificaciones. Nada de esto requiere una recarga completa.
El legado del intercambio de datos asincrónico
Las siglas AJAX están algo desactualizadas. Los desarrolladores rara vez utilizan el término hoy en día. Simplemente lo llamamos “desarrollo web”.
Pero la tecnología sigue viva. XMLHttpRequest se reemplaza en gran medida por la API fetch. JSON es el formato de datos estándar.
El impacto es innegable. Aumentó las expectativas de los usuarios. Ahora esperamos comentarios instantáneos. Esperamos transiciones fluidas. Esperamos que las aplicaciones web se sientan como software nativo.
Si un sitio se recarga cada vez que haces clic en un botón, se siente roto. Se siente viejo.
AJAX demostró que la web puede ser más que documentos estáticos. Podría ser una plataforma para aplicaciones complejas e interactivas.
La evolución no se detuvo ahí. Marcos como React, Angular y Vue se han construido sobre estos cimientos. Automatizan las actualizaciones de DOM. Ellos manejan el estado.
Pero la idea central es la misma.
Habla con el servidor en segundo plano. Actualiza la pantalla. Mantenga al usuario en movimiento.
Todavía estamos refinando esto. Rollos infinitos. Colaboración en tiempo real. Vistas previas en vivo. Las posibilidades siguen en gran medida sin explotar.
¿Qué viene después? Probablemente menos clics. Más transmisión. Más inmediatez.
La página permanece. Los datos se mueven.
AJAX no es mágico. Es una compensación.
Obtienes velocidad. Obtienes interfaces de usuario fluidas. Pero también te dan dolores de cabeza.
El mayor punto de fricción no es el código. Es seguridad. Específicamente, la Política del Mismo Origen (SOP). De forma predeterminada, los navegadores bloquean las solicitudes AJAX. Solo hablan con el dominio en el que se encuentra actualmente el usuario. Esto evita que un script malicioso en evil.com robe datos del sitio de su banco. Es un muro duro.
Pero los desarrolladores necesitaban romper ese muro.
Ingrese CORS (intercambio de recursos entre orígenes). Es el mecanismo que permite que diferentes dominios se comuniquen entre sí. Lo configuras en el servidor. Si lo haces mal, expones datos. Si lo hace bien, habilitará aplicaciones modernas y distribuidas. El listón está alto. La configuración debe ser rigurosa.
Luego está el historial del navegador.
Cuando actualiza una página sin recargarla, la URL no cambia. O lo hace, pero el usuario no lo sabe. Contener.” No pasa nada. O peor aún, la página se recarga y pierde todo el estado. Esto rompe el modelo mental del usuario.
Tienes que arreglarlo.
Administre explícitamente la pila del historial. Utilice la API de historial HTML5. Estados de empuje. Escuche los estados pop. Es tedioso. Es necesario. Antes de eso, la gente usaba hashbangs (#! ). Funcionó. Pero fue complicado.
La accesibilidad es otra trampa.
El contenido dinámico no siempre se anuncia a los lectores de pantalla. Si intercambia texto a través de AJAX, es posible que la tecnología de asistencia no se dé cuenta. Necesita actualizar los atributos ARIA. Necesitas desencadenar eventos. De lo contrario, estará creando un sitio que sólo funciona para usuarios de mouse.
El panorama está cambiando.
fetch se hace cargo de las solicitudes XHR sin procesar. Utiliza Promesas. Está más limpio. Es moderno. WebSockets agrega comunicación bidireccional en tiempo real. Ya no es necesario realizar encuestas. Recibes actualizaciones enviadas.
Pero AJAX sigue siendo la base.
Introdujo el patrón. Asincrónico. Modular. Sin bloqueo.
La nube se movió. El móvil se hizo cargo. Las aplicaciones web progresivas (PWA) exigían capacidades y velocidad fuera de línea. Todos se apoyan en esos principios básicos.
¿AJAX está muerto? No.
Es sólo la capa debajo de las herramientas más nuevas. La sala de máquinas.
Los desarrolladores todavía optimizan para ello. Todavía les importa la gestión estatal que nos obligó a resolver. ¿La innovación en ingeniería de interfaces? Está construido sobre esa base histórica.
Seguimos perfeccionando la experiencia. El objetivo sigue siendo el mismo.
Rápido. Sensible. Discreto.
Pero ahora hay más en juego. La seguridad es más estricta. Los usuarios esperan un comportamiento nativo. Y el código tiene que ser accesible para todos.
Es un acto de equilibrio constante. Uno que realmente nunca terminas.
