Difference between GET and POST request in Vanilla JavaScript

In this article, we will learn about the GET & POST request method in vanilla Javascript, & will also understand these 2 methods through the examples.

GET and POST is two different types of HTTP request methods. HTTP protocol supports many methods to transfer data from the server or perform any operation on the server. The HTTP protocol supports the methods, e.g. GET, POST, PUT, DELETE, PATCH, COPY, HEAD, OPTIONS, etc. Before we dive into the main difference between GET and POST request methods, let's have a look at what does these HTTP methods are.

• GET request() Method: Data is being requested from a specific resource (through some API URL). Here in the example, a dummy API is used to demonstrate, how GET requests actually work.
• POST request() Method: Data is sent to be processed to a specific resource (through some API URL). Here in the example, a dummy API is used to demonstrate, how POST request actually works.

The GET & POST request methods are used by the fetch() method that is used to request to the server and load the information in the webpages.

Example: The example demonstrates the GET request method.

// Instantiating new XMLHttpRequest() method
let xhr = new XMLHttpRequest();

// open() method to pass request
// type, url and async true/false 
xhr.open('GET',
    'https://jsonplaceholder.typicode.com/users/2', true);

// onload function to get data 
xhr.onload = function () {
    if (this.status === 200) {
        console.log(JSON.parse(this.responseText));
    }
}

// Send function to send data
xhr.send()

Example: The example demonstrates the POST request method.

// Instantiating new XMLHttpRequest()
let xhr = new XMLHttpRequest();

// open() method to pass request
// type, url and async true/false 
xhr.open('POST',
    'http://dummy.restapiexample.com/api/v1/create', true);

// Setting content-type
xhr.getResponseHeader('Content-type', 'application/json');

// Perform the following when the response is ready
xhr.onload = function () {
    if (this.status === 200) {
        console.log(this.responseText)
    }
    else {
        console.log("Some error occurred")
    }
}

// Send the request as an object obj
obj = `{"name":"Selmon Bhoi", 
        "salary":"$10, 000", "age":"55"}`;
xhr.send(obj);

Difference between GET and POST: