試一試 - XML app

<!DOCTYPE html>
<html>
<body>

<div id='showCD'></div><br>
<input type="button" onclick="previous()" value="<<">
<input type="button" onclick="next()" value=">>">

<script>
var i = 0;
displayCD(i);

function displayCD(i) {
   var xmlhttp = new XMLHttpRequest();
   xmlhttp.onreadystatechange = function() {
   if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
   myFunction(xmlhttp, i);
   }
   };
   xmlhttp.open("GET", "cd_catalog.xml", true);
   xmlhttp.send();
}

function myFunction(xml, i) {
   var xmlDoc = xml.responseXML;
   x = xmlDoc.getElementsByTagName("CD");
   document.getElementById("showCD").innerHTML =
   "Artist: " +
   x[i].getElementsByTagName("ARTIST")[0].childNodes[0].nodeValue +
   "<br>Title: " +
   x[i].getElementsByTagName("TITLE")[0].childNodes[0].nodeValue +
   "<br>Year: " +
   x[i].getElementsByTagName("YEAR")[0].childNodes[0].nodeValue;
}

function next() {
if (i < x.length-1) {
  i++;
  displayCD(i);
  }
}

function previous() {
if (i > 0) {
  i--;
  displayCD(i);
  }
}
</script>

</body>
</html>

<!DOCTYPE html>
<html>
<body>

function myFunction(xml, i) {
    var xmlDoc = xml.responseXML; 
    x = xmlDoc.getElementsByTagName("CD");
    document.getElementById("showCD").innerHTML =
    "Artist: " +
    x[i].getElementsByTagName("ARTIST")[0].childNodes[0].nodeValue +
    "<br>Title: " +
    x[i].getElementsByTagName("TITLE")[0].childNodes[0].nodeValue +
    "<br>Year: " + 
    x[i].getElementsByTagName("YEAR")[0].childNodes[0].nodeValue;
}

function next() {
if (i < x.length-1) {
  i++;
  displayCD(i);
  }
}

function previous() {
if (i > 0) {
  i--;
  displayCD(i);
  }
}
</script>

</body>
</html>