En el artículo anterior aprendimos qué es Ajax, por qué es tan importante en el mundo de la web y los distintos mecanismos que nos ofrece el navegador para para realizar conexiones asíncronas contra servidores, que no recarguen completamente la página que el usuario está visualizando en ese momento.

Ahora vamos a abordar XMLHttpRequest, que es un objeto que existe en el navegador desde hace mucho tiempo. De hecho, de entre todos los modelos de trabajo para realizar conexiones por Ajax, XMLHttpRequest es el más antiguo que existe y por supuesto está disponible en todos los navegadores desde la época de Internet Explorer 6.

¿Es conveniente usar XMLHttpRequest todavía en 2023?

Antes de comenzar conviene comentar que existen otras alternativas interesantes para hacer Ajax que evitarían usar XMLHttpRequest. El caso más destacado basado en las API nativas de los navegadores sería fetch.

En principio no te recomendamos usar XMLHttpRequest para hacer comunicaciones con Ajax porque su modo de trabajo es un poco complejo con respecto a si haces Ajax con Fetch o con otras librerías como Axios. Principalmente porque el código asíncrono de XMLHttpRequest se gestiona por eventos, existiendo varios disponibles, lo que hace el código un poco más complejo para definir y mantener y nos obliga a aprender más cosas.

Por ejemplo, fetch trabaja por promesas, lo que resulta más fácil en el fondo y nos permitiría usar incluso async await para hacerlo más sencillo todavía. No obstante, es interesante conocer este mecanismo porque sin duda puedes encontrar código que lo use en Internet o puedes sentirte obligado a usarlo por requisitos de algún proyecto.

Qué es XMLHttpRequest

XMLHttpRequest es una clase existente en el navegador que está preparada para realizar las conexiones asíncronas para obtener datos de nuestro servidor web o de cualquier servicio web de Internet que trabaje por HTTP.

Cuando queremos hacer conexiones Ajax podemos instanciar un objeto de la clase XMLHttpRequest con Javascript. Posteriormente podremos realizar llamadas a métodos para realizar la conexión y escuchar diversos eventos disponibles dentro del objeto para saber cuándo se ha recibido respuesta.

Para instanciar el objeto XMLHttpRequest lanzamos la siguiente sentencia.

let xhr = new XMLHttpRequest();

Configurar la solicitud a realizar por XMLHttpRequest

Ahora podemos realizar métodos para gestionar las comunicaciones por Ajax, el más usando sería open(), al que tenemos que suministrar el método de HTTP que vamos a usar y la URL que queremos consultar.

xhr.open("GET", url-de-consulta.html');

La URL de consulta puede ser relativa a la página desde donde hacemos la llamada o bien absoluta, comenzando por "http://" o "https://".

Enviando la solicitud Ajax

Una vez configurada la consulta con el método open() lo que nos debe quedar claro es que no se realiza todavía la solicitud contra el servidor propiamente dicha, sino que la tendremos que invocar nosotros cada vez que sea necesario con el método send().

xhr.send();

Ese método será el que inicie la conexión Ajax que se haya configurado con anterioridad. El método send() no devuelve nada una vez se ejecuta, sino que es un método asíncrono, que devuelve el control al hilo de ejecución de Javascript, que seguirá ejecutando las instrucciones siguientes al send() (las que haya a continuación, si las hay) sin haber recibido la respuesta todavía.

Eventos de XMLHttpRequest para gestionar la respuesta del servidor

Entonces, si send() no devuelve nada ¿Cómo obtenemos la respuesta del servidor una vez la solicitud Ajax ha recibido los datos de vuelta? Para ello usamos los eventos que levanta el objeto XMLHttpRequest.

Estos eventos son varios y nos pueden servir para ejecutar acciones ante diversos supuestos.

• Evento onload: este es el evento más básico, que se ejecuta cada vez que el objeto XMLHttpRequest ha recibido la respuesta completamente.
• Evento onreadystatechange: este es el evento que nos permite acompañar el estado de la solicitud Ajax, desde la creación del objeto, la realización de la solicitud, en adelante.

Ejemplo completo de XMLHttpRequest

En el siguiente código encuentras un ejemplo de trabajo con XMLHttpRequest y la definición de una función anónima como manejador del evento onload, mediante el cual podemos acceder al resultado de la conexión Ajax.

El código está comentado para que lo puedas entender mejor.

// creación del objeto XMLHttpRequest
let xhr = new XMLHttpRequest();

// definición de la consulta Ajax, asíncrona, que vamos a realizar
xhr.open("GET", 'https://jsonplaceholder.typicode.com/todos/3');

// definición de un manejador de eventos que se ejecutará al recibir el resultado de la llamada ajax
xhr.onload = function(e) {
  // muestro el cuerpo de la respuesta
  console.log(xhr.responseText);
}

// ejecución de la llamada
// nota que por el hecho de hacer la llamada a open() solo se configura la solicitud
// para que realmente se realice hay que llamar a send()
xhr.send();

Con esto hemos visto un ejemplo completo de solicitud Ajax usando XMLHttpRequest. El objeto XMLHttpRequest es bastante sofisticado y te permitirá realizar diversas configuraciones un poco más avanzadas, así como estar atento a diversos tipos de eventos. Veremos ejemplos un poco más específicos en adelante para seguir trabajando con él.

• Cómo hacer una solicitud Post con XMLHttpRequest para enviar datos de formularios
• Cómo mostrar mensajes de carga para avisar al usuario que la solicitud está en marcha.