Difference between GET and POST request in Vanilla JavaScript - GeeksforGeeks

24 Nov, 2021
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() methodlet 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 dataxhr.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',    'http://dummy.restapiexample.com/api/v1/create', true);  // Setting content-typexhr.getResponseHeader('Content-type', 'application/json');  // Perform the following when the response is readyxhr.onload = function () {    if (this.status === 200) {        console.log(this.responseText)    }    else {        console.log("Some error occured")    }}  // Send the request as an object objobj = `{"name":"Selmon Bhoi",         "salary":"$10, 000", "age":"55"}`;xhr.send(obj);
Difference between GET and POST:
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.
bhaskargeeksforgeeks
JavaScript-Questions
JavaScript
Web Technologies
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
Remove elements from a JavaScript Array
Difference between var, let and const keywords in JavaScript
Difference Between PUT and PATCH Request
JavaScript | Promises
How to filter object array based on attributes?
Remove elements from a JavaScript Array
Installation of Node.js on Linux
How to fetch data from an API in ReactJS ?
How to insert spaces/tabs in text using HTML/CSS?
Difference between var, let and const keywords in JavaScript