AJAX XML

Parse and display XML data dynamically with AJAX

📋 What is AJAX XML?

AJAX XML combines AJAX with XML data format. JavaScript fetches XML documents from servers and parses them to extract and display data dynamically, enabling structured data exchange between client and server. 


// Fetch and parse XML
fetch("data.xml")
    .then(response => response.text())
    .then(str => new DOMParser().parseFromString(str, "text/xml"))
    .then(data => console.log(data));

Output:

#document (XML Document Object)

Key XML Concepts

AJAX XML processing involves fetching XML files or responses from servers, parsing the XML structure using JavaScript's DOM parser, and extracting specific elements and attributes to display meaningful information on web pages.

📥

Fetch XML

Request XML from server 

xhr.open("GET", 
    "data.xml", true);
🔍

Parse XML

Convert to DOM object 

var xml = 
    xhr.responseXML;
📖

Extract Data

Get elements and values 

var items = xml
    .getElementsByTagName("item");
🖥️

Display Data

Show on web page 

element.innerHTML = 
    item.textContent;

🔹 Sample XML File

First, let's create an XML file to work with:

🔸 books.xml 

<?xml version="1.0" encoding="UTF-8"?>
<library>
    <book id="1">
        <title>PHP Basics</title>
        <author>John Doe</author>
        <price>29.99</price>
    </book>
    <book id="2">
        <title>JavaScript Guide</title>
        <author>Jane Smith</author>
        <price>34.99</price>
    </book>
    <book id="3">
        <title>AJAX Mastery</title>
        <author>Bob Johnson</author>
        <price>39.99</price>
    </book>
</library>

🔹 Loading XML with AJAX

Fetch and parse XML using XMLHttpRequest: 

function loadXML() {
    var xhr = new XMLHttpRequest();
    xhr.open("GET", "books.xml", true);
    
    xhr.onload = function() {
        if (xhr.status == 200) {
            // Get XML document
            var xml = xhr.responseXML;
            
            // Get all book elements
            var books = xml.getElementsByTagName("book");
            
            console.log("Total books: " + books.length);
            
            // Display first book title
            var firstTitle = books[0].getElementsByTagName("title")[0].textContent;
            console.log("First book: " + firstTitle);
        }
    };
    
    xhr.send();
}

loadXML();

Console Output:

Total books: 3
First book: PHP Basics

🔹 Displaying XML Data

Parse XML and display it in HTML: 

<button onclick="displayBooks()">Load Books</button>
<div id="bookList"></div>

<script>
function displayBooks() {
    var xhr = new XMLHttpRequest();
    xhr.open("GET", "books.xml", true);
    
    xhr.onload = function() {
        var xml = xhr.responseXML;
        var books = xml.getElementsByTagName("book");
        
        var html = "<h3>Book Catalog</h3>";
        
        for (var i = 0; i < books.length; i++) {
            var title = books[i].getElementsByTagName("title")[0].textContent;
            var author = books[i].getElementsByTagName("author")[0].textContent;
            var price = books[i].getElementsByTagName("price")[0].textContent;
            
            html += `<div style="border: 1px solid #ccc; padding: 10px; margin: 10px 0;">
                        <h4>${title}</h4>
                        <p>Author: ${author}</p>
                        <p>Price: $${price}</p>
                     </div>`;
        }
        
        document.getElementById("bookList").innerHTML = html;
    };
    
    xhr.send();
}
</script>

Output:

Book Catalog

PHP Basics

Author: John Doe

Price: $29.99

JavaScript Guide

Author: Jane Smith

Price: $34.99

🔹 Reading XML Attributes

Access XML element attributes: 

function readAttributes() {
    var xhr = new XMLHttpRequest();
    xhr.open("GET", "books.xml", true);
    
    xhr.onload = function() {
        var xml = xhr.responseXML;
        var books = xml.getElementsByTagName("book");
        
        for (var i = 0; i < books.length; i++) {
            // Get attribute value
            var bookId = books[i].getAttribute("id");
            var title = books[i].getElementsByTagName("title")[0].textContent;
            
            console.log(`Book ID: ${bookId}, Title: ${title}`);
        }
    };
    
    xhr.send();
}

readAttributes();

Console Output:

Book ID: 1, Title: PHP Basics
Book ID: 2, Title: JavaScript Guide
Book ID: 3, Title: AJAX Mastery

🔹 PHP Generating XML

Create XML dynamically with PHP:

🔸 PHP (generate_xml.php) 

<?php
header("Content-Type: text/xml");

echo '<?xml version="1.0" encoding="UTF-8"?>';
echo '<users>';

// Sample data
$users = [
    ["id" => 1, "name" => "John", "email" => "[email protected]"],
    ["id" => 2, "name" => "Jane", "email" => "[email protected]"]
];

foreach ($users as $user) {
    echo "<user id='{$user['id']}'>";
    echo "<name>{$user['name']}</name>";
    echo "<email>{$user['email']}</email>";
    echo "</user>";
}

echo '</users>';
?>

🔸 JavaScript 

fetch("generate_xml.php")
    .then(response => response.text())
    .then(str => new DOMParser().parseFromString(str, "text/xml"))
    .then(xml => {
        var users = xml.getElementsByTagName("user");
        console.log("Users found: " + users.length);
    });

Output:

Users found: 2

🔹 Modern Approach with Fetch

Use Fetch API for cleaner XML handling: 

async function loadBooksModern() {
    try {
        // Fetch XML
        const response = await fetch("books.xml");
        const text = await response.text();
        
        // Parse XML
        const parser = new DOMParser();
        const xml = parser.parseFromString(text, "text/xml");
        
        // Extract data
        const books = xml.getElementsByTagName("book");
        
        let output = "";
        for (let book of books) {
            const title = book.querySelector("title").textContent;
            const author = book.querySelector("author").textContent;
            output += `📚 ${title} by ${author}<br>`;
        }
        
        document.getElementById("result").innerHTML = output;
        
    } catch (error) {
        console.error("Error loading XML:", error);
    }
}

loadBooksModern();

Output:

📚 PHP Basics by John Doe
📚 JavaScript Guide by Jane Smith
📚 AJAX Mastery by Bob Johnson

🔹 Creating XML Table

Display XML data in an HTML table: 

function createTable() {
    fetch("books.xml")
        .then(response => response.text())
        .then(str => new DOMParser().parseFromString(str, "text/xml"))
        .then(xml => {
            const books = xml.getElementsByTagName("book");
            
            let table = `<table border="1" style="width:100%; border-collapse:collapse;">
                           <tr>
                               <th>ID</th>
                               <th>Title</th>
                               <th>Author</th>
                               <th>Price</th>
                           </tr>`;
            
            for (let book of books) {
                const id = book.getAttribute("id");
                const title = book.querySelector("title").textContent;
                const author = book.querySelector("author").textContent;
                const price = book.querySelector("price").textContent;
                
                table += `<tr>
                            <td>${id}</td>
                            <td>${title}</td>
                            <td>${author}</td>
                            <td>$${price}</td>
                          </tr>`;
            }
            
            table += "</table>";
            document.getElementById("tableContainer").innerHTML = table;
        });
}

createTable();

Output:

ID Title Author Price
1 PHP Basics John Doe $29.99
2 JavaScript Guide Jane Smith $34.99

🧠 Test Your Knowledge

Which property returns the XML document from XMLHttpRequest?