XMLHttpRequest en JavaScript

Descubre cómo dominar XMLHttpRequest para gestionar peticiones asíncronas en tus proyectos. En esta guía técnica exploraremos desde la instancia del objeto XHR hasta el manejo de respuestas complejas. No te pierdas los detalles exclusivos que optimizarán tu flujo de trabajo hoy mismo.

1 ¿Qué es XMLHttpRequest en JavaScript?

XMLHttpRequest es un objeto integrado en los navegadores que permite realizar peticiones HTTP a servidores web de forma asíncrona.

Aunque su nombre incluye «XML», hoy en día se utiliza para transferir cualquier tipo de dato (JSON, texto plano, HTML, etc.). Es la pieza fundamental que dio origen a lo que conocemos como AJAX (Asynchronous JavaScript and XML).

En otras palabras:
Es una interfaz incorporada en JavaScript que permite que una página web se comunique con un servidor sin necesidad de recargar toda la página.

1.1. ¿Para qué sirve?

Su propósito principal es actualizar partes de una página web sin interrumpir lo que el usuario está haciendo. Algunos ejemplos comunes son:

• Obtener información desde una API.
• Enviar datos de un formulario al servidor.
• Actualizar partes del DOM dinámicamente.
• Cargar contenido de forma asíncrona.

Por ejemplo, cuando haces clic en un botón y aparecen nuevos datos en la página sin que el navegador se recargue completamente, normalmente se está usando XMLHttpRequest o una alternativa moderna como Fetch API.

1.2. Flujo básico de funcionamiento:

1. Crear una instancia de XMLHttpRequest.
2. Configurar la petición indicando el método y la URL.
3. Enviar la petición al servidor.
4. Esperar la respuesta.
5. Usar la respuesta para modificar el DOM.

1.3. Ejemplo:

// 1. Crear el objeto XMLHttpRequest
const xhr = new XMLHttpRequest();

// 2. Configurar la petición
xhr.open("GET", "https://api.ejemplo.com/usuarios");

// 3. Ejecutar código cuando llegue la respuesta
xhr.onload = function () {
  // 4. Verificar que la petición fue exitosa
  if (xhr.status === 200) {
    // 5. Mostrar la respuesta en consola
    console.log(xhr.responseText);
  }
};

// 6. Enviar la petición
xhr.send();Lenguaje del código: JavaScript (javascript)

1.4. XHR vs. Fetch API: El cambio de guardia

Es importante mencionar que, aunque XMLHttpRequest sigue siendo funcional y lo verás en mucho código antiguo (o librerías como Axios),la mayoría de los desarrolladores modernos prefieren la Fetch API.

• XHR: Basado en eventos y un poco verboso (necesitas escribir más código).
• Fetch: Basado en Promesas, lo que hace que el código sea mucho más limpio y fácil de leer.

NOTA!!: Si estás manteniendo un proyecto viejo, dominar XHR es vital. Si estás construyendo algo nuevo, fetch suele ser el camino a seguir, pero entender XHR te da una base sólida de cómo funciona la comunicación cliente-servidor.

2. ¿Cómo usar XMLHttpRequest? Paso a paso

1. Crear una instancia
2. Configurar la petición con open()
3. Preparar qué hacer cuando llegue la respuesta
4. Manejar posibles errores de red
5. Enviar la petición con send()

A continuación veremos un resumen de estos pasos y luego iremo ampliando sobre cada uno de ellos!

1️⃣ Crear una instancia de XMLHttpRequest

// Crear el objeto que se encargará de hacer la petición HTTP
const xhr = new XMLHttpRequest();Lenguaje del código: JavaScript (javascript)

2️⃣ Configurar la petición con open()

// open(método, URL, asíncrona)
// GET = obtener datos
xhr.open("GET", "https://jsonplaceholder.typicode.com/users", true);Lenguaje del código: JavaScript (javascript)

• Primer parámetro: método HTTP (GET, POST, PUT, DELETE)
• Segundo parámetro: URL del recurso
• Tercer parámetro: true para que sea asíncrona

