Εμφάνιση δεδομένων απο XML σε html πίνακα

Στο παρακάτω παράδειγμα, πατώντας το κουμπί <button> θα εμφανιστεί το περιεχόμενο του αρχείου cd_collection.xml σε έναν html πίνακα. Όπως θα διαπιστώσετε στον κώδικα της σελίδας χρησιμοποιούμε μια for για να διαβάσει το xml αρχείο, ενώ στην μεταβλητή txt καταχωρούμε τις ετικέτες με τις οποίες σχηματίζεται ο πίνακας (<table>, <tr>, <td> κτλ. )

Πατήστε το κουμπί και θα δείτε όλα τα περιεχόμενα του cd_collection.xml

Περιεχόμενο του XML:

ο κώδικας της σελίδας

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1253" />
<title>Untitled Document</title>
<script type="text/javascript">
var xmlhttp;
function loadXMLDoc(url,cfunc) {
   if (window.XMLHttpRequest) {// code for IE7+, Firefox, Chrome, Opera, Safari
      xmlhttp=new XMLHttpRequest();
   }
   else {// code for IE6, IE5
      xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
   }

   xmlhttp.onreadystatechange=cfunc;
   xmlhttp.open("GET",url,true);
   xmlhttp.send();
}

function showAlbum2 (url) {
   loadXMLDoc(url,function() {
if (xmlhttp.readyState==4 && xmlhttp.status==200) {
txt="<table border='1' style='background-color: #ffffff;'><tr><th>CD Title</th><th>Year</th></tr>";
x=xmlhttp.responseXML.documentElement.getElementsByTagName("album");
for (i=0;i<x.length;i++) {
txt=txt + "<tr>";
xx=x[i].getElementsByTagName("cdtitle");
{
try
{
txt=txt + "<td>" + xx[0].firstChild.nodeValue + "</td>";
}
catch (er)
{
txt=txt + " ";
}
}
xx=x[i].getElementsByTagName("year");
{
try
{
txt=txt + "<td>" + xx[0].firstChild.nodeValue + "</td>";
}
catch (er)
{
txt=txt + " ";
}
}
txt=txt + "</tr>";
}
txt=txt + "</table>";
document.getElementById('showxml').innerHTML=txt;
}
});
}
</script>
</head>

<body>
<h2>Παρακάτω εμφανίζονται όλα τα περιεχόμενα του cd_collection.xml</h2>
<p><b>Περιεχόμενο του XML:</b><span id="showxml"></span></p>
<button onclick="showAlbum2('cd_collection.xml')">Get XML data</button>
</body>
</html>

ο κώδικας του cd_collection.xml

<?xml version="1.0" encoding="utf-8"?>
<collection>
<album>
<artist>VA</artist>
<cdtitle>Buddha Bar I</cdtitle>
<year>(1999)</year>
</album>

<album>
<artist>VA</artist>
<cdtitle>Buddha Bar II</cdtitle>
<year>(2000)</year>
</album>

<album>
<artist>VA</artist>
<cdtitle>Buddha Bar III</cdtitle>
<year>(2001)</year>
</album>

<album>
<artist>VA</artist>
<cdtitle>Buddha Bar IV</cdtitle>
<year>(2002)</year>
</album>

<album>
<artist>VA</artist>
<cdtitle>Buddha Bar V</cdtitle>
<year>(2003)</year>
</album>

</collection>

Μαθήματα AJAX

Εμφάνιση δεδομένων απο XML σε html πίνακα

Πατήστε το κουμπί και θα δείτε όλα τα περιεχόμενα του cd_collection.xml