¿Qué es AJAX y Cómo Ayuda a Actualizar el Contenido de una Página?

Aprendamos a redibujar interfaces sin una sola recarga.

Antes, al hacer clic en un enlace, la página se recargaba por completo: la pantalla se ponía blanca por un instante, se reiniciaba la posición de desplazamiento y el usuario tenía que esperar a que se cargara el nuevo contenido. Ahora todo sucede de forma fluida, sin parpadeos ni recargas completas. Esto ha sido posible gracias al desarrollo de tecnologías asíncronas, que permiten intercambiar datos con el servidor en segundo plano.

En este artículo, nos familiarizaremos con una de estas tecnologías, llamada AJAX. Aprenderás qué es y cómo ayuda a crear aplicaciones web interactivas. El material está dirigido a desarrolladores front-end que están aprendiendo JavaScript y se están iniciando en la asincronía.

¿Qué es AJAX y cómo surgió?

AJAX es una tecnología que permite actualizar los datos en una página web sin recargarla completamente. Con AJAX, el navegador puede enviar solicitudes al servidor y recibir nuevos datos en segundo plano, haciendo que los sitios web sean más rápidos y cómodos para los usuarios.

Para que sea más claro, imagina el botón “Me gusta” en cualquier red social. Cuando haces clic en él, el navegador, mediante AJAX, envía una solicitud al servidor para registrar el “Me gusta” y obtener el recuento actualizado. El servidor procesa la solicitud y devuelve el nuevo valor del contador. Solo cambia el número; la página en sí no se recarga.

De la misma manera funcionan otros elementos interactivos del sitio web. Cuando agregas un producto a tu carrito, dejas un comentario, aplicas filtros en el catálogo de una tienda online o cargas nuevas publicaciones al desplazarte por una lista, todo esto se realiza mediante solicitudes AJAX.

AJAX apareció por primera vez en 1999, cuando los desarrolladores de Microsoft lo incorporaron en Internet Explorer 5.0 con el nombre de XMLHttpRequest. En ese momento, la tecnología permitía realizar tareas sencillas, como verificar instantáneamente la disponibilidad de una dirección de correo electrónico al rellenar un formulario de registro. El término “AJAX” se popularizó en 2005, tras la publicación del artículo del UX-designer Jesse James Garrett, “Ajax: A New Approach to Web Applications“.

AJAX (se pronuncia “eyjax”) son las siglas de Asynchronous JavaScript And XML, que en español significa “JavaScript asincrónico y XML“. Así es como Jesse James Garrett explica el término que él mismo introdujo:

AJAX no es una tecnología. En realidad, son varias tecnologías, cada una de las cuales prospera por sí misma, uniéndose en nuevas y potentes formas. AJAX incluye:

• Representación estandarizada usando XHTML y CSS;
• Visualización e interacción dinámicas usando el modelo de objetos del documento;
• Intercambio y manipulación de datos usando XML y XSLT;
• Búsqueda asíncrona de datos usando XMLHttpRequest;
• JavaScript, que lo une todo.

El diagrama de arriba del artículo de Jesse James Garrett muestra la diferencia entre el modelo clásico de aplicaciones web y el modelo AJAX.

En la parte superior se muestra el esquema clásico: cada acción del usuario envía una solicitud al servidor. La respuesta llega después de procesar los datos, y solo entonces se actualiza la interfaz. Mientras el servidor está ocupado, el usuario debe esperar; el sitio parece “congelarse”.

En la parte inferior se muestra el modelo asíncrono: entre la interfaz y el servidor funciona una capa intermedia —el motor AJAX—. Este intercepta las acciones del usuario y determina cuándo dirigirse al servidor. Gracias a esto, la interfaz funciona sin interrupciones ni recargas, y los datos se cargan en segundo plano.

¿Cómo funciona AJAX?

Antes de la aparición de las tecnologías asíncronas, las aplicaciones web funcionaban de forma lenta e incómoda. Por ejemplo, en las tiendas online antiguas, para filtrar los productos, había que hacer clic en el botón “Aplicar“. Después de esto, la página se recargaba completamente: se perdían las configuraciones de los filtros, se reiniciaba el desplazamiento y había que esperar a que todo se cargara de nuevo. El navegador enviaba una solicitud al servidor y recibía a cambio una página HTML completamente nueva con todo su contenido y diseño.

Imagina un café antiguo y abarrotado. Te acercas a la caja, haces tu pedido, pagas y simplemente esperas a que lo preparen. Durante todo este tiempo, no puedes buscar una mesa libre ni hablar con tus amigos. Simplemente esperas. Así funcionaban muchos sitios web en un pasado no muy lejano: cada acción ralentizaba todo el proceso.

Pero con la llegada de AJAX, cada usuario podía trabajar libremente con la interfaz cargada mientras los nuevos datos se cargaban en segundo plano. JavaScript en el navegador envía una solicitud asíncrona y recibe del servidor solo la información que realmente necesita.