3️⃣ Preparar qué hacer cuando llegue la respuesta

// Se ejecuta cuando la petición termina
xhr.onload = function () {
  // Verificar si el servidor respondió correctamente
  if (xhr.status === 200) {
    console.log("Petición exitosa");
    console.log(xhr.responseText);
  } else {
    console.log("Ocurrió un error:", xhr.status);
  }
};Lenguaje del código: JavaScript (javascript)

4️⃣ Manejar posibles errores de red

// Se ejecuta si no se puede conectar con el servidor
xhr.onerror = function () {
  console.log("Error de red o servidor no disponible");
};Lenguaje del código: JavaScript (javascript)

5️⃣Enviar la petición con send()

// En GET normalmente se envía vacío
xhr.send();Lenguaje del código: JavaScript (javascript)

6️⃣ Flujo completo de una petición HTTP con XMLHttpRequest

// 1. Crear la instancia
const xhr = new XMLHttpRequest();

// 2. Configurar la petición
xhr.open("GET", "https://jsonplaceholder.typicode.com/users", true);

// 3. Esperar la respuesta
xhr.onload = function () {
  // Si la respuesta fue correcta
  if (xhr.status === 200) {
    // Convertir el texto JSON en un array de objetos
    const usuarios = JSON.parse(xhr.responseText);

    // Mostrar los datos en consola
    console.log(usuarios);
  } else {
    console.log("Error HTTP:", xhr.status);
  }
};

// 4. Capturar errores de red
xhr.onerror = function () {
  console.log("No se pudo realizar la petición");
};

// 5. Enviar la petición
xhr.send();Lenguaje del código: JavaScript (javascript)

2.1. Crear una instancia

El primer paso para realizar una petición HTTP en JavaScript es crear una instancia de XMLHttpRequest. Este objeto es el que permite que tu aplicación web se comunique con un servidor para enviar o recibir datos sin necesidad de recargar la página.

Para crear la instancia, debes usar la palabra clave new seguida del constructor XMLHttpRequest():

// Crear una nueva instancia de XMLHttpRequest
const xhr = new XMLHttpRequest();Lenguaje del código: JavaScript (javascript)

Una vez creada esta instancia, la variable xhr contendrá todos los métodos y propiedades necesarios para configurar y enviar la petición HTTP.

Por ejemplo, con esa instancia luego podrás:

• Definir el tipo de petición (GET, POST, etc.).
• Especificar la URL del servidor o API.
• Enviar datos al servidor.
• Recibir y procesar la respuesta.
• Mostrar la información obtenida dentro del DOM.

Crear la instancia siempre es el primer paso antes de usar métodos como open() y send(). Sin este objeto, no es posible realizar una petición HTTP con XMLHttpRequest en JavaScript.

2.2. Configurar la petición con open()

Después de crear una instancia de XMLHttpRequest, el siguiente paso es configurar la petición HTTP utilizando el método open().

Este método indica:

• Qué tipo de petición vas a realizar.
• A qué URL se enviará la solicitud.
• Si la petición será asíncrona o no.

La sintaxis básica es:

// open(método, URL, asíncrona)
xhr.open("GET", "https://api.ejemplo.com/usuarios", true);Lenguaje del código: JavaScript (javascript)

Cada parámetro cumple una función específica:

1. GET:
   • Es el método HTTP que se utilizará. Se usa para obtener datos desde un servidor.
2. "https://api.ejemplo.com/usuarios":
   • Es la URL o endpoint al que se enviará la petición.
3. true:
   • Indica que la petición será asíncrona, lo que permite que la página siga funcionando mientras espera la respuesta del servidor.

Los métodos HTTP más utilizados al configurar una petición con open() son:

• GET: obtener datos.
• POST: enviar datos.
• PUT: actualizar datos existentes.
• DELETE: eliminar datos.

Ejemplo con una petición POST:

