API Call in JavaScript Using XMLHttpRequest

XMLHttpRequest is an object used to make API calls in JavaScript. Before the release of ES6 which came with Fetch and libraries like Axios in 2015, it is the only way to call API.

XMLHttpRequests are still used in multiple places because all new and old browsers support this. 

• To implement advanced features like request cancellation and progress tracking, XMLHttpRequest is used.
• To maintain old codebases which are written before the announcement of ES6, we use XMLHttpRequest

Example: In this example, XMLHttpRequest is used to make an API call.

Explanation of the above code

Step A: Create an instance of XMLHttpRequest object.

const xhttpr = new XMLHttpRequest();

Step B: Make an open connection with the API endpoint by providing the necessary HTTP method and URL.

xhttpr.open('GET', 'Api_address', true);

Here ‘true’ represents that the request is asynchronous.

Step C: Send the API request

xhttpr.send();

Step D: Create a function onload when the request is completely received or loaded:

xhttpr.onload = ()=> {
  if (xhttpr.status === 200) {
      const response = JSON.parse(xhttpr.response);
      // Process the response data here
  } else {
      // Handle error
  }
};

status – HTTP status code of the response.

Since it is recommended to use newer alternatives like fetch and Axios. But using XMLHttpRequest will give you an understanding of the request-response lifecycle and how HTTP request works. This is how JavaScript API is called using XMLHttpRequest.

API(Application Programming Interface) is a set of protocols, rules, and tools that allow different software applications to access allowed functionalities, and data, and interact with each other. API is a service created for user applications that request data or some functionality from servers.

To give specific access to our system to other applications that may be useful to them, developers create APIs and give them endpoints to interact and access the server data. While working with JavaScript it is common to interact with APIs to fetch data or send requests to the server.

4 Ways to Make an API Call in JavaScript: