Difference between GET and POST request in Vanilla JavaScript

GET and POST are 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 us look at what does these HTTP methods.

What is 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 request actually works.

What is 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.

Example: The example demonstrates GET request method.

filter_none

edit
close

play_arrow

link
brightness_4
code

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

chevron_right


Example: The example demonstrates POST request method.

filter_none

edit
close

play_arrow

link
brightness_4
code

// 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 occured")
       }
   }
 
   // Send the request as an object obj
   obj = `{"name":"Selmon Bhoi"
       "salary":"$10, 000", "age":"55"}`;
   xhr.send(obj);

chevron_right


Difference between GET and POST:

                      GET REQUEST                                POST REQUEST
GET retrieves a representation of the specified resource. POST is for writing data, to be processed to the identified resource.
It typically has relevant information in the URL of the request. It typically has relevant information in the body of the request.
It is limited by the maximum length of the URL supported by the browser and web server. It does not have such limits.
It is the default HTTP method. In this we need to specify the method as POST to send a request with the POST method.
You can bookmark GET request. You cannot bookmark POST request.
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.
It is cacheable. It is not cacheable.
Ex. GET the page showing a particular question. Ex. Send a POST request by clicking the “Add to cart” button.

full-stack-img




My Personal Notes arrow_drop_up

Check out this Author's contributed articles.

If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.

Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.


Article Tags :

Be the First to upvote.


Please write to us at contribute@geeksforgeeks.org to report any issue with the above content.