Μαθήματα AJAX

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

Στο παρακάτω παράδειγμα, πατώντας το κουμπί <button> θα εμφανιστεί το περιεχόμενο του αρχείου cd_collection.xml

Πατήστε το κουμπί και θα δείτε όλα τα περιεχόμενα του 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 showAlbum (url) {
   loadXMLDoc(url,function() {
      if (xmlhttp.readyState==4 && xmlhttp.status==200) {
         document.getElementById('showxml').innerHTML=xmlhttp.responseText;
      }
   });
}
</script>
</head>

<body>
<h2>Παρακάτω εμφανίζονται όλα τα περιεχόμενα του cd_collection.xml</h2>
<p><b>Περιεχόμενο του XML:</b><span id="showxml"></span></p>
<button onclick="showAlbum('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>
Pin It