XMLHttpRequest (XHR) Explained

Key Concepts

XMLHttpRequest (XHR) is a built-in JavaScript object that allows you to make HTTP requests to retrieve data from a server without needing to reload the entire page. The key concepts include:

• Creating an XHR Object
• Handling XHR Events
• Sending XHR Requests
• Handling XHR Responses
• Error Handling

Creating an XHR Object

To use XHR, you first need to create an instance of the XMLHttpRequest object.

const xhr = new XMLHttpRequest();
    

Handling XHR Events

XHR objects emit various events that you can listen to, such as load, error, and progress. These events help you track the status of your request.

xhr.addEventListener('load', function() {
    if (xhr.status === 200) {
        console.log('Request successful');
    } else {
        console.log('Request failed');
    }
});

xhr.addEventListener('error', function() {
    console.log('An error occurred during the request');
});
    

Sending XHR Requests

You can send different types of requests (GET, POST, etc.) using the open and send methods. The open method initializes the request, and the send method sends it.

xhr.open('GET', 'https://api.example.com/data', true);
xhr.send();
    

Handling XHR Responses

Once the request is complete, you can access the response data using the responseText or responseXML properties, depending on the type of data returned.

xhr.addEventListener('load', function() {
    if (xhr.status === 200) {
        const data = JSON.parse(xhr.responseText);
        console.log(data);
    }
});
    

Error Handling

It's important to handle errors gracefully. You can use the error event to catch and handle any issues that arise during the request.

xhr.addEventListener('error', function() {
    console.log('An error occurred during the request');
});
    

Examples and Analogies

Imagine XHR as a messenger who delivers messages between your web page and a server. The key steps are:

• Creating an XHR Object: Assembling the messenger.
• Handling XHR Events: Listening for the messenger's updates.
• Sending XHR Requests: Giving the messenger a message to deliver.
• Handling XHR Responses: Receiving and reading the messenger's reply.
• Error Handling: Dealing with any issues the messenger encounters.