Chapter 21: XML AJAX
XML + AJAX — written as if I’m sitting next to you, explaining everything step by step like a patient teacher.
We will go slowly and clearly:
- What AJAX really is
- Why it was historically connected with XML
- Why the name is misleading today
- How AJAX works in practice (with and without XML)
- Realistic, modern examples you can actually try
- Common patterns people still use in 2025–2026
Let’s begin.
1. What is AJAX? (The clearest explanation)
AJAX = Asynchronous JavaScript and XML
It is not a programming language or a new technology.
It is a technique / pattern that allows web pages to:
- Send data to a server
- Receive data from a server
- Update parts of the page without reloading the entire page
The name “AJAX” was invented around 2005 when people started doing this heavily, and at that time XML was the most common data format being exchanged.
Important truth in 2025–2026:
Today almost nobody uses XML with AJAX anymore. The name AJAX stuck, but in reality most AJAX calls use JSON.
Still — understanding the original XML-based AJAX is important because:
- You will see it in very old codebases
- Many tutorials/books still teach it this way
- Some legacy enterprise systems (banks, government portals, ERP integrations) still return XML
2. Classic AJAX with XML – How it looked ~2005–2015
Typical flow:
- JavaScript creates an XMLHttpRequest object
- Sends a request to the server (GET or POST)
- Server returns data as XML
- JavaScript parses the XML and updates the page
Very classic example (XMLHttpRequest + XML response)
HTML page
HTML
|
0 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 |
<!DOCTYPE html> <html> <head> <title>AJAX with XML – Classic Example</title> <style> #result { margin: 20px; padding: 15px; border: 1px solid #ccc; } </style> </head> <body> <h2>Student Information</h2> <button onclick="loadStudent(101)">Load Student 101</button> <button onclick="loadStudent(102)">Load Student 102</button> <div id="result">Click a button to load data...</div> <script> function loadStudent(id) { const xhr = new XMLHttpRequest(); xhr.open("GET", `get-student.php?id=${id}`, true); xhr.onreadystatechange = function() { if (xhr.readyState === 4 && xhr.status === 200) { // We got XML back const xml = xhr.responseXML; if (xml) { const name = xml.getElementsByTagName("name")[0].textContent; const classNum = xml.getElementsByTagName("class")[0].textContent; const marks = xml.getElementsByTagName("marks")[0].textContent; document.getElementById("result").innerHTML = ` <strong>Name:</strong> ${name}<br> <strong>Class:</strong> {classNum}<br> <strong>Total Marks:</strong> ${marks} `; } else { document.getElementById("result").innerHTML = "Error: No XML data"; } } }; xhr.onerror = function() { document.getElementById("result").innerHTML = "Network error"; }; xhr.send(); } </script> </body> </html> |
Server-side PHP file (get-student.php) — returns XML
PHP
|
0 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 |
<?php header('Content-Type: application/xml; charset=utf-8'); // Simulate database $students = [ 101 => ['name' => 'Priyanka Reddy', 'class' => 'XI-A', 'marks' => '485/500'], 102 => ['name' => 'Rahul Sharma', 'class' => 'XII-B', 'marks' => '462/500'] ]; $id = isset($_GET['id']) ? (int)$_GET['id'] : 0; echo '<?xml version="1.0" encoding="UTF-8"?>'; ?> <student> <id><?php echo $id; ?></id> <name><?php echo htmlspecialchars($students[$id]['name'] ?? 'Not found'); ?></name> <class><?php echo htmlspecialchars($students[$id]['class'] ?? 'N/A'); ?></class> <marks><?php echo htmlspecialchars($students[$id]['marks'] ?? 'N/A'); ?></marks> </student> |
What happens when you click the button:
- Browser sends GET request → get-student.php?id=101
- Server returns XML
- JavaScript receives it as responseXML (parsed DOM)
- Extracts values using DOM methods (getElementsByTagName)
- Updates only the <div id=”result”> — no page reload
This is classic AJAX with XML — exactly how Google Maps, early Gmail, and many web 2.0 apps worked around 2005–2010.
3. Modern AJAX – JSON is King (what you see in 2025–2026)
The same example today — almost nobody returns XML anymore
Server returns JSON instead
PHP
|
0 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
<?php header('Content-Type: application/json; charset=utf-8'); $students = [ 101 => ['name' => 'Priyanka Reddy', 'class' => 'XI-A', 'marks' => '485/500'], 102 => ['name' => 'Rahul Sharma', 'class' => 'XII-B', 'marks' => '462/500'] ]; $id = isset($_GET['id']) ? (int)$_GET['id'] : 0; $data = $students[$id] ?? ['error' => 'Student not found']; echo json_encode($data); |
Modern JavaScript (using fetch – preferred today)
JavaScript
|
0 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 |
async function loadStudent(id) { try { const response = await fetch(`get-student.php?id=${id}`); if (!response.ok) throw new Error('Network response was not ok'); const data = await response.json(); if (data.error) { document.getElementById("result").innerHTML = "Student not found"; return; } document.getElementById("result").innerHTML = ` <strong>Name:</strong> ${data.name}<br> <strong>Class:</strong> ${data.class}<br> <strong>Total Marks:</strong> ${data.marks} `; } catch (error) { document.getElementById("result").innerHTML = "Error: " + error.message; } } |
Key differences:
- fetch instead of XMLHttpRequest (cleaner, Promise-based)
- response.json() instead of responseXML
- Much simpler parsing — no need to walk DOM tree
- Smaller payload (JSON is usually more compact than XML)
4. When You Still See XML + AJAX in Real Projects (2025–2026)
| Situation | Typical pattern | Why XML? |
|---|---|---|
| SOAP web services | AJAX → SOAP XML request/response | Standard requires XML + SOAP envelope |
| Legacy enterprise APIs | XMLHttpRequest or fetch to old endpoint | Old system only speaks XML |
| Some government / banking portals | POST XML to specific endpoint | Regulatory requirement (e.g. GST e-invoice) |
| Very old admin panels / CMS | AJAX calls returning XML fragments | Never migrated |
| Report generation | Fetch XML → transform with XSLT in browser | Rare, but exists in publishing systems |
5. Quick Summary – XML + AJAX in One Page
| Period | Dominant data format | Main JavaScript method | Typical payload size | Still common in 2025–2026? |
|---|---|---|---|---|
| 2005–2012 | XML | XMLHttpRequest | Larger | Legacy code only |
| 2013–2020 | JSON (transition) | XMLHttpRequest / jQuery | Smaller | Still seen |
| 2020–2026 | JSON | fetch + async/await | Smallest | Dominant |
| Enterprise / legacy | XML | XMLHttpRequest or fetch | Larger | Very common in some domains |
Practical advice:
- Learn how to read XML (even if you never produce it)
- Know how to use responseXML and basic DOM parsing
- But prefer JSON + fetch for anything new
- Be ready to deal with XML when working with banks, governments, insurance, ERP systems, SOAP services
Would you like to go deeper into any of these directions?
- Full SOAP client example using AJAX
- How to parse complex XML responses in JavaScript
- Modern fetch + XML pattern (when you have no choice)
- Converting old XML AJAX code to JSON
- Using XSLT in browser with AJAX-fetched XML (rare but interesting)
Tell me what interests you most right now! 😊
