Peticiones AJAX con XMLHttpRequest

En este artículo vamos a explicar cómo hacer peticiones AJAX con XMLHttpRequest en JavaScript junto con sus características. Existen varias formas de realizar peticiones HTTP mediante AJAX, pero las principales suelen ser XMLHttpRequest y fetch, las cuales son nativas de JavaScript, además de liberías externas como Axios, jQuery o SuperAgent. Este artículo forma parte de la serie introducción a AJAX. Una serie de artículos donde se explican todas las funcionalidades y utilidades de usar AJAX, mejorando la experiencia del usuario y optimizando el desarrollo de aplicaciones web.

AJAX con XMLHttpRequest

Las peticiones AJAX con XMLHttpRequest son la forma tradicional de realizar solicitudes AJAX en JavaScript. XMLHttpRequest es un objeto nativo de JavaScript que permite enviar solicitudes HTTP y manejar las respuestas de forma asíncrona. Para realizar peticiones AJAX con XMLHttpRequest simplemente nos basta con el siguiente código:

let xhr = new XMLHttpRequest();
xhr.responseType = 'text';
xhr.open('GET', 'https://api.example.com/data', true);
xhr.send();
xhr.onload = function() {
    if (xhr.status === 200) console.log(xhr.response);
    else console.error(`Error: ${xhr.status}`);
};
xhr.onerror = function() {
    console.error('Solicitud fallida');
};

Estas pocas lineas se encargan de realizar todo el proceso y nos mostrarán en consola el documento solicitado o un mensaje de error si algo falla. Podemos dividir el código en varias partes:

Configurar XMLHttpRequest

Antes de proceder a las peticiones AJAX debemos crear un objeto XMLHttpRequest y configurar algunos parámetros para la comunicación con las siguientes instrucciones:

let xhr = new XMLHttpRequest(); Crea una nueva instancia del objeto XMLHttpRequest que se utiliza para realizar solicitudes HTTP en JavaScript.

xhr.responseType = 'text'; Define el tipo de dato que se espera recibir del servidor. Esta propiedad puede tomar varios valores que especifican cómo se debe interpretar la respuesta recibida. Las posibles opciones de configuración para responseType son las siguientes:

«» (cadena vacía): Es el valor predeterminado y si no se define, la respuesta se tratará como texto plano.
«arraybuffer»: La respuesta se interpretará como un ArrayBuffer, que es un objeto que representa un fragmento de datos binarios. Es útil para manejar datos binarios como archivos o imágenes.
«blob»: La respuesta se interpretará como un Blob, que representa datos binarios con un tipo MIME. Es útil para manejar archivos, imágenes o cualquier otro contenido binario.
«document»: La respuesta se interpretará como un documento DOM, útil para recibir y manipular documentos XML o HTML.
«json»: La respuesta se interpretará como un objeto JSON. Es útil para trabajar con APIs que devuelven datos en formato JSON.
«text»: La respuesta se interpretará como texto, es el mismo comportamiento que la cadena vacía por defecto.

xhr.open('method', url, [async, user, password]); La función open del objeto XMLHttpRequest configura una solicitud HTTP antes de que sea enviada al servidor. Hay varias opciones de configuración disponibles:

method: El método HTTP que se usará para la solicitud ('GET', 'POST', 'PUT', 'DELETE', etc.).
url: La URL a la que se enviará la solicitud, puede ser una URL absoluta o relativa.
async: (opcional): Indica si la solicitud debe ser asincrónica (true) o sincrónica (false). Por defecto es (true) y es muy recomendable el uso de solicitudes asincrónicas para no bloquear el hilo principal de ejecución. Las solicitudes sincrónicas (false) pueden causar que el navegador se vuelva no responsivo y generalmente se desaconsejan en aplicaciones web modernas.
user, password: (opcional): Usuario y contraseña para la autenticación básica. Debe ser utilizada con precaución, preferiblemente sobre conexiones seguras (HTTPS).
NOTA: Después de llamar a open, se pueden configurar cabeceras HTTP personalizadas usando el método setRequestHeader.

Enviar AJAX con XMLHttpRequest

Todo el proceso de configuración de las peticiones AJAX con XMLHttpRequest no se harán efectivas hasta que se active el envío con:

xhr.send(); En el contexto de XMLHttpRequest esta función se utiliza para enviar la solicitud HTTP previamente configurada al servidor. Es el paso final en el proceso de configuración de una solicitud y la activación efectiva de la comunicación con el servidor.

ATENCIÓN:

Existe una política de seguridad en los navegadores llamada CORS (Cross-Origin Resource Sharing). Esta política impide que una página web haga peticiones AJAX a un dominio diferente al de la página que se carga en el navegador, a menos que el servidor del dominio externo permita explícitamente estas solicitudes.

Si necesitas conectar diferentes servidores entre sí, debes configurar el servidor que recibe las solicitudes AJAX para permitir las solicitudes de los dominios externos. Esto se puede conseguir con .htaccess:

<IfModule mod_headers.c>
    SetEnvIf Origin "^(http://(www\.)?(dominio1\.com|dominio2\.com|dominio3\.com))$" AccessControlAllowOrigin=$0
    Header set Access-Control-Allow-Origin %{AccessControlAllowOrigin}e env=AccessControlAllowOrigin
</IfModule>

Estas instrucciones añadidas en el archivo .htaccess del servidor Apache realizan las siguientes funciones:

SetEnvIf: Esta directiva establece una variable de entorno AccessControlAllowOrigin basada en el valor del encabezado Origin. El valor se establece sólo si el Origin coincide con una de las expresiones regulares especificadas (dominio1.com, dominio2.com, dominio3.com).
Header set: Establece el encabezado Access-Control-Allow-Origin utilizando el valor de la variable de entorno AccessControlAllowOrigin. Esto permite el acceso a los dominios autorizados (dominio1.com, dominio2.com, dominio3.com).

Recibir peticiones AJAX con XMLHttpRequest

Una vez realizado el envío podemos tener eventos de escucha para manejar la petición AJAX y comprobar el resultado. Los eventos más importantes son:

xhr.onload = function(): Esta función se ejecuta cuando la solicitud ha sido completada exitosamente, es decir, cuando la respuesta ha sido recibida completamente del servidor.

xhr.status: Contiene el código de estado de la respuesta HTTP. El código 200 indica que la solicitud fue exitosa.
xhr.response: Contiene la respuesta del servidor. El tipo de esta respuesta depende de lo que se haya configurado en xhttp.responseType.

Manejo de errores en XMLHttpRequest

Además del manejo de la respuesta, también es importante saber manejar posibles errores que puedan ocurrir durante la solicitud.

xhr.onerror = function(): Esta función se ejecuta si ocurre un error durante la solicitud, como problemas de red o si el servidor no está disponible.