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.
What is Ajax?
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.
- POST request using AJAX by making Custom HTTP library
- Simple GET and POST request using Fetch API method by making custom HTTP library
- DELETE request using XMLHttpRequest by making Custom HTTP library
- How to make PUT request using XMLHttpRequest by making Custom HTTP library ?
- How to make simple PUT request using fetch API by making custom HTTP library ?
- Simple DELETE request using fetch API by making custom HTTP library
- HTTP Request vs HapiJS Request in Node.js
- HTTP headers | Access-Control-Request-Headers
- HTTP headers | Access-Control-Request-Method
- How HTTP POST request work in node.js ?
- How to display search result of another page on same page using ajax in JSP?
- How to set timeout for ajax by using jQuery?
- How to use simple API using AJAX ?
- How to send a GET request from PHP?
- Express.js | app.get() Request Function
- Difference between Fetch and Axios.js for making http requests
- Ajax | Introduction
- How ajax works? Difference between angular js and jquery
- jQuery | ajax() Method
Implementation of above steps:
If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to firstname.lastname@example.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.