How to make PUT request using XMLHttpRequest by making Custom HTTP library ? - GeeksforGeeks

06 Sep, 2021
The task is to show how the XMLHttpRequest can be used to PUT/Update data to an API by making custom HTTP library. We will be taking a fake API which will contain Array of objects as an example and from that API we will show to PUT data by XMLHttpRequest method by making a custom HTTP library.Used API: https://jsonplaceholder.typicode.com/posts/5What is Ajax? Asynchronous JavaScript and XML, is used to communicate with the server without refreshing the web page and thus increasing the user experience and better performance. To read more about Ajax click on https://www.geeksforgeeks.org/ajax-introduction/.Prerequisites: Only the basic knowledge of HTML, CSS, and JavaScript is required.Note: First make a HTML file and add the HTML markup according to the requirement. In the bottom of the body tag attach two scripts file as library.js and app.js in the same order.Steps required to make library.js File:  
library.js file make a function easyHTTP to initialize a new XMLHttpRequest() method.Set easyHTTP.prototype.put to a function which contains three parameters ‘url’, data and callback.Now open an object using this.http.open function. It takes three parameters, the first one is request type (GET or POST or PUT or DELETE), second is the URL for the API and last one is a boolean value (true means asynchronous call and false means synchronous call).Now we will use onload function to display the data. But before that first we need to set content-type with this.http.setRequestHeader method and also assign this keyword to self to have scope of this keyword into onload function. The onload function is executed after the API call is done. This function will run a callback function which has two arguments as error and response text.Last step is to send the request using the send() function. It should be noted here that send() function needs to send data after converting object data to string using JSON.stringify(data).
library.js file make a function easyHTTP to initialize a new XMLHttpRequest() method.
Set easyHTTP.prototype.put to a function which contains three parameters ‘url’, data and callback.
Now open an object using this.http.open function. It takes three parameters, the first one is request type (GET or POST or PUT or DELETE), second is the URL for the API and last one is a boolean value (true means asynchronous call and false means synchronous call).
Now we will use onload function to display the data. But before that first we need to set content-type with this.http.setRequestHeader method and also assign this keyword to self to have scope of this keyword into onload function. The onload function is executed after the API call is done. This function will run a callback function which has two arguments as error and response text.
Last step is to send the request using the send() function. It should be noted here that send() function needs to send data after converting object data to string using JSON.stringify(data).
Steps required to make app.js File:  
First of all instantiate easyHTTP with new keyword.Create a custom data (object) to  put/update data.Pass URL, data and a callback function in put prototype function.The callback function contains two arguments error to print if any error occurs and response to get the actual response.
First of all instantiate easyHTTP with new keyword.
Create a custom data (object) to  put/update data.
Pass URL, data and a callback function in put prototype function.
The callback function contains two arguments error to print if any error occurs and response to get the actual response.
Filename: index.html  
html
<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <meta name="viewport" content=        "width=device-width, initial-scale=1.0">    <title>Put request</title></head><body>    <h1>        Put request using xmlhttpRequest/Ajax        by making custom HTTP library.    </h1>    <div class="result"></div>         <!-- Including library.js and app.js files -->    <script src="library.js"></script>    <script src="app.js"></script></body> </html>
Filename: library.js  
javascript
function easyHTTP() {   // Initializing new XMLHttpRequest method.  this.http = new XMLHttpRequest();} // Make an HTTP PUT RequesteasyHTTP.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 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));}
Filename: app.js  
javascript
// Instantiating easyHTTPconst http = new easyHTTP; // Data that that we need to updateconst 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);  }});
Output: Open your index.html file in any browser and open its console by right click->Inspect element->console. Hence you will see the below result.  
 
sooda367
sagartomar9927
JavaScript-Misc
Node.js-Misc
HTML
JavaScript
Node.js
Web Technologies
HTML
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
REST API (Introduction)
HTML Cheat Sheet - A Basic Guide to HTML
Design a web page using HTML and CSS
Form validation using jQuery
Angular File Upload
Remove elements from a JavaScript Array
Convert a string to an integer in JavaScript
Difference between var, let and const keywords in JavaScript
Differences between Functional Components and Class Components in React
How to calculate the number of days between two dates in javascript?