Cómo enviar una solicitud POST usando XMLHttpRequest (XHR)

XMLHttpRequest (XHR) es un objeto de navegador integrado que se puede utilizar para realizar solicitudes HTTP en JavaScript para intercambiar datos entre el cliente y el servidor. Es compatible con todos los navegadores modernos y antiguos.

En este breve artículo, aprenderá cómo hacer un HTTP POST solicitud mediante XHR. Digamos que tenemos el siguiente formulario HTML:

<form id="signup-form" action="/signup" method="POST">
    <input type="text" name="name" placeholder="Enter name">
    <input type="email" name="email" placeholder="Enter Email">
    <input type="password" name="password" placeholder="Enter Password">
    <button type="submit" role="button">Submit</button>
</form>

Queremos asegurarnos de que cuando el usuario haga clic en el botón "Enviar", el formulario se envíe de forma asincrónica a través de XHR. El primer paso es adjuntar un controlador de eventos el <form> para capturar el submit evento:

const form = document.querySelector('#signup-form');

// listen for submit even
form.addEventListener('submit', () => {
    // TODO: submit post request here
});

El siguiente paso es crear y enviar una solicitud POST real. Si ya está familiarizado con jQuery, enviar una solicitud POST es bastante similar al $.post() método. Así es como se ve:

form.addEventListener('submit', (event) => {

    // disable default action
    event.preventDefault();

    // configure a request
    const xhr = new XMLHttpRequest();
    xhr.open('POST', '/signup');

    // prepare form data
    let data = new FormData(form);

    // set headers
    xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
    xhr.setRequestHeader('X-Requested-With', 'XMLHttpRequest');

    // send request
    xhr.send(data);

    // listen for `load` event
    xhr.onload = () => {
        console.log(xhr.responseText);
    }
    
});

Eso es todo. El código anterior enviará una solicitud HTTP POST al servidor e imprimirá la respuesta en la consola.

Uso de la API de búsqueda

Puede simplificar fácilmente la solicitud anterior utilizando la API Fetch. Fetch es una alternativa basada en promesas a XHR para realizar solicitudes HTTP. Es mucho más legible y personalizable:

form.addEventListener('submit', (event) => {

    // disable default action
    event.preventDefault();
    
    // make post request
    fetch('/signup', {
        method: 'POST',
        body: new FormData(form),
        headers: {
            'Content-Type': 'application/x-www-form-urlencoded'
        }
    })
    .then(res => res.text())
    .then(html => console.log(html))
    .catch(err => console.error(err));
});