Example
<!doctype html>
<html lang='en'>
<head>
<!-- Required meta tags -->
<meta charset='utf-8'>
<meta name='viewport' content='width=device-width, initial-scale=1'>
<!-- Bootstrap CSS -->
<link href='https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css' rel='stylesheet' integrity='sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC' crossorigin='anonymous'>
<title>Ajax Example</title>
</head>
<body>
<div class='container mt-3'>
<h1 class='text-center'>Ajax Example </h1>
<button type='button' onclick='loadResponseXML()' class='btn btn-primary my-3'>Click me for see the details of selected xml file</button>
<h3 class='text-danger '>See details of of page</h3>
<p class='text-primary'>Whole information of xml file <span id='details' class='text-muted'></span></p>
<h2>Book table here !!!</h2>
<table id='loadDataInTable' class='table table-striped table-hover'></table>
</div>
<script>
function loadResponseXML() {
// creating instance of XMLHttpRequest()
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function () {
if (this.readyState == 4 && this.status == 200) {
document.getElementById('details').innerHTML = xhttp.getAllResponseHeaders();
// call responseXML
var xmlDoc = xhttp.responseXML;
var x = xmlDoc.getElementsByTagName('BOOK');
let table='<thead class=\'thead-dark\'><tr><th> # </th><th>TITLE of Books</th><th>PRICE</th></tr></thead>';
for (let i = 0; i <x.length; i++) {
table += '<tr><td> '+(i+1)+' </td><td>' +
x[i].getElementsByTagName('TITLE')[0].childNodes[0].nodeValue +
'</td><td>' +
x[i].getElementsByTagName('PRICE')[0].childNodes[0].nodeValue +
'</td></tr>';
}
document.getElementById('loadDataInTable').innerHTML = table;
}
};
xhttp.open('GET', 'xmlfile.xml', true);
xhttp.send();
}
</script>
<script src='https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js' integrity='sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM' crossorigin='anonymous'></script>
</body>
</html>
xmlfile.xml
<?xml version='1.0' encoding='UTF-8'?>
<CATALOG>
<BOOK>
<AUTHOR>Gambardella, Matthew</AUTHOR>
<TITLE>XML Developer's Guide</TITLE>
<genre>Computer</genre>
<PRICE>44.95</PRICE>
<PUBLISH_DATE>2000-10-01</PUBLISH_DATE>
<DESCRIPTION>An in-depth look at creating applications
with XML.</DESCRIPTION>
</BOOK>
<BOOK>
<AUTHOR>Ralls, Kim</AUTHOR>
<TITLE>Midnight Rain</TITLE>
<genre>Fantasy</genre>
<PRICE>5.95</PRICE>
<PUBLISH_DATE>2000-12-16</PUBLISH_DATE>
<DESCRIPTION>A former architect battles corporate zombies,
an evil sorceress, and her own childhood to become queen
of the world.</DESCRIPTION>
</BOOK>
<BOOK>
<AUTHOR>Corets, Eva</AUTHOR>
<TITLE>Maeve Ascendant</TITLE>
<genre>Fantasy</genre>
<PRICE>5.95</PRICE>
<PUBLISH_DATE>2000-11-17</PUBLISH_DATE>
<DESCRIPTION>After the collapse of a nanotechnology
society in England, the young survivors lay the
foundation for a new society.</DESCRIPTION>
</BOOK>
<BOOK>
<AUTHOR>Corets, Eva</AUTHOR>
<TITLE>Oberon's Legacy</TITLE>
<genre>Fantasy</genre>
<PRICE>5.95</PRICE>
<PUBLISH_DATE>2001-03-10</PUBLISH_DATE>
<DESCRIPTION>In post-apocalypse England, the mysterious
agent known only as Oberon helps to create a new life
for the inhabitants of London. Sequel to Maeve
Ascendant.</DESCRIPTION>
</BOOK>
<BOOK>
<AUTHOR>Corets, Eva</AUTHOR>
<TITLE>The Sundered Grail</TITLE>
<genre>Fantasy</genre>
<PRICE>5.95</PRICE>
<PUBLISH_DATE>2001-09-10</PUBLISH_DATE>
<DESCRIPTION>The two daughters of Maeve, half-sisters,
battle one another for control of England. Sequel to
Oberon's Legacy.</DESCRIPTION>
</BOOK>
</CATALOG>
Output
