Inicio Blog Cursos Foro

AJAX con Javascript Vanilla


author_post
José Luis Guisado

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.

Petición AJAX con Javascript

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!

¡No te pierdas nuevas entradas! Sí­guenos en nuestras redes sociales

Preguntas relacionadas

No hay preguntas sobre este artículo.

¿Tienes alguna duda sobre el artículo? ¡Pregunta!