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

En mi artículo anterior, analizamos cómo realizar una solicitud HTTP POST utilizando XMLHttpRequest (XHR) en JavaScript estándar. Dado que el uso más común de XHR es para enviar una solicitud asincrónica con carga JSON, es bueno saber cómo hacerlo.

JSON significa Notación de objetos de JavaScript y es un formato popular para compartir datos con el servidor y mostrar el resultado al cliente.

El siguiente ejemplo muestra cómo puede usar el XHR para realizar una solicitud JSON POST en JavaScript:

const xhr = new XMLHttpRequest();

// listen for `load` event
xhr.onload = () => {

    // print JSON response
    if (xhr.status >= 200 && xhr.status < 300) {
        // parse JSON
        const response = JSON.parse(xhr.responseText);
        console.log(response);
    }
};

// create a JSON object
const json = {
    "email": "[email protected]",
    "password": "cityslicka"
};

// open request
xhr.open('POST', 'https://reqres.in/api/login');

// set `Content-Type` header
xhr.setRequestHeader('Content-Type', 'application/json');

// send rquest with JSON payload
xhr.send(JSON.stringify(json));

Eche un vistazo a cómo hacer solicitudes HTTP usando el tutorial XHR para conocer todas las opciones disponibles.

Uso de la API de búsqueda

Si está trabajando con navegadores modernos solo, sugeriría usar la API Fetch en lugar de XHR. Tiene una sintaxis clara y concisa, y también admite promesas:

// create a JSON object
const json = {
    email: '[email protected]',
    password: '123abc'
};

// request options
const options = {
    method: 'POST',
    body: JSON.stringify(json),
    headers: {
        'Content-Type': 'application/json'
    }
}

// send post request
fetch('/login', options)
    .then(res => res.json())
    .then(res => console.log(res))
    .catch(err => console.error(err));