// Configurar una petición POST para enviar información
xhr.open("POST", "https://api.ejemplo.com/usuarios", true);Lenguaje del código: JavaScript (javascript)

Es importante recordar que open() únicamente configura la petición, pero todavía no la envía. La solicitud recién se realiza cuando se ejecuta send().

// Primero se configura la petición
xhr.open("GET", "https://api.ejemplo.com/usuarios", true);// Después se envía
xhr.send();Lenguaje del código: JavaScript (javascript)

Configurar correctamente la petición es fundamental para que XMLHttpRequest pueda comunicarse con el servidor correcto y utilizar el método HTTP adecuado.

2.3. Preparar qué hacer cuando llegue la respuesta

Una vez que configuras la petición con open(), el siguiente paso al trabajar con XMLHttpRequest es indicar qué debe hacer tu código cuando el servidor responda.

La forma más común de hacerlo es utilizando la propiedad onload. Esta función se ejecuta automáticamente cuando la petición HTTP finaliza y la respuesta ha sido recibida correctamente.

// Se ejecuta cuando la respuesta del servidor llega
xhr.onload = function () {
  console.log("La petición terminó");
};Lenguaje del código: JavaScript (javascript)

Sin embargo, no basta con saber que la petición terminó. También es importante verificar si el servidor respondió correctamente mediante la propiedad status.

xhr.onload = function () {
  // Verificar si la respuesta fue exitosa
  if (xhr.status === 200) {
    console.log("Petición realizada correctamente");
  } else {
    console.log("Error HTTP:", xhr.status);
  }
};Lenguaje del código: JavaScript (javascript)

El código 200 significa que la petición HTTP fue exitosa. Otros códigos comunes son:

• 404: el recurso o URL no existe.
• 500: ocurrió un error en el servidor.
• 403: el acceso fue denegado.

Después de comprobar el estado, normalmente se utiliza responseText para acceder al contenido devuelto por el servidor.

xhr.onload = function () {
  if (xhr.status === 200) {
    // Obtener la respuesta en formato texto
    console.log(xhr.responseText);
  }
};Lenguaje del código: JavaScript (javascript)

Si el servidor devuelve datos en formato JSON, primero debes convertir ese texto en un objeto JavaScript utilizando JSON.parse().

xhr.onload = function () {
  if (xhr.status === 200) {
    // Convertir la respuesta JSON a un objeto JavaScript
    const datos = JSON.parse(xhr.responseText);

    console.log(datos);
  }
};Lenguaje del código: JavaScript (javascript)

Ejemplo completo mostrando datos en el DOM:

// Elemento donde se mostrará la información
const resultado = document.querySelector("#resultado");

xhr.onload = function () {
  if (xhr.status === 200) {
    const usuarios = JSON.parse(xhr.responseText);

    // Mostrar el nombre del primer usuario
    resultado.textContent = usuarios[0].name;
  } else {
    resultado.textContent = "No se pudieron cargar los datos";
  }
};Lenguaje del código: JavaScript (javascript)

Preparar correctamente la respuesta es una de las partes más importantes al usar XMLHttpRequest, ya que te permite procesar los datos recibidos y utilizarlos para actualizar dinámicamente el contenido de tu página web.

2.4. Manejar posibles errores de red

Cuando trabajas con XMLHttpRequest, no siempre la petición HTTP se completa correctamente. Puede ocurrir que el usuario no tenga conexión a Internet, que el servidor esté caído o que exista un problema de red.

Por eso, es una buena práctica manejar los posibles errores utilizando la propiedad onerror.

// Se ejecuta si ocurre un error de red
xhr.onerror = function () {
  console.log("Ocurrió un error de red");
};Lenguaje del código: JavaScript (javascript)

La función asignada a onerror se ejecuta automáticamente cuando el navegador no puede completar la petición. Esto sucede, por ejemplo, si:

• El usuario está sin conexión.
• La URL del servidor es incorrecta.
• El servidor no responde.
• Existe un problema de DNS o conexión.

