En la mayoría de proyectos que desarrollamos o mantenemos, hacemos uso de frameworks fronteds con el que realizamos, entre otras muchas cosas, peticiones AJAX a nuestro backend. Pero puede ser que nos encontremos con proyectos en los que tengamos esta necesidad, pero que no sea necesario el uso de un frontend, ya que es un proyecto pequeño o simplemente con antigüedad, en el que no se hizo uso de ningun front.
En este artículo aprenderemos a hacer uso de Javascript Vanilla ( Javascript puro, sin frameworks) para hacer una petición AJAX.
En este ejemplo, haremos uso de una API pública, que nos devolverá un listado de usuarios. La url de dicha API será https://reqres.in/api/users/2
//Declaramos una nueva instancia de XMLHttpRequest
var xhr = new XMLHttpRequest();
//Esta función se ejecutará tras la petición
xhr.onload = function () {
//Si la petición es exitosa
if (xhr.status >= 200 && xhr.status < 300) {
//Mostramos un mensaje de exito y el contenido de la respuesta
console.log('¡Éxito!', xhr.response);
} else {
//Si la conexión falla
console.log('Error en la petición!');
}
};
//Por el primer parametro enviamos el tipo de petición (GET, POST, PUT, DELETE)
//Por el segundo parametro la url de la API
xhr.open('GET', 'https://reqres.in/api/users/2');
//Se envía la petición
xhr.send();
XHR funciona en todos los navegadores modernos, e IE7 y superiores.
¡De está forma, hemos hecho una petición AJAX con Javascript puro, sin uso de ningún framework!