XMLHttpRequest

JavaScript es un lenguaje de programación esencial para el desarrollo web, que permite experiencias de usuario dinámicas e interactivas. Una de las características clave de JavaScript es su capacidad para comunicarse con servidores, recuperar datos y actualizar páginas web de forma asíncrona. Esto se logra principalmente mediante el uso de XMLHttpRequest (XHR). Este artículo ofrece un análisis profundo de XMLHttpRequest, incluyendo sus métodos, propiedades y aplicaciones prácticas, acompañado de múltiples ejemplos de código para facilitar el aprendizaje.

info

XMLHttpRequest funciona con funciones de callback. Puedes usar la Fetch API, que utiliza promesas y es una solución más moderna.

Entendiendo XMLHttpRequest

XMLHttpRequest es un objeto de JavaScript que proporciona la capacidad de enviar solicitudes HTTP o HTTPS a un servidor web y cargar los datos de respuesta del servidor de vuelta al script. Esto permite actualizar partes de una página web sin recargarla por completo.

Crear un objeto XMLHttpRequest

Para iniciar una solicitud XMLHttpRequest, primero debes crear una instancia del objeto XMLHttpRequest:

const xhr = new XMLHttpRequest();

Realizar una solicitud HTTP

Una vez creado el objeto XMLHttpRequest, puedes configurarlo para obtener datos de un servidor. El método open se utiliza para configurar la solicitud.

El método open

El método open inicializa una solicitud. Toma varios parámetros:

xhr.open(method, url, async, user, password);

• method: El método HTTP a utilizar (por ejemplo, "GET", "POST").
• url: La URL a la que se envía la solicitud.
• async: Un valor booleano que indica si la solicitud es asíncrona (true por defecto).
• user: Opcional, el nombre de usuario para la autenticación.
• password: Opcional, la contraseña para la autenticación.

Ejemplo:

xhr.open('GET', 'https://jsonplaceholder.typicode.com/posts/1', true);

El método send

El método send envía la solicitud al servidor. Para una solicitud GET, generalmente se llama sin argumentos. Para una solicitud POST, puedes enviar datos como argumento.

Ejemplo de una solicitud GET:

xhr.send();

Ejemplo de una solicitud POST:

xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
xhr.send('param1=value1&param2=value2');

Manejar respuestas del servidor

Para manejar las respuestas del servidor, se pueden utilizar varios escuchadores de eventos.

El evento onreadystatechange

El evento onreadystatechange se activa cada vez que cambia la propiedad readyState. La propiedad readyState contiene el estado del XMLHttpRequest.

• 0: UNSENT
• 1: OPENED
• 2: HEADERS_RECEIVED
• 3: LOADING
• 4: DONE

Puedes verificar readyState y status para determinar cuándo la solicitud se ha completado correctamente.

Ejemplo:

note

Aunque onreadystatechange funciona, el código moderno generalmente prefiere onload y onerror para un manejo de solicitudes más simple y legible. onreadystatechange se usa principalmente cuando necesitas rastrear estados intermedios (como progreso o encabezados recibidos).

El evento load

El evento load se dispara cuando la solicitud se completa correctamente.

Ejemplo:

Manejar errores

El manejo de errores es crucial para una aplicación robusta. El evento onerror se dispara cuando hay un error de red. También puedes establecer un tiempo de espera para evitar que las solicitudes se queden colgadas indefinidamente usando xhr.timeout (en milisegundos) y manejar los tiempos de espera con ontimeout.

Ejemplo:

Analizar respuestas JSON

A menudo, las respuestas del servidor están en formato JSON. Puedes analizar respuestas JSON utilizando JSON.parse. Alternativamente, puedes establecer xhr.responseType = 'json' para analizar automáticamente la respuesta, lo cual también admite otros formatos como 'blob', 'arraybuffer' o 'document'.

Ejemplo:

Conclusión

Dominar XMLHttpRequest es fundamental para cualquier desarrollador web que aspire a crear aplicaciones web dinámicas y responsivas. Esta guía ha cubierto los aspectos esenciales de XMLHttpRequest, incluyendo la creación de solicitudes, el manejo de respuestas, el manejo de errores y escenarios de uso avanzados. Al integrar los ejemplos proporcionados en tus proyectos, puedes aprovechar XMLHttpRequest para mejorar las experiencias de usuario y construir aplicaciones web sofisticadas.

Práctica