Un ejemplo más útil es mostrar un mensaje de error dentro del DOM para informar al usuario:

// Elemento donde se mostrará el mensaje
const resultado = document.querySelector("#resultado");

xhr.onerror = function () {
  // Mostrar el error en la página
  resultado.textContent = "No se pudo conectar con el servidor. Inténtalo nuevamente.";
};Lenguaje del código: JavaScript (javascript)

También es recomendable combinar onerror con la validación del código de estado HTTP dentro de onload, ya que onerror solo detecta errores de red, pero no errores como 404 o 500.

xhr.onload = function () {
  if (xhr.status === 200) {
    console.log("Petición exitosa");
  } else {
    console.log("Error HTTP:", xhr.status);
  }
}

;xhr.onerror = function () {
  console.log("Error de conexión");
};Lenguaje del código: JavaScript (javascript)

En este ejemplo:

• onload detecta respuestas del servidor, incluso si hubo un error HTTP.
• onerror detecta problemas de red o conexión.

Ejemplo completo:

const resultado = document.querySelector("#resultado");

xhr.onload = function () {
  if (xhr.status === 200) {
    resultado.textContent = xhr.responseText;
  } else {
    resultado.textContent = `Error del servidor: ${xhr.status}`;
  }
};

xhr.onerror = function () {
  resultado.textContent = "Error de red. Verifica tu conexión a Internet.";
};Lenguaje del código: JavaScript (javascript)

A veces, también puede suceder que el servidor responde, pero tarda demasiado tiempo. Para evitar que el usuario espere indefinidamente, podemos configurar la propiedad .timeout.

Si la petición supera el tiempo establecido (en milisegundos), se disparará el evento ontimeout.

// Establecemos un tiempo máximo de 5 segundos (5000ms)
xhr.timeout = 5000;

xhr.ontimeout = function () {
    console.warn("La petición ha tardado demasiado y ha sido cancelada.");
};
Lenguaje del código: JavaScript (javascript)

Resumen de la lógica de errores

1. ¿Llegó la respuesta? Se ejecuta onload.
   • ¿El código es 200? Todo perfecto.
   • ¿El código es 404 o 500? Error lógico o de servidor (manéjalo dentro de onload).
2. ¿Hubo un fallo de conexión física? Se ejecuta onerror.
3. ¿El servidor tardó demasiado? Se ejecuta ontimeout.

2.5. Enviar la petición con send()

Después de crear la instancia de XMLHttpRequest, configurar la petición con open() y preparar la respuesta, el último paso es enviar la solicitud al servidor utilizando el método send().

El método send() es el que realmente inicia la petición HTTP.

// Enviar la petición al servidor
xhr.send();Lenguaje del código: JavaScript (javascript)

En una petición GET, normalmente send() se ejecuta sin parámetros porque los datos ya están incluidos en la URL.

// Crear la petición
const xhr = new XMLHttpRequest();

// Configurar una petición GET
xhr.open("GET", "https://api.ejemplo.com/usuarios", true);

// Enviar la petición
xhr.send();Lenguaje del código: JavaScript (javascript)

Cuando el navegador ejecuta send(), la solicitud se envía al servidor y comienza el proceso de espera de la respuesta.

Si la petición es de tipo POST, PUT o similar, send() puede recibir los datos que deseas enviar.

// Configurar una petición POST
xhr.open("POST", "https://api.ejemplo.com/usuarios", true);

// Enviar datos al servidor
xhr.send("nombre=Juan&edad=30");Lenguaje del código: JavaScript (javascript)

También es común enviar datos en formato JSON:

// Configurar el encabezado para JSON
xhr.setRequestHeader("Content-Type", "application/json");

// Enviar un objeto convertido a JSON
xhr.send(JSON.stringify({
  nombre: "Juan",
  edad: 30
}));Lenguaje del código: JavaScript (javascript)

Es importante recordar que send() siempre debe ejecutarse después de open() y después de haber configurado onload, onerror u otros eventos.

