¿Qué es Ajax? — Comunicación web asíncrona

Al finalizar este tema

Comprenderá el principio de Ajax, que permite intercambiar datos con el servidor sin recargar la página, y podrá enviar solicitudes GET/POST mediante la API fetch.

El problema de la recarga

En la web tradicional, al solicitar algo al servidor, se volvía a cargar toda la página. Al escribir un término de búsqueda y presionar Enter, la pantalla parpadeaba en blanco mientras se cargaba por completo la nueva página de resultados.

Google es diferente. Al escribir un término de búsqueda, las sugerencias aparecen debajo. La página no se recarga. Esto es Ajax: obtener solo los datos necesarios del servidor sin volver a cargar la página.

Ajax son las siglas de Asynchronous JavaScript and XML; hoy en día se utiliza JSON en lugar de XML. Por lo tanto, el nombre ha quedado como un vestigio histórico.

El método antiguo — XMLHttpRequest

const xhr = new XMLHttpRequest();
xhr.open('GET', '/api/users');
xhr.onreadystatechange = function () {
  if (xhr.readyState === 4 && xhr.status === 200) {
    const data = JSON.parse(xhr.responseText);
    console.log(data);
  }
};
xhr.send();

Como pueden ver, es un proceso engorroso. Es necesario verificar el valor de readyState, comprobar el código de estado y analizar la respuesta directamente. Si este código se anida dentro de funciones de devolución de llamada, se produce lo que se conoce como "infierno de devoluciones de llamada".

Estándar actual: API fetch

const response = await fetch('/api/users');
const data = await response.json();
console.log(data);

Son tres líneas. Dado que fetch devuelve una promesa, se integra de forma natural con async/await.

GET — Obtener datos

async function getUsers() {
  const res = await fetch('/api/users');

  if (!res.ok) {
    throw new Error(`HTTP ${res.status}`);
  }

  const users = await res.json();
  return users;
}

Punto importante: fetch no rechaza las solicitudes, incluso si se producen errores 404 o 500. Solo las rechaza en caso de errores de red (fallo en la conexión al servidor). Por lo tanto, es necesario verificar directamente si res.ok se encuentra en el rango de 200 a 299.

POST — Enviar datos

async function createUser(name, email) {
  const res = await fetch('/api/users', {
    method: 'POST',
    headers: {
      'Content-Type': 'application/json',
    },
    body: JSON.stringify({ name, email }),
  });

  if (!res.ok) {
    throw new Error(`HTTP ${res.status}`);
  }

  return await res.json();
}

Convierte los datos que se van a insertar en body a una cadena mediante JSON.stringify y establece el valor de Content-Type en application/json. Si falta este encabezado, el servidor no interpretará el cuerpo como JSON.

Patrón práctico: carga, error y éxito

const resultDiv = document.getElementById('result');

async function loadUsers() {
  resultDiv.textContent = 'Cargando...';

  try {
    const res = await fetch('/api/users');
    if (!res.ok) throw new Error(`Error del servidor: ${res.status}`);

    const users = await res.json();
    resultDiv.textContent = users
      .map(u => `${u.name} (${u.email})`)
      .join('\n');
  } catch (err) {
    resultDiv.textContent = `Error: ${err.message}`;
  }
}

Este patrón de gestionar tres estados (cargando, éxito, error) es común en el desarrollo frontend. En React, se implementa con useState, y en Vue, con ref, creando estructuras similares.

Comparación entre fetch y XMLHttpRequest

Errores comunes

1. Omisión de Content-Type: En una solicitud POST, si no se incluye headers, el servidor no podrá analizar req.body.
2. Llamada doble a .json(): res.json() solo se puede llamar una vez. El stream del cuerpo se agota después de la primera lectura.
3. Error de CORS: Al realizar una solicitud fetch a un dominio diferente, el navegador la bloqueará. El servidor debe configurar la cabecera Access-Control-Allow-Origin.

Puntos clave

Ajax es una tecnología que permite intercambiar datos con el servidor sin necesidad de recargar la página. En la web moderna, la combinación de fetch API y async/await es el estándar. fetch solo rechaza en caso de errores de red, por lo que es imprescindible verificar res.ok.