XML AJAX requests with a simple example:
Suppose we have an XML file named data.xml that contains information about books:
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>
We want to use AJAX to fetch this XML data and display it on a web page.
index.html):
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>
script.js):
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 = 'Title: ' + title + '
';
bookInfo += 'Author: ' + author + '
';
bookInfo += 'Year: ' + year + '
';
bookInfo += '
';
outputDiv.innerHTML += bookInfo;
}
}
data.xml file.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.