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 request methods, let us look into HTTP methods.

What is PUT request method ?
It is used when the client is sending a replacement document or uploading a new document to the Web server under the request URL.

What is DELETE request method ?
It is used when the client is trying to delete a document from the web server, identified by the request URL.

Example: Let us look into an example of PUT request method.

filter_none

edit
close

play_arrow

link
brightness_4
code

function easyHTTP() {
  
    // Initialising new XMLHttpRequest method.
    this.http = new XMLHttpRequest();
}
  
// Make an HTTP PUT Request
easyHTTP.prototype.put = function (url, data, callback) {
  
    // Open an obejct (POST, PATH,
    // ASYN-TRUE/FALSE)
    this.http.open('PUT', url, true);
  
    // Set content-type
    this.http.setRequestHeader(
        'Content-type', 'application/json');
  
    // Assigning this to self to have scope
    // of this into the function onload()
    let self = this;
  
    // When the response is ready
    this.http.onload = function () {
  
        // Callback function (Error, response text)
        callback(null, self.http.responseText);
    }
  
    // Since the data is an object so
    // we need to stringify it
    this.http.send(JSON.stringify(data));
}
  
// Instantiating easyHTTP
const http = new easyHTTP;
  
// Data that we need to update
const data = {
    title: ‘Custom Putt’,
    body: ‘This is a custom put’
};
  
// Put prototype method(url,data,response text)
http.put(
    data, function (err, post) {
  
        if (err) {
            console.log(err);
        }
        else {
            console.log(post);
        }
  
    });

chevron_right


Example: The following code demonstrates the DELETE request method.

filter_none

edit
close

play_arrow

link
brightness_4
code

function easyHTTP() {
  
    // Initialising new XMLHttpRequest method.
    this.http = new XMLHttpRequest();
}
  
// Make an HTTP Delete Request
easyHTTP.prototype.delete = function (url, callback) {
  
    // Open an obejct (GET/POST, PATH,
    // ASYN-TRUE/FALSE)
    this.http.open('DELETE', url, true);
  
    // Assigning this to self to have  
    // scope of this into the function
    let self = this;
  
    // When the response is ready
    this.http.onload = function () {
  
        // Checking status
        if (self.http.status === 200) {
  
            // Callback function(Error, response text)
            callback(null, 'Post Deleted');
        } else {
  
            // Callback function (Error message)
            callback('Error: ' + self.http.status);
        }
    }
  
    // Send the request
    this.http.send();
}
  
// Instantiating easyHTTP
const http = new easyHTTP;
  
// Delete prototype method(URL, 
// callback(error,response text))
http.delete(
    function (err, response) {
        if (err) {
            console.log(err);
        } else {
            console.log(response);
        }
    });

chevron_right


Difference between PUT and DELETE:

PUT Request DELETE Request
It is used to Create or Modify a resource. It is used to delete a resource identified by a URL.
It is idempotent. It is also idempotent.
On successful resource creation, HTTP success code 201(Created). On successful deletion of record, we can see 200 (OK) or 204 (No Content).

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.