Tipos de datos que puedes enviar

Una de las grandes ventajas de XMLHttpRequest es su versatilidad. A través del parámetro de send(), puedes enviar:

• Strings: Ideal para texto plano o JSON.
• FormData: Perfecto para subir archivos o enviar formularios complejos.
• Blob o BufferSource: Para datos binarios (imágenes, audio).
• URLSearchParams: Para datos codificados como una URL.

El flujo de ejecución

Es vital recordar que, como definimos la petición como asíncrona (true en el método open), el código que esté justo debajo de xhr.send() se ejecutará inmediatamente, sin esperar a que el servidor responda.

ENTONCES, el orden correcto es:

// 1. Crear la instancia
const xhr = new XMLHttpRequest();

// 2. Configurar la petición
xhr.open("GET", "https://api.ejemplo.com/usuarios", true);

// 3. Preparar la respuesta
xhr.onload = function () {
  if (xhr.status === 200) {
    console.log(xhr.responseText);
  }
};

// 4. Enviar la petición
xhr.send();Lenguaje del código: JavaScript (javascript)

Si llamas a send() antes de open(), la petición fallará porque aún no existe una configuración válida.

Por eso, el método send() representa el paso final y decisivo al trabajar con XMLHttpRequest. Sin él, la solicitud nunca será enviada al servidor.

3. Estados de la petición (readyState)

Cuando realizas una petición con XMLHttpRequest, el navegador y el servidor inician una «conversación» que pasa por cinco estados diferentes. Cada estado está representado por un número del 0 al 4.

Si quieres crear aplicaciones robustas, necesitas saber qué está pasando en cada uno de estos niveles para poder reaccionar correctamente (por ejemplo, mostrando un indicador de carga mientras los datos llegan).

3.1. La tabla de valores de readyState

3.2. ¿Para qué sirve conocer estos estados?

En el desarrollo profesional, monitorear el readyState tiene tres utilidades principales:

3.2.1. Controlar el flujo de ejecución

No puedes intentar leer los datos (responseText) en el estado 1 o 2, porque el cuerpo de la respuesta aún no existe. Tu código fallaría. Por eso, siempre validamos que el estado sea 4.

3.2.2. Crear indicadores de carga (Spinners)

Puedes usar el cambio de estados para mejorar la experiencia de usuario (UX). Por ejemplo:

• Al pasar al estado 1, activas un icono de «Cargando…».
• Al llegar al estado 4, ocultas el icono y muestras los datos.

3.2.3. Depuración (Debugging)

Si una petición se queda «atascada» en el estado 2, sabes que el problema está en el servidor que no envía los datos. Si nunca sale del estado 0, el problema es que olvidaste configurar el método .open().

4. Onreadystatechange

4.1. ¿Qué es onreadystatechange?

El onreadystatechange es un controlador de eventos (event handler) que se dispara cada vez que la propiedad readyState de una petición XMLHttpRequest cambia de valor.

Imagina que pides una pizza por una app:

1. Pedido recibido.
2. Preparando en cocina.
3. En el horno.
4. Repartidor en camino.
5. Entregado.

onreadystatechange es como esa barra de progreso que te notifica cada vez que la pizza cambia de un paso al siguiente. En código, te avisa cada vez que la petición HTTP avanza en su ciclo de vida.

4.2. Detectar cambios usando onreadystatechange

Detectar cambios significa programar una función que se ejecute automáticamente cada vez que el estado de la petición pase de un número a otro (del 0 al 4).

Esto es fundamental por dos razones técnicas:

1. Sincronización:
   • Como las peticiones son asíncronas, tu código no se detiene a esperar la respuesta. Necesitas un mecanismo que «escuche» y te diga: «¡Oye! Ya terminamos de descargar los datos, ahora puedes usarlos».
2. Validación en tiempo real:
   • Te permite verificar si la comunicación falló en etapas tempranas (por ejemplo, si el servidor cerró la conexión antes de enviar los datos).

