Making HTTP Requests in JavaScript: A Comprehensive Guide to Using XHR and Fetch API

Making HTTP requests is a fundamental part of web development. It allows you to communicate with a server, retrieve data and update your webpage dynamically. In this article, we will discuss how to make HTTP requests in JavaScript using the XMLHttpRequest (XHR) and the fetch() API. We will go over the basics of each method and provide examples on how to use them to retrieve data from a server.

XMLHttpRequest (XHR)

The XMLHttpRequest (XHR) is an API that allows you to make HTTP requests in JavaScript. It is a widely supported API that has been around for a long time and is supported by most modern browsers. The XHR is an object that can be used to make GET, POST, PUT and DELETE requests to a server.

Creating an instance of the XHR object is simple, you simply use the new keyword and the XMLHttpRequest() constructor. Once you have an instance, you can configure the request using the open() method. The open() method takes three arguments: the type of request (GET, POST, PUT, etc.), the URL of the server and a boolean indicating whether the request is asynchronous. Once the request is configured, you can send it using the send() method.

Here is an example of how to use the XHR to make a GET request to a server:

var xhr = new XMLHttpRequest();
xhr.open('GET', 'https://example.com', true);
xhr.onreadystatechange = function() {
    if (xhr.readyState === 4 && xhr.status === 200) {
        console.log(xhr.responseText);
    }
};
xhr.send();

In this example, we first create an instance of the XHR object and then configure it to make a GET request to the URL ‘https://example.com‘. We then attach an event handler to the onreadystatechange property, which will be called when the server responds to the request. The readyState property of the XHR object indicates the current state of the request, and the status property indicates the HTTP status code of the response. In this example, we only log the response text to the console if the ready state is 4 (request complete) and the status is 200 (OK).

You can also use the XHR to make other types of requests, such as POST or PUT, by simply changing the first argument of the open() method. Additionally, you can add headers and a request body to the request using the setRequestHeader() and send() method respectively.

Fetch API

The fetch() API is a more modern way to make HTTP requests in JavaScript. It is a simpler and more powerful way to fetch data from a server. The fetch() method returns a promise that resolves to the Response object. The Response object contains information about the response, such as the status code, headers and the response body.

Here is an example of how to use the fetch() method to make a GET request to a server:

fetch('https://example.com')
    .then(function(response) {
        return response.text();
    })
    .then(function(text) {
        console.log(text);
    });

In this example, we use the fetch() method to make a GET request to the URL ‘https://example.com‘. The fetch() method returns a promise that resolves

Conclusion

In conclusion, making HTTP requests in JavaScript is a fundamental part of web development and it allows you to communicate with a server, retrieve data and update your webpage dynamically. The XMLHttpRequest (XHR) and the fetch() API are two common ways to make HTTP requests in JavaScript. The XHR is an older API that has been around for a long time and is widely supported, while the fetch() API is a more modern and powerful way to fetch data from a server. We have discussed the basics of each method and provided examples on how to use them to retrieve data from a server. With this understanding, you will be able to make HTTP requests in your JavaScript applications with ease.