Get request using AJAX by making Custom HTTP library

Last Updated : 13 Jul, 2020

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:

DELETE request using XMLHttpRequest by making Custom HTTP library

thacker_shahid

Improve

Article Tags :

Get request using AJAX by making Custom HTTP library

Similar Reads

Thank You!

What kind of Experience do you want to share?