4.3. Ejemplo de implementación paso a paso

Para detectar estos cambios, asignamos una función al evento antes de llamar al método .send():

const xhr = new XMLHttpRequest();
xhr.open('GET', 'https://api.ejemplo.com/datos', true);

// 1. Detectamos el cambio de estado
xhr.onreadystatechange = function() {
    
    // Mostramos el estado actual en la consola (del 1 al 4)
    console.log("Estado actual del readyState: " + xhr.readyState);

    // 2. Solo actuamos cuando el estado sea 4 (Completado)
    if (xhr.readyState === 4) {
        
        // 3. Verificamos si la respuesta del servidor fue exitosa (200)
        if (xhr.status === 200) {
            console.log("Éxito:", JSON.parse(xhr.responseText));
        } else {
            console.error("Hubo un problema con la respuesta.");
        }
    }
};

xhr.send();Lenguaje del código: JavaScript (javascript)

4.4. Diferencia clave: onreadystatechange vs onload

Es muy común confundirlos, por ello es vital marcar la diferencia:

• onreadystatechange: Se ejecuta varias veces (una por cada cambio de estado del 1 al 4). Te da un control total sobre el proceso.
• onload: Es una versión simplificada y moderna. Solo se ejecuta una vez, justo cuando el estado llega a 4.

NOTA!!! Usa onreadystatechange si necesitas monitorear el progreso o si estás trabajando en sistemas muy antiguos que requieren compatibilidad total. Para la mayoría de los casos modernos, onload es más limpio, pero entender el «cambio de estado» es lo que te permite dominar el flujo asíncrono.

5. Leer la respuesta del servidor

Una vez que la petición se ha completado (cuando el readyState es 4), el servidor nos envía un paquete de datos.

Sin embargo, ese paquete puede venir en diferentes formatos: texto plano, un archivo JSON, un documento XML o incluso un archivo binario (como una imagen).

Para acceder a esa información, el objeto XHR nos ofrece tres propiedades principales. Elegir la correcta es vital para procesar los datos sin errores.

5.1. responseText: El estándar para texto y JSON

Es la propiedad más utilizada. Devuelve la respuesta del servidor como una cadena de texto (string).

• ¿Para qué sirve? Se usa principalmente cuando el servidor responde con texto plano, HTML o JSON.
• Cómo se hace: Como recibes un string, si es JSON, debes convertirlo a un objeto JavaScript para poder trabajar con él.

xhr.onload = function() {
    if (xhr.status === 200) {
        // Recibimos el string y lo transformamos
        const data = JSON.parse(xhr.responseText);
        console.log(data.nombre); 
    }
};
Lenguaje del código: JavaScript (javascript)

5.2. response: La opción versátil y moderna

Es una propiedad más flexible que devuelve el contenido de la respuesta según el tipo de dato que hayamos definido previamente.

• ¿Para qué sirve? Sirve para cualquier tipo de dato (texto, imágenes, arrays, etc.). Es la forma más limpia de trabajar si defines el responseType.
• Cómo se hace: Antes de enviar la petición, le dices al navegador qué esperar.

xhr.open('GET', 'url/datos');
xhr.responseType = 'json'; // Le decimos que queremos un objeto JSON directamente

xhr.onload = function() {
    // Aquí 'response' ya es un objeto, no hace falta JSON.parse()
    const data = xhr.response;
    console.log(data.id);
};
xhr.send();
Lenguaje del código: JavaScript (javascript)

5.3. responseXML: Para documentos estructurados

Como indica su nombre, esta propiedad interpreta la respuesta como un documento XML o HTML.

• ¿Para qué sirve? Se usa cuando el servidor devuelve un archivo XML. Te permite navegar por los datos usando métodos del DOM (como getElementsByTagName). Aunque el XML es menos común hoy que el JSON, todavía se usa en muchos servicios empresariales y APIs antiguas.
• Cómo se hace: El navegador intenta parsear el texto automáticamente.

