Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
Get Requests Using AJAX with 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.
221 Views
