Difference between PUT and DELETE request in Vanilla JavaScript

0 0 2 minutes read

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.

Javascript

function easyHTTP() {
 
    // Initialising new XMLHttpRequest method.
    this.http = new XMLHttpRequest();
}
 
// Make an HTTP PUT Request
easyHTTP.prototype.put = function (url, data, callback) {
 
    // Open an object (POST, PATH,
    // ASYNC-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(
    'https://jsonplaceholder.typicode.com/posts/5',
    data, function (err, post) {
 
        if (err) {
            console.log(err);
        }
        else {
            console.log(post);
        }
 
    });

Example: The following code demonstrates the DELETE request method.

Javascript

function easyHTTP() {
 
    // Initialising new XMLHttpRequest method.
    this.http = new XMLHttpRequest();
}
 
// Make an HTTP Delete Request
easyHTTP.prototype.delete = function (url, callback) {
 
    // Open an object (GET/POST, PATH,
    // ASYNC-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(
    'https://jsonplaceholder.typicode.com/posts/1',
    function (err, response) {
        if (err) {
            console.log(err);
        } else {
            console.log(response);
        }
    });

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).