Get request using AJAX by making Custom HTTP library Last Updated : 13 Jul, 2020 Comments Improve Suggest changes Like Article Like Report The task is to show how the XMLHttpRequest can be used to get data from an API by making custom HTTP library. I will be taking a fake API that will contain an array of objects as an example and from that API, we will show to get data by XMLHttpRequest method by making a custom HTTP library. API link: https://jsonplaceholder.typicode.com/posts What is Ajax? Ajax or 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 are required. Note: First, make an HTML file and add the HTML markup according to the need. In the bottom of the body, two script files namely "library.js" and "app.js" in the same order are attached. Approach: Steps required to make "library.js" file are as follows. In library.js file, make a function easyHTTP to initialize a new XMLHttpRequest() method. Set easyHTTP.prototype.get to a function which contains two parameters 'url' and a callback. Now initiate an object using open function. It takes three parameters, the first one is 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. The onload function is executed after the API call is done. We will check for the success status. If the status code is 200, then we will run a callback function which itself contains two arguments error and response text. If status code is not 200, the callback function will simply print the error message. Last step is to send the request using the send() function. Steps required to create app.js file First of all instantiate easyHTTP with new keyword. Pass URL and a callback function in get prototype function. The callback function contains two arguments error to print errors occurring and response, to get the actual response. Implementation of above steps: HTML file: HTML <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content= "width=device-width, initial-scale=1.0"> <title>Get request</title> </head> <body> <h1> Get request using xmlhttpRequest/ Ajax by making custom HTTP library. </h1> <!-- Including library.js and app.js files --> <script src="library.js"></script> <script src="app.js"></script> </body> </html> library.js: JavaScript function easyHTTP() { // Initialising new XMLHttpRequest method this.http = new XMLHttpRequest(); } // Make an HTTP GET Request easyHTTP.prototype.get = function (url, callback) { // Open an obejct (GET/POST, PATH, // ASYN-TRUE/FALSE) this.http.open('GET', url, true); // Assigning this to self to have // scope of this into the function let self = this; // When response is ready this.http.onload = function () { // Checking status if (self.http.status === 200) { // Callback function (Error, response text) callback(null, self.http.responseText); } else { // Callback function (Error message) callback('Error: ' + self.http.status); } } // At last send the request this.http.send(); } app.js JavaScript // Instantiating easyHTTP const http = new easyHTTP; // Get prototype method(URL, callback(error, // response text)) http.get('https://jsonplaceholder.typicode.com/posts', function (err, posts) { if (err) { console.log(err); } else { // parsing string data to object let data = JSON.parse(posts); console.log(data); } }); Output: Comment More infoAdvertise with us Next Article Get request using AJAX by making Custom HTTP library T thacker_shahid Follow Improve Article Tags : JavaScript Web Technologies HTML Node.js jQuery-AJAX +1 More Similar Reads POST request using AJAX by making Custom HTTP library The task is to show how the XMLHttpRequest can be used to POST 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 POST data by XMLHttpRequest method by making a custom HTTP library. Used API: 4 min read Simple DELETE request using fetch API by making custom HTTP library Why fetch() API method is used? The fetch() method is used to send the requests to the server without refreshing the page. It is an alternative to the XMLHttpRequest object. We will be taking a fake API which will contain Array as an example and from that API we will show to DELETE data by fetch API 2 min read DELETE request using XMLHttpRequest by making Custom HTTP library The task here is to show how the XMLHttpRequest can be used to DELETE data to an API by making a custom HTTP library. A placeholder API that contains an array of objects would be used as an example. The DELETE request is performed on this API. The URL of the API is https://jsonplaceholder.typicode.c 3 min read How to make simple PUT request using fetch API by making custom HTTP library ? The fetch() method is used to send the requests to the server without refreshing the page. It is an alternative to the XMLHttpRequest object. It will be taking a fake API that will contain Array as an example and from that API we will show to PUT/Update  data by  fetch API  method by making custom H 2 min read GET and POST Requests using Fetch API with Custom HTTP Library This tutorial covers the basics of using the Fetch API to perform GET and POST requests within a custom HTTP library. Wiasynchronous operations and handling JSON data, you can effectively fetch data from remote APIs and submit data to servers. This approach gives you greater control and flexibility 3 min read How to make PUT request using XMLHttpRequest by making Custom HTTP library ? 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 A 3 min read Cowsay in Nodejs using Requests library Prerequisites: Basic knowledge of NodeJS and JavaScript. Also, you should have NodeJS installed on your machine.Using npm. A good resource. npm will get installed with NodeJS itself.Basic knowledge of command line or terminal. Essentially, we are going to use the requests library to make an API call 3 min read How to Replicate Postman POST API Request using AJAX ? In this project we'll mimic the action of submitting data using POST to a server from a web page. We replicate this process using AJAX (Asynchronous JavaScript and XML) directly in a web page, we're embedding similar functionality within our own interface. This involves setting up HTML elements like 4 min read How to get server response from an AJAX request using jQuery ? In this article, we will see how we can use jQuery to get the server response to an AJAX request. The jQuery ajax() method implements the basic Ajax functionality in jQuery. It communicates with the server via asynchronous HTTP requests. Syntax:$.ajax(url);$.ajax(url,[options]);Parameters:url: A URL 4 min read How to use an HTTP GET or POST for Ajax Calls? Sending an HTTP request to the server using AJAX is the most common way of fetching data these days. It provides us with methods to send and receive data. In this article, we are going to discuss GET and POST methods.GET method: This method is used to GET or RECEIVE the data from a file, API, etc.Ho 3 min read Like