Understanding XML HttpRequest (XHR)

Welcome to The Coding College, your go-to destination for all things coding and programming! In this article, we’ll dive into XML HttpRequest (XHR), a fundamental concept in web development used for interacting with servers to fetch data or send information asynchronously.

What is XML HttpRequest (XHR)?

XML HttpRequest is an API provided by web browsers to send HTTP or HTTPS requests to a server and load the server response without reloading the webpage.

Key Features of XHR:

1. Asynchronous Communication: Allows sending/receiving data in the background without disrupting the user experience.
2. Data Exchange Formats: Although the name includes “XML,” XHR works with multiple data formats like JSON, plain text, and HTML.
3. Cross-Browser Support: Widely supported across all major browsers.

When to Use XML HttpRequest

• Fetching data from APIs or servers dynamically (e.g., user profiles, weather updates).
• Submitting form data without reloading the page.
• Implementing live search or autocomplete functionality.
• Loading parts of a webpage dynamically for better performance.

Syntax of XML HttpRequest

Here’s how to use XHR in JavaScript:

const xhr = new XMLHttpRequest();

Common Methods and Properties

Methods:

1. open(method, url, async)
   • Initializes the request.
   • method: HTTP method (GET, POST, etc.).
   • url: URL of the server resource.
   • async: Boolean (true for asynchronous, false for synchronous).
2. send(data)
   • Sends the request.
   • data: Optional data for POST requests.
3. setRequestHeader(header, value)
   • Sets HTTP headers for the request.

Properties:

1. responseText: Returns the server response as a string.
2. responseXML: Returns the server response as an XML document (if applicable).
3. status: HTTP status code of the response (e.g., 200 for success).
4. readyState: Indicates the current state of the request.

readyState Values:

Example: Using XML HttpRequest

1. Basic GET Request

This example demonstrates fetching data from a server using a GET request.

// Create a new XMLHttpRequest object
const xhr = new XMLHttpRequest();

// Open the request (GET method, URL, asynchronous)
xhr.open('GET', 'https://api.example.com/data', true);

// Set up a function to handle the response
xhr.onreadystatechange = function () {
    if (xhr.readyState === 4 && xhr.status === 200) {
        // Successfully received response
        console.log(JSON.parse(xhr.responseText));
    }
};

// Send the request
xhr.send();

2. Sending Data with POST Request

When sending data to the server, you often use a POST request with setRequestHeader.

// Create a new XMLHttpRequest object
const xhr = new XMLHttpRequest();

// Open the request (POST method)
xhr.open('POST', 'https://api.example.com/data', true);

// Set the Content-Type header
xhr.setRequestHeader('Content-Type', 'application/json');

// Set up a function to handle the response
xhr.onreadystatechange = function () {
    if (xhr.readyState === 4 && xhr.status === 200) {
        console.log('Data sent successfully:', JSON.parse(xhr.responseText));
    }
};

// Create JSON data to send
const data = JSON.stringify({ name: 'John Doe', age: 30 });

// Send the request with data
xhr.send(data);

3. Handling Errors

It’s important to handle errors in your XHR requests for better user experience.

const xhr = new XMLHttpRequest();
xhr.open('GET', 'https://api.example.com/invalid-url', true);

xhr.onreadystatechange = function () {
    if (xhr.readyState === 4) {
        if (xhr.status === 200) {
            console.log('Response:', xhr.responseText);
        } else {
            console.error('Error:', xhr.status, xhr.statusText);
        }
    }
};

xhr.send();

4. Fetching XML Data

If the server responds with XML, you can use the responseXML property.

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

xhr.onreadystatechange = function () {
    if (xhr.readyState === 4 && xhr.status === 200) {
        // Access the XML document
        const xmlDoc = xhr.responseXML;
        const items = xmlDoc.getElementsByTagName('item');
        for (let item of items) {
            console.log(item.textContent);
        }
    }
};

xhr.send();

Advantages of XML HttpRequest

1. Asynchronous Communication: Users can interact with the webpage while data is being fetched.
2. Supports Multiple Data Formats: Works with XML, JSON, HTML, and plain text.
3. Wide Compatibility: Supported in all modern browsers.

Limitations of XML HttpRequest

1. Verbose Syntax: Compared to modern alternatives like fetch, XHR is more complex to implement.
2. Limited Error Handling: Basic error-handling capabilities.
3. CORS Restrictions: Cross-Origin Resource Sharing policies might block requests to different domains.

Modern Alternatives to XML HttpRequest

While XHR is still widely used, modern alternatives like the Fetch API and Axios library offer simpler and more flexible syntax for handling HTTP requests.

Example: Fetch API

fetch('https://api.example.com/data')
    .then(response => response.json())
    .then(data => console.log(data))
    .catch(error => console.error('Error:', error));

When Should You Use XML HttpRequest?

Despite its limitations, XML HttpRequest is still used in legacy systems or projects where backward compatibility is essential. For newer projects, consider using modern APIs like fetch or libraries like Axios for better maintainability.

Learn More at The Coding College

At The Coding College, we’re dedicated to helping you understand web development fundamentals like XML HttpRequest and beyond. Check out our tutorials to expand your knowledge and improve your coding skills.

Conclusion

XML HttpRequest is a powerful tool for sending and receiving data from servers. Whether you’re building dynamic webpages or working with APIs, mastering XHR is a valuable skill.