Por ejemplo, cuando seleccionas parámetros en el filtro de una tienda online (precio, talla, color) y haces clic en “Aplicar”, el navegador envía una solicitud al servidor a través de AJAX. Como respuesta, solo llega la lista actualizada de productos coincidentes, que JavaScript muestra inmediatamente en la página. Los filtros permanecen activos, el desplazamiento no se reinicia y puedes seguir interactuando con la página.

Ahora imagina un café nuevo y espacioso. Haces tu pedido, recibes un número y te dedicas a tus asuntos: buscas una mesa, hablas con tus amigos, navegas por las redes sociales en tu teléfono. Cuando el pedido está listo, simplemente te llaman por el número. La interacción no se interrumpe: todo ocurre en paralelo, sin esperas ni pausas. Así funcionan los sitios web modernos.

Arriba, el diagrama del artículo de Jesse Garrett que muestra cómo se intercambian los datos en el modelo web clásico y con el uso de AJAX.

A la izquierda, el enfoque tradicional. Con cada acción del usuario, el navegador envía una petición HTTP y recibe como respuesta una página HTML completamente preparada. La interfaz y los datos llegan en un solo “paquete”.

A la derecha, el modelo AJAX. La interfaz ya está cargada, y JavaScript envía peticiones en segundo plano al servidor a través del motor AJAX integrado. El servidor responde con solo los datos necesarios en formato JSON o XML, en lugar de una página HTML completa. Estos datos se insertan directamente en la interfaz, y la página se actualiza sin una recarga completa.

Herramientas para trabajar con AJAX

La tecnología AJAX se basa en el objeto XMLHttpRequest (XHR), una API especial del navegador que actúa como intermediario entre el código JavaScript de la página y el servidor. Es lo que permite enviar y recibir datos en segundo plano sin interrumpir el funcionamiento de la interfaz. Mientras se ejecuta una solicitud XHR, puedes seguir interactuando con el sitio web; ahí radica la asincronidad.

A pesar de la palabra XML en el nombre XMLHttpRequest, el AJAX moderno admite diferentes formatos de datos, desde fragmentos JSON y HTML hasta texto plano y archivos binarios. Sin embargo, con mayor frecuencia el servidor responde en formato JSON: es más ligero en tamaño, JavaScript lo procesa más rápido y, en esencia, se ha convertido en el estándar en las aplicaciones web modernas.

Lee también: JSON: ¿Qué es este Formato y Cómo Trabajar con Él?

Para simplificar el trabajo con AJAX, los desarrolladores han creado muchas herramientas. A continuación, veremos las principales y, para mayor claridad, mostraremos cómo se puede usar para enviar una solicitud al servidor en la dirección https://api.example.com/data. Esta dirección es solo una simulación, no funciona en realidad. Simplemente compararemos la sintaxis de los diferentes enfoques, y podrás probar las solicitudes reales en la siguiente sección.

XMLHttpRequest: Método clásico para trabajar con AJAX, compatible con todos los navegadores. Permite controlar manualmente cada etapa de la solicitud, desde su envío hasta el procesamiento de la respuesta. Sin embargo, la sintaxis resulta bastante engorrosa para el trabajo diario.

const xhr = new XMLHttpRequest(); // Creamos un objeto de solicitud
xhr.open('GET', 'https://api.example.com/data'); // Especificamos el método y la URL de la solicitud
xhr.onload = function () { // Añadimos un manejador para una respuesta exitosa
  if (xhr.status === 200) { // Verificamos el estado de la respuesta
    console.log(xhr.responseText); // Mostramos los datos recibidos
  }
};
xhr.send(); // Enviamos la solicitud

Lea también: ¿Qué es el Formato XML y Dónde se Utiliza?

jQuery: durante mucho tiempo considerada una de las bibliotecas más populares para trabajar con AJAX. Surgió en la época de navegadores incompatibles y simplificó significativamente el trabajo de los desarrolladores, proporcionando una interfaz unificada para interactuar con el DOM y las solicitudes asíncronas.

Por ejemplo, el método $.ajax() proporciona un control flexible de las solicitudes con una sintaxis más simple e intuitiva que XMLHttpRequest:

$.ajax({
  url: 'https://api.example.com/data', // Añadimos la URL de la solicitud
  method: 'GET', // Especificamos el tipo de solicitud
  success: function (data) { // Indicamos qué hacer con los datos recibidos
    console.log(data);
  }
});

Fetch API: herramienta moderna integrada para enviar solicitudes AJAX. Forma parte del estándar JavaScript y no requiere la conexión de bibliotecas externas, por lo que es ideal para nuevos proyectos.

