Teach with us

Get requests using AJAX by making a Custom HTTP library

We will learn to make a get request using the AJAX by making the custom HTTP library.

Let’s learn about the Get request and AJAX before we start with the tutorial. The Get request is used to get or fetch data from the API (Application programming interface). The AJAX stands for Asynchronous JavaScript and XML. The AJAX allows us to load or update new data without reloading the webpage.

For example, if you have ever worked with ReactJs, it updates the data without reloading the webpage. If we reload the webpage whenever data updates, it can give a bad user experience. Let’s take the example of Twitter. It updates the likes and retweet count without reloading the webpage. Suppose reloading the webpage whenever any tweet gets a like; it can be a bad user experience.

In JavaScript, generally, developers use the fetch() or Axios () module to make a Get request. In this tutorial, we will make our HTTP library to make a Get request.

Syntax and Algorithm

Step 1 − Create the CustomHTTPLibrary function, and initialize the new XML HTTP request using the XMLHTTPRequest method.

this.http = new XMLHttpRequest();

Step 2 − Add the GetRequest to the prototype of the CustomHTTPLibrary() function. Also, initialize the GetRequest with the function.

customHTTPLibrary.prototype.GetRequest = function (basURL, callBackFunction) {
   // code to manage the GET request
}

In the above syntax, baseURL is the URL to fetch data, and callBackFunction is a function to execute a successful response or error.

Step 3 − In the GetRequest function, call the arrow function when HTTP loads.

this.http.onload = () => {
}

Step 4 − In the onload function, check the response's status. If the response status is 200, data fetching is successful, and call the callback function with a response. If the response status code is other than 200, it means there is some error and calls the callback function with an error.

if (selfScope.http.status === 200) {
   // call the callback  function with a response
} else {
// call the callback function with the error
}

Step 5 − At the last, we need to send the http request.

this.http.send();

Step 6 − Our custom HTTP library is ready to make a Get request. Now, we need to use that library.

Step 7 − Create a new instance of the CustomHTTPLibrary function.

const httpLibrary = new customHTTPLibrary;

Step 8 − Now, use the httpLibrary object to make a get request from the API.

httpLibrary.GetRequest(URL,
(error, data) => {
   // handle error and data
});

In the above syntax, the URL is API to fetch data.

Example

In the example below, we have created a custom HTTP library to make a Get request using AJAX. First, we created the HTTP library and then used it by initializing the instance of the library.

Also, users can look at the code that manages the error and data in the response we get from the API.

<html>
<body>
   <h2>Making the <i>custom HTTP library</i> to Make a Get request using AJAX.</h2>
   <div id = "output"> </div>
   <script>
      let output = document.getElementById('output');

      function customHTTPLibrary() {

         // Initialising new XMLHttpRequest method
         this.http = new XMLHttpRequest();
      }

      // Make an HTTP GET Request
      customHTTPLibrary.prototype.GetRequest = function (basURL, callBackFunction) {
         this.http.open('GET', basURL, true);

         let selfScope = this;

         this.http.onload = () => {

            if (selfScope.http.status === 200) {

               callBackFunction(null, selfScope.http.responseText);
            } else {

               callBackFunction('Error in fetching the data : ' + selfScope.http.status);
            }
         }

         // At last, send the request
         this.http.send();
      }

      // Instantiating easyHTTP
      const httpLibrary = new customHTTPLibrary;

      httpLibrary.GetRequest('https://api.publicapis.org/entries',
      (error, data) => {
         if (error) {
            console.log(err);
         } else {
            data = JSON.parse(data);
            for (let item of data.entries) {
               output.innerHTML += data;
            }
         }
      });

   </script>
</body>
</html>

We learned to make a Get request using the AJAX by making the custom HTTP library. Also, users can try making the POST request using AJAX by making the custom HTTP library.

Updated on 16-Feb-2023 15:35:28

0 Views

Tutorials Point

Previous Page Next Page  
Advertisements