AJAX XML File
Working with XML data in AJAX
📑 What is XML in AJAX?
XML (eXtensible Markup Language) is a format for storing and transporting structured data. AJAX can load and parse XML files from servers, making it useful for data exchange in web applications.
// Load XML file
xhr.open('GET', 'data.xml', true);
xhr.send();
XML Features
Structured Data
Organize data in hierarchical format
<user><name>John</name></user>Easy Parsing
Navigate XML with DOM methods
xml.getElementsByTagName('name')Platform Independent
Works across different systems
xhr.responseXML🔹 Sample XML File
XML files use tags to structure data hierarchically. Each element can contain text, attributes, or nested elements for organizing complex information.
<?xml version="1.0" encoding="UTF-8"?>
<users>
<user>
<id>1</id>
<name>John Doe</name>
<email>[email protected]</email>
<age>30</age>
</user>
<user>
<id>2</id>
<name>Jane Smith</name>
<email>[email protected]</email>
<age>25</age>
</user>
</users>XML Structure:
- <?xml?>: XML declaration
- <users>: Root element
- <user>: Child elements
- <name>: Data elements
🔹 Loading XML File
AJAX makes it easy to load XML files from servers. The responseXML property provides a parsed XML document ready for manipulation.
// Load XML file with AJAX
const xhr = new XMLHttpRequest();
xhr.onload = function() {
if (xhr.status === 200) {
// Get XML document
const xmlDoc = xhr.responseXML;
console.log('XML loaded successfully!');
console.log(xmlDoc);
}
};
xhr.open('GET', 'users.xml', true);
xhr.send();Console Output:
XML loaded successfully!
#document
🔹 Parsing XML Data
Once loaded, you can extract data from XML using DOM methods. This allows you to access specific elements and their values programmatically.
const xhr = new XMLHttpRequest();
xhr.onload = function() {
if (xhr.status === 200) {
const xmlDoc = xhr.responseXML;
// Get all user elements
const users = xmlDoc.getElementsByTagName('user');
// Loop through users
for (let i = 0; i < users.length; i++) {
const name = users[i].getElementsByTagName('name')[0].textContent;
const email = users[i].getElementsByTagName('email')[0].textContent;
console.log('Name: ' + name);
console.log('Email: ' + email);
}
}
};
xhr.open('GET', 'users.xml', true);
xhr.send();Console Output:
🔹 Displaying XML Data
After parsing XML, you can display the data in your webpage. This example shows how to create an HTML table from XML data.
const xhr = new XMLHttpRequest();
xhr.onload = function() {
if (xhr.status === 200) {
const xmlDoc = xhr.responseXML;
const users = xmlDoc.getElementsByTagName('user');
let html = '<table border="1">';
html += '<tr><th>Name</th><th>Email</th><th>Age</th></tr>';
for (let i = 0; i < users.length; i++) {
const name = users[i].getElementsByTagName('name')[0].textContent;
const email = users[i].getElementsByTagName('email')[0].textContent;
const age = users[i].getElementsByTagName('age')[0].textContent;
html += '<tr>';
html += '<td>' + name + '</td>';
html += '<td>' + email + '</td>';
html += '<td>' + age + '</td>';
html += '</tr>';
}
html += '</table>';
document.getElementById('result').innerHTML = html;
}
};
xhr.open('GET', 'users.xml', true);
xhr.send();Output:
| Name | Age | |
|---|---|---|
| John Doe | [email protected] | 30 |
| Jane Smith | [email protected] | 25 |
🔹 Complete XML Example
Here's a full working example that loads and displays XML data in a user-friendly format:
<!DOCTYPE html>
<html>
<body>
<h2>User Directory</h2>
<button onclick="loadUsers()">Load Users</button>
<div id="userList"></div>
<script>
function loadUsers() {
const xhr = new XMLHttpRequest();
xhr.onload = function() {
if (xhr.status === 200) {
const xmlDoc = xhr.responseXML;
const users = xmlDoc.getElementsByTagName('user');
let output = '';
for (let i = 0; i < users.length; i++) {
const name = users[i].getElementsByTagName('name')[0].textContent;
const email = users[i].getElementsByTagName('email')[0].textContent;
output += '<div style="border: 1px solid #ccc; padding: 10px; margin: 10px 0;">';
output += '<h3>' + name + '</h3>';
output += '<p>📧 ' + email + '</p>';
output += '</div>';
}
document.getElementById('userList').innerHTML = output;
}
};
xhr.open('GET', 'users.xml', true);
xhr.send();
}
</script>
</body>
</html>