XML Applications
This section shows how HTML can be used with XML, HTTP, DOM, and JavaScript for different purposes.
The XML Document Used
In this section, we'll work with a file named "cd_catalog.xml" in XML format.
Display XML Data in an HTML Table
This example goes through each CD element and shows the information from the ARTIST and TITLE elements in an HTML table.
Display the First CD in an HTML div Element
This example shows how a function is used to reveal the initial CD element within an HTML element tagged with id="showCD".
Navigate Between the CDs
To move between the CDs shown above, make a function called next() and another one called previous().
Show Album Information When Clicking On a CD
The final example demonstrates displaying album details when the user clicks on a CD.
<!DOCTYPE html>
<html>
<style>
table,
th,
td {
border: 1px solid black;
border-collapse: collapse;
}
th,
td {
padding: 5px;
}
</style>
<body>
<button type="button" onclick="loadXMLDoc()">Get my CD collection</button>
<br>
<br>
<table id="demo"></table>
<script>
function loadXMLDoc() {
const xhttp = new XMLHttpRequest();
xhttp.onload = function() {
const xmlDoc = xhttp.responseXML;
const cd = xmlDoc.getElementsByTagName("CD");
myFunction(cd)
}
xhttp.open("GET", "/cd_catalog.xml");
xhttp.send();
}
function myFunction(cd) {
let table = " <tr> <th> Artist </th> <th> Title </th> </tr>";
for (let i = 0; i < cd.length; i++) {
table += " <tr> <td> " +
cd[i].getElementsByTagName("ARTIST")[0].childNodes[0].nodeValue + "</td> <td> " +
cd[i].getElementsByTagName("TITLE")[0].childNodes[0].nodeValue + "</td> </tr>";
}
document.getElementById("demo").innerHTML = table;
}
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<body>
<div id='showCD'></div>
<script>
const xhttp = new XMLHttpRequest();
xhttp.onload = function() {
const xmlDoc = xhttp.responseXML;
const cd = xmlDoc.getElementsByTagName("CD");
myFunction(cd, 0);
}
xhttp.open("GET", "/cd_catalog.xml");
xhttp.send();
function myFunction(cd, i) {
document.getElementById("showCD").innerHTML = "Artist: " + cd[i].getElementsByTagName("ARTIST")[0].childNodes[0].nodeValue + " <br> Title: " +
cd[i].getElementsByTagName("TITLE")[0].childNodes[0].nodeValue + " <br> Year: " +
cd[i].getElementsByTagName("YEAR")[0].childNodes[0].nodeValue;
}
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<body>
<div id='showCD'></div>
<br>
<input type="button" onclick="previous()" value="<<">
<input type="button" onclick="next()" value=">>">
<script>
let i = 0;
let len;
let cd;
const xhttp = new XMLHttpRequest();
xhttp.onload = function() {
const xmlDoc = xhttp.responseXML;
cd = xmlDoc.getElementsByTagName("CD");
len = cd.length;
displayCD(i);
}
xhttp.open("GET", "/cd_catalog.xml");
xhttp.send();
function displayCD(i) {
document.getElementById("showCD").innerHTML = "Artist: " + cd[i].getElementsByTagName("ARTIST")[0].childNodes[0].nodeValue + " <br> Title: " +
cd[i].getElementsByTagName("TITLE")[0].childNodes[0].nodeValue + " <br> Year: " +
cd[i].getElementsByTagName("YEAR")[0].childNodes[0].nodeValue;
}
function next() {
if (i < len - 1) {
i++;
displayCD(i);
}
}
function previous() {
if (i > 0) {
i--;
displayCD(i);
}
}
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<style>
table,
th,
td {
border: 1px solid black;
border-collapse: collapse;
}
th,
td {
padding: 5px;
}
</style>
</head>
<body>
<p>Click on a CD to display album information.</p>
<p id='showCD'></p>
<table id="demo"></table>
<script>
const xhttp = new XMLHttpRequest();
let cd;
xhttp.onload = function() {
const xmlDoc = xhttp.responseXML;
cd = xmlDoc.getElementsByTagName("CD");
loadCD();
}
xhttp.open("GET", "/cd_catalog.xml");
xhttp.send();
function loadCD() {
let table = " <tr> <th> Artist </th> <th> Title </th> </tr>";
for (let i = 0; i < cd.length; i++) {
table += " <tr onclick = 'displayCD(" + i + ")' > <td> ";
table += cd[i].getElementsByTagName("ARTIST")[0].childNodes[0].nodeValue;
table += "</td> <td> ";
table += cd[i].getElementsByTagName("TITLE")[0].childNodes[0].nodeValue;
table += "</td> </tr>";
}
document.getElementById("demo").innerHTML = table;
}
function displayCD(i) {
document.getElementById("showCD").innerHTML = "Artist: " + cd[i].getElementsByTagName("ARTIST")[0].childNodes[0].nodeValue + " <br> Title: " +
cd[i].getElementsByTagName("TITLE")[0].childNodes[0].nodeValue + " <br> Year: " +
cd[i].getElementsByTagName("YEAR")[0].childNodes[0].nodeValue;
}
</script>
</body>
</html>
HTML
CSS
Javascript
Jquery