Open In App

Difference between GET and POST request in Vanilla JavaScript

Last Updated : 13 Jun, 2022
Improve
Improve
Like Article
Like
Save
Share
Report

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.

Javascript




// Instantiating new XMLHttpRequest() method
let xhr = new XMLHttpRequest();
 
// open() method to pass request
// type, url and async true/false
xhr.open('GET',
 
// 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.

Javascript




// Instantiating new XMLHttpRequest()
let xhr = new XMLHttpRequest();
 
// open() method to pass request
// type, url and async true/false
xhr.open('POST',
 
// 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:

S.No.

                      GET Request

                               POST Request

1.

GET retrieves a representation of the specified resource.

POST is for writing data, to be processed to the identified resource.

2.

It typically has relevant information in the URL of the request.

It typically has relevant information in the body of the request.

3.

It is limited by the maximum length of the URL supported by the browser and web server.

It does not have such limits.

4.

It is the default HTTP method.

In this, we need to specify the method as POST to send a request with the POST method.

5.

You can bookmark GET requests.

You cannot bookmark POST requests.

6.

It is less secure because data sent is part of the URL

It is a little safer because the parameters are not stored in browser history or in web server logs.

7.

It is cacheable.

It is not cacheable.

8.

For eg. GET the page showing a particular question.

For eg. Send a POST request by clicking the “Add to cart” button.



Similar Reads

Difference between PUT and DELETE request in Vanilla JavaScript
PUT and DELETE are the two different types of HTTP request methods. HTTP protocol supports many methods to transfer data from the server or do any operation on the server. The HTTP protocol supports the following methods, e.g. GET, POST, PUT, DELETE, PATCH, COPY, HEAD, OPTIONS, etc. Before we dive into the main difference between PUT and DELETE req
3 min read
Pre-request and Post-request scripts in Postman
Postman is a powerful tool for testing APIs, and its pre-request and post-request scripts allow you to customize requests and responses. it is an API(utility programming interface) development device that enables construction, taking a look at and altering APIs. It could make numerous varieties of HTTP requests(GET, POST, PUT, PATCH), store environ
4 min read
Difference between PUT and POST HTTP Request in Express and Postman
Both PUT and POST are request methods used in the HTTP protocol. In this article, we will introduce the HTTP methods such as PUT and POST in detail, and we will also discuss in detail when to use PUT and when to use POST. Table of Content PUT methodPOST MethodDifference between PUT and POST methodConclusionPUT methodPUT is one of the HTTP request m
6 min read
Simple GET and POST request using Fetch API method by making custom HTTP library
The fetch() method is used to send the requests to the server without refreshing the page. It is an alternative to the XMLHttpRequest object. We will be taking a dummy API that will contain an array of array as an example and we will show GET and POST data by Fetch API method by making custom HTTP library. Used API: https://jsonplaceholder.typicode
3 min read
JavaScript Post Request Like a Form Submit
Many web developers face the challenge of emulating the functionality of a form submission using a JavaScript POST request in situations where a form is not available or appropriate. The problem requires finding a way to replicate the behavior of a form submission using JavaScript, with the goal of accurately sending data to a server and receiving
4 min read
Design Hit the Mouse Game using HTML, CSS and Vanilla Javascript
In this article, we are going to create a game in which a mouse comes out from the holes, and we hit the mouse with a hammer to gain points. It is designed by using HTML, CSS & Vanilla JavaScript. HTML Code: First, we create an HTML file (index.html).Now after creating the HTML file, we are going to give a title to our webpage using the <tit
5 min read
Responsive analog clock using HTML, CSS and Vanilla JavaScript
In this article, we are going to create an Analog Clock. This is mainly based on HTML, CSS & Vanilla JavaScript. Approach: Create an HTML file in which we are going to add the main div, further on we are adding 4 div tags for an hour, minute, and second hands & for the pin.Create a CSS file for styling our web page and for assigning differe
4 min read
HTTP Request vs HapiJS Request in Node.js
Node.js: Node.js is an open-source and cross-platform runtime environment for executing JavaScript code outside a browser. You need to remember that NodeJS is not a framework and it’s not a programming language. Most of the people are confused and understand it’s a framework or a programming language. We often use Node.js for building back-end serv
3 min read
How to detect AJAX request to normal request in Node.js ?
Ajax stands for asynchronous javascript and XML that is used to make dynamic requests to the server while the client is running. There are two techniques to detect AJAX requests in Nodejs which are Check the headers of the request and if it contains HTTP_X_REQUESTED_WITH having a value of XMLHttpRequest then it is an ajax request.When you make an A
3 min read
When to use Vanilla JavaScript vs jQuery ?
Earlier, the websites used to be static. However, the introduction of vanilla JavaScript revolutionized the way websites used to look and function. Vanilla JS helped the developers in creating dynamic websites. Then came jQuery, a library of tools created by developers around the world, using Javascript. In simple words, jQuery is a lightweight and
4 min read