A diferencia de XMLHttpRequest, Fetch utiliza Promise: objetos especiales para trabajar con código asíncrono. Las promesas permiten evitar la compleja anidación de funciones de devolución de llamada (callbacks), lo que hace que el código sea difícil de leer.

Así se ve aproximadamente una acumulación de código con callbacks:

callback1(() => {
  callback2(() => {
    callback3();
  });
});

Y así se ve el mismo código con Promise:

doSomething()
  .then(doNext)
  .then(doFinal);

Usamos Fetch para nuestra solicitud GET:

fetch('https://api.example.com/data') // Enviamos una solicitud GET
  .then(response => response.json()) // Convertimos la respuesta a un objeto JavaScript (si llegó en formato JSON)
  .then(data => console.log(data)); // Mostramos los datos recibidos

Axios: herramienta moderna para enviar solicitudes al servidor basada en promesas. Funciona tanto en el navegador como en el entorno Node.js. En comparación con Fetch API, Axios ofrece más funciones: por ejemplo, conversión automática de datos JSON, protección integrada contra ataques XSRF y un sistema conveniente para manejar errores a través de interceptores:

axios.get('https://api.example.com/data') // Enviamos una solicitud GET
  .then(response => console.log(response.data)); // Obtenemos los datos directamente en el formato requerido

Solicitudes AJAX

Para comprender mejor el funcionamiento de AJAX, consideremos algunos ejemplos simples. Como herramienta, utilizaremos JSONPlaceholder: una API de prueba gratuita diseñada específicamente para la formación. Permite enviar y recibir datos falsos, simulando así el comportamiento de un servidor real.

Ve al sitio web indicado, abre la consola e inserta este código:

fetch('https://jsonplaceholder.typicode.com/posts')
  .then(response => response.json())
  .then(data => console.log(data));

El servidor devolverá un array con 100 publicaciones falsas:

Ahora, para comparar, puede insertar un código ligeramente modificado y obtener una sola publicación:

fetch('https://jsonplaceholder.typicode.com/posts/1')
  .then(response => response.json())
  .then(data => console.log(data));

De manera similar, puede realizar otras solicitudes: obtener una lista de usuarios, comentarios, crear nuevas entradas o actualizar las existentes. Por ejemplo, mediante una solicitud POST de prueba, puede enviar una publicación falsa; el servidor simulará su almacenamiento y devolverá un objeto con un ID único, la hora de creación de la entrada y el estado de la operación. Encontrará otros ejemplos de rutas (endpoints) y formatos de solicitud en la documentación de JSONPlaceholder.

Después de dominar los ejemplos básicos, pase a sus propios experimentos. Por ejemplo, intente obtener publicaciones de un usuario específico, crear una entrada con sus datos o filtrar comentarios por correo electrónico. Esta práctica le ayudará a comprender mejor la estructura de la API y prepararse para trabajar con solicitudes AJAX en proyectos reales.

Qué sigue

Ahora que te has familiarizado con la tecnología AJAX, puedes seguir adelante. Aquí hay algunos artículos que te ayudarán a comprender mejor el trabajo con solicitudes asíncronas:

• “Cómo convertir un documento HTML en JSON: escribimos un programa funcional en JavaScript“: este material te presentará el formato JSON, que se utiliza con más frecuencia en las solicitudes AJAX.
• “Creamos un chat para un sitio web: HTML, JS, PHP y AJAX“: aquí crearás un chat simple con intercambio de mensajes sin recargar la página.
• “Carga de archivos en un sitio web: PHP, AJAX, HTML5 y Drag’n’Drop“: en este artículo, aprenderás a crear un formulario de carga de archivos con la función de arrastrar y soltar y el envío a través de AJAX, y cómo procesar los datos cargados del lado del servidor usando PHP.

Si tienes alguna dificultad mientras trabajas en tus proyectos, te ofrecemos algunos recursos e instrumentos útiles:

• MDN Web Docs: AJAX: artículo introductorio sobre el trabajo con AJAX de Mozilla con ejemplos claros y una explicación detallada de los conceptos básicos.
• Ajax | jQuery API Documentation: documentación oficial sobre los métodos AJAX en jQuery con ejemplos de uso.
• Axios Docs: documentación oficial sobre el trabajo con Axios en español con ejemplos y una descripción de todas las capacidades de la biblioteca.
• Public APIs: una gran lista de APIs públicas gratuitas con las que puedes practicar el trabajo con solicitudes de red.
• HTTPbin: servicio para probar solicitudes HTTP con soporte para diferentes métodos y formatos de datos.
• Postman: una herramienta popular para probar APIs con una interfaz gráfica. Con su ayuda, puedes crear y enviar solicitudes HTTP, automatizar las pruebas, así como organizar las solicitudes en colecciones y compartirlas con el equipo.
• JSON Server: una herramienta conveniente para crear rápidamente una API REST de prueba basada en un archivo JSON. Puede usarse para prototipado y prueba de aplicaciones web.