XML and AJAX files work together in a simple example:
Suppose you have an XML file named data.xml containing some data:
Example
<?xml version="1.0" encoding="UTF-8"?>
<books>
<book>
<title>The Great Gatsby</title>
<author>F. Scott Fitzgerald</author>
<year>1925</year>
</book>
<book>
<title>The Catcher in the Rye</title>
<author>J.D. Salinger</author>
<year>1951</year>
</book>
</books>
Create an HTML file named index.html that includes a button to trigger the AJAX request and a placeholder to display the fetched data:
Example
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>AJAX Example</title>
<script src="script.js" defer></script>
</head>
<body>
<h2>Fetch Data Using AJAX</h2>
<button id="fetchButton">Fetch Data</button>
<div id="output"></div>
</body>
</html>
Create a JavaScript file named script.js to handle the AJAX request and update the HTML content with the fetched XML data:
Example
document.getElementById('fetchButton').addEventListener('click', fetchData);
function fetchData() {
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
var xmlDoc = this.responseXML;
displayData(xmlDoc);
}
};
xhttp.open('GET', 'data.xml', true);
xhttp.send();
}
function displayData(xmlDoc) {
var outputDiv = document.getElementById('output');
outputDiv.innerHTML = '';
var books = xmlDoc.getElementsByTagName('book');
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 year = books[i].getElementsByTagName('year')[0].textContent;
var bookInfo = '<p>Title: ' + title + '</p>';
bookInfo += '<p>Author: ' + author + '</p>';
bookInfo += '<p>Year: ' + year + '</p>';
bookInfo += '<hr>';
outputDiv.innerHTML += bookInfo;
}
}
fetchData() function is called.fetchData(), an AJAX request is created using the XMLHttpRequest object to fetch the data.xml file.displayData() function is called to process and display the XML data.displayData() function parses the XML response, extracts the book information, and updates the content of the <div id="output"> element with the fetched data.This example demonstrates how to use AJAX to fetch XML data from a server and display it dynamically on a web page.