XHR

What is XHR? XHR stands for XML Http Request. It's an older form of making https requests for data from a Web Server. While not commonly used anymore, we'll discuss it here briefly, for some background on other, newer methods of sending requests to servers.

As we stated, this is an older method of sending http data requests to a server API. That being said, all modern browsers have a built-in XMLHttpRequest object to request data from a web server. The XMLHttpRequest object was said to be a developers dream, because you can:

• Update a web page without reloading the page
• Request data from a server - after the page has loaded
• Receive data from a server - after the page has loaded
• Send data to a server - in the background

More Info At : W3Schools XML HttpRequest and MDN XMLHttpRequest

XHR Example

We're going to be sending a request to the Star Wars API and requesting data for Person 1, which is Luke Skywalker. The result of our API XHR HTTP Request will be logged to the console.

First we need to create a new XHR request:

• const req = new XMLHttpRequest();

Next we need to check for a successful result, and process the returned data:

• req.onload = function () {
  • // parse the returned data into JSON data
  • const data = JSON.parse(this.responseText);
  • // log the JSON data to the console
  • console.log(data);
• };

If the request returned an error:

• req.onerror = function () {
  • // console log the error
  • console.log("ERROR!!!!");
  • console.log(this);
• };

And finally, send the GET request:

• req.open("GET", "https://swapi.dev/api/people/1/");
• req.send();

This sends a GET request to the Star Wars API, and we're requesting data on Person 1, which is Luke Skywalker. The output of the result of this request has been logged to the console.

One of the main problems with XHR HTTP Requests, and one of the reasons it it not used anymore is within the coding. In our Star Wars API example, we sent one request for one data set. But if we wanted to send multiple request for multiple data sets, the code starts to become lengthy and hard to read. This is one of the reasons why XHR HTTP Requests were replaced with fetch requests, which are discussed here.

Here's the final Code:

• JavaScript
• // create a NEW XHR request
• const req = new XMLHttpRequest();
•  
• // if request was successful
• req.onload = function () {
  • // parse the returned data into JSON data
  • const data = JSON.parse(this.responseText);
  • // log the JSON data to the console
  • console.log(data);
• };
•  
• // if request returned an error
• req.onerror = function () {
  • // console log the error
  • console.log("ERROR!!!!");
  • console.log(this);
• };
•  
• // request the data
• // sends a GET request to Star Wars API for "person 1" (Luke Skywalker)
• req.open("GET", "https://swapi.dev/api/people/1/");
• req.send();