Jak odeslat požadavek JSON pomocí XMLHttpRequest (XHR)

V mém předchozím článku jsme se podívali na to, jak vytvořit požadavek HTTP POST pomocí XMLHttpRequest (XHR) ve vanilla JavaScript. Vzhledem k tomu, že nejběžnější použití XHR je pro odesílání asynchronního požadavku s datovou částí JSON, je dobré vědět, jak na to.

JSON je zkratka pro JavaScript Object Notation a je oblíbeným formátem pro sdílení dat se serverem a zobrazení výsledku zpět klientovi.

Následující příklad ukazuje, jak můžete použít XHR k vytvoření požadavku JSON POST v JavaScriptu:

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));

Podívejte se na vytváření požadavků HTTP pomocí výukového programu XHR, kde se dozvíte o všech dostupných možnostech.

Použití rozhraní Fetch API

Pokud pracujete s moderními prohlížeči Pouze bych navrhoval použití Fetch API místo XHR. Má jasnou a stručnou syntaxi a také podporuje sliby:

// 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));