Dorokhov.codes

13. Working with requests

Working with a form

FormData

The FormData object lets you compile a set of key/value pairs to send using XMLHttpRequest.

When we use FormData in XMLHttpRequest, request headers are filled automatically.

const formData = new FormData();

formData.append("name", "Andrew");
formData.append("surname", "Dorokhov");

// XMLHttpRequest.
request.send(formData);

Retrieving a FormData object from an HTML form:

const form = document.querySelector("form");
const formData = new FormData(form);

// XMLHttpRequest.
request.send(formData);

Convert FormData to an object:

const jsonObject = formData.reduce((acc, [key, val]) => {
    acc[key] = val;
    return acc;
}, {});

// Or:
const jsonObject = Object.fromEntries(formData.entries());

Send using jQuery:

// Take a look at:
// https://stackoverflow.com/questions/6974684/how-to-send-formdata-objects-with-ajax-requests-in-jquery
$.ajax({
    url: "test.php",
    data: formData
});

Form elements

inputElement.value;         // input value.
checkboxElement.checked;    // boolean

Resetting a form

There’s the reset() method for this action.

const form = document.querySelector('form');

form.reset();

Example of how to reset after submit:

form.addEventListener('submit', (e) => {
    e.preventDefault();
    e.target.reset();
});

Event handler

const form = document.querySelector('form');

form.addEventListener('submit', (e) => {
    e.preventDefault();
    // ...
});

Working with a server

We have several ways to communicate with a server.

Fetch API

Unlike XMLHttpRequest that is a callback-based API, Fetch is promise-based and provides a better alternative.

fetch('https://example.com/movies.json')
  .then(response => response.json())
  .then(data => console.log(data));

With request parameters:

fetch('https://google.com', {
    method: "POST",
    body: JSON.stringify({name: 'Andrew'}),
    headers: {
        'Content-type': 'application/json'
    }
})
    .then(response => response.text())
    .then(text => console.log(text));

Send a FormData object:

fetch('https://google.com', {
    method: "POST",
    body: formData
}).then(() => {
    console.log("Done!");
});

XMLHttpRequest

Despite its name, XMLHttpRequest can be used to retrieve any type of data, not just XML.

Send a request:

const request = new XMLHttpRequest();

request.open('GET', 'js/information.json');
request.setRequestHeader('Content-type', 'application/json; charset=utf-8');
request.send();

Handle a response:

request.addEventListener('readystatechange', () => {
    // The XMLHttpRequest.readyState property returns the state an XMLHttpRequest client is in. 
    // An XHR client can exist in five states. "4" is "DONE".
    if (request.readyState === 4 && request.status === 200) {
        // Done!
        console.log(request.response);
    }
});

request.addEventListener('load', () => {
    if (request.status === 200) {
        // Done!
        console.log(request.response);
    }
});