What is XHR request

XMLHttpRequest (XHR) is a built-in JavaScript object that allows you to make HTTP requests to a server and retrieve data without the need to reload the entire web page. It provides a way to communicate with servers asynchronously, enabling the development of dynamic and interactive web applications.

The basic steps involved in making an XHR request are as follows:

1. Create an instance of XMLHttpRequest: You start by creating a new instance of the XMLHttpRequest object using the new XMLHttpRequest() constructor.
2. Configure the request: Set the desired properties and parameters for the request. This includes specifying the HTTP method (GET, POST, PUT, DELETE, etc.), the URL of the server endpoint you want to communicate with, and any additional headers or data you need to send.
3. Set up event handlers: Define functions to handle different events during the request lifecycle. Common events include onload (when the request is successfully completed), onerror (when an error occurs), onprogress (to track the progress of the request), and more.
4. Send the request: Use the send() method to initiate the actual request. If you are making a POST or PUT request, you can pass data as the argument to the send() method.
5. Process the response: Once the request is completed, you can access the server’s response through the responseText or responseXML properties of the XMLHttpRequest object. You can then manipulate or display the received data as needed.

Make a XHR request:

Here’s an example of making a basic XHR GET request:

javascriptCopy codevar xhr = new XMLHttpRequest();
xhr.open('GET', 'https://api.example.com/data', true);

xhr.onload = function() {
  if (xhr.status >= 200 && xhr.status < 400) {
    var response = xhr.responseText;
    // Process the response data
    console.log(response);
  } else {
    // Handle error
    console.error('An error occurred.');
  }
};

xhr.onerror = function() {
  // Handle error
  console.error('An error occurred.');
};

xhr.send();

In this example, an XHR GET request is made to https://api.example.com/data. The onload event handler is triggered when the request is successfully completed. If the status code of the response falls within the 200-399 range, the response data is processed. Otherwise, the onerror event handler is triggered.

XHR requests provide a way to interact with server-side APIs, retrieve data, and update the web page dynamically, all without requiring a full page reload. It is widely used in web development to implement AJAX functionality and build responsive and interactive web applications.