xhr.onload = function() {
    const xmlDoc = xhr.responseXML;
    const titulo = xmlDoc.getElementsByTagName("titulo")[0].childNodes[0].nodeValue;
    console.log("El título del XML es: " + titulo);
};
Lenguaje del código: JavaScript (javascript)

5.4. Cuadro comparativo: ¿Cuál elegir?

6. Ejemplo real usando XMLHttpRequest

Imagina que estás construyendo un formulario de registro. Quieres que, en cuanto el usuario termine de escribir su nombre de usuario, el sistema le diga si está disponible o si ya está ocupado por otra persona, sin que el usuario tenga que recargar toda la página.

Este comportamiento es lo que definimos como experiencia de usuario fluida y es el uso más común de AJAX con XHR.

EL ESCENARIO:

1. El usuario escribe «Alex123» en el campo de texto.
2. Al perder el foco del campo (evento blur), enviamos una petición al servidor.
3. El servidor busca en la base de datos y responde con un mensaje.
4. Actualizamos un pequeño texto debajo del campo con el resultado.

CÓDIGO:

Aquí dejamos el código necesario (HTML y JavaScript) para implementar esta funcionalidad:

<label for="username">Nombre de Usuario:</label>
<input type="text" id="username" placeholder="Escribe un nombre...">
<span id="mensaje-estado"></span>

<script>
  const inputUser = document.getElementById('username');
  const estado = document.getElementById('mensaje-estado');

  // Escuchamos cuando el usuario sale del campo
  inputUser.addEventListener('blur', function() {
    const nombre = inputUser.value;

    if (nombre === "") return; // No hacemos nada si está vacío

    // 1. Creamos la instancia
    const xhr = new XMLHttpRequest();

    // 2. Configuramos la petición (Simulando una API de verificación)
    xhr.open('GET', `https://api.ejemplo.com/check-user?name=${nombre}`, true);

    // 3. Preparamos la respuesta
    xhr.onload = function() {
      if (xhr.status === 200) {
        const respuesta = JSON.parse(xhr.responseText);
        
        if (respuesta.disponible) {
          estado.textContent = "✅ ¡Disponible!";
          estado.style.color = "green";
        } else {
          estado.textContent = "❌ Ya está en uso.";
          estado.style.color = "red";
        }
      }
    };

    // 4. Enviamos la petición
    xhr.send();
  });
</script>Lenguaje del código: HTML, XML (xml)

RESULTADO ESPERADO:

• Si el nombre está libre: Debajo del input aparecerá el texto «✅ ¡Disponible!» en color verde.
• Si el nombre está ocupado: Aparecerá «❌ Ya está en uso.» en color rojo.
• Todo esto ocurre en milisegundos, sin que el resto del formulario se mueva o se borre.

EXPLICACIÓN:

1. addEventListener('blur', ...):
   • Esta es la clave de la interactividad. No esperamos a que el usuario envíe todo el formulario (botón submit). Actuamos justo cuando el usuario termina de escribir y pasa al siguiente campo, mejorando la velocidad de respuesta de nuestra web.
2. new XMLHttpRequest():
   • Creamos nuestro mensajero. Este objeto es el que viajará al servidor mientras el usuario sigue en la página.
3. xhr.open('GET', ...):
   • Aquí preparamos la ruta. Usamos el método GET porque solo estamos consultando información. Pasamos el nombre escrito por el usuario como un «query parameter» en la URL para que el servidor sepa qué nombre buscar.
4. xhr.onload:
   • Esta es nuestra función de éxito. Lo que pongas aquí dentro es lo que soluciona visualmente el problema. Al usar JSON.parse(xhr.responseText), transformamos la respuesta técnica del servidor en un objeto de JavaScript fácil de leer para decidir si mostramos el mensaje verde o el rojo.
5. xhr.send():
   • Es el comando final. Sin esta línea, todo el código anterior es solo preparación. Al ejecutarla, la petición viaja por la red de forma asíncrona (en segundo plano).