XML HttpRequest

The XMLHttpRequest (XHR) object is used in JavaScript to interact with servers asynchronously. It allows you to fetch data without refreshing the page, commonly used in AJAX operations.

Basic Syntax

let xhr = new XMLHttpRequest();
xhr.open("GET", "data.xml", true);
xhr.send();

Example: Fetching XML Data

HTML & JavaScript

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>XMLHttpRequest Example</title>
    <script>
        function loadXML() {
            let xhr = new XMLHttpRequest();
            xhr.onreadystatechange = function () {
                if (this.readyState == 4 && this.status == 200) {
                    let xmlDoc = this.responseXML;
                    let items = xmlDoc.getElementsByTagName("item");
                    let output = "<ul>";
                    for (let i = 0; i < items.length; i++) {
                        output += "<li>" + items[i].textContent + "</li>";
                    }
                    output += "</ul>";
                    document.getElementById("result").innerHTML = output;
                }
            };
            xhr.open("GET", "data.xml", true);
            xhr.send();
        }
    </script>
</head>
<body>

    <button onclick="loadXML()">Load XML Data</button>
    <div id="result"></div>

</body>
</html>

Example XML File (data.xml)

<?xml version="1.0" encoding="UTF-8"?>
<items>
    <item>Item 1</item>
    <item>Item 2</item>
    <item>Item 3</item>
</items>

XHR Methods

open(method, url, async): Initializes request (GET, POST, etc.).
send(): Sends request to the server.
setRequestHeader(header, value): Sets HTTP headers.

XHR Ready States

Alternative: Using `fetch()` (Modern Approach)

XHR is often replaced by fetch():

fetch("data.xml")
    .then(response => response.text())
    .then(str => new window.DOMParser().parseFromString(str, "text/xml"))
    .then(xmlDoc => {
        let items = xmlDoc.getElementsByTagName("item");
        let output = "<ul>";
        for (let i = 0; i < items.length; i++) {
            output += "<li>" + items[i].textContent + "</li>";
        }
        output += "</ul>";
        document.getElementById("result").innerHTML = output;
    });

Would you like an example with POST requests using XMLHttpRequest?

About It E Research

This is a short description in the author block about the author. You edit it by entering text in the "Biographical Info" field in the user admin panel.