XML 应用程序

Αυτή η ενότητα δείχνει την χρήση της XML, HTTP, DOM και JavaScript σε μια εφαρμογή HTML.

χρησιμοποιούμενη XML εγγραφή

Σε αυτή την ενότητα, θα χρησιμοποιήσουμε το όνομα "music_list.xml" του XML αρχείου.

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

Αυτό το παράδειγμα περιηγείται σε κάθε στοιχείο <ΑΚΟΜΑΝΗΣ> και στη συνέχεια εμφανίζει τις τιμές των στοιχείων <ΚΑΛΑΙΣΤΕΡΟΣ> και <ΤΙΤΛΟΣ> σε ένα πίνακα HTML:

Παράδειγμα

<html>
<body>
<table id="demo"></table>
<script>
function loadXMLDoc() {
   var xmlhttp = new XMLHttpRequest();
  xmlhttp.onreadystatechange =  function() {
    if (this.readyState == 4 && this.status == 200) {
      myFunction(this);
     }
  };
  xmlhttp.open("GET", "music_list.xml", true);
   xmlhttp.send();
}
function myFunction(xml) {
  var i;
   var xmlDoc = xml.responseXML;
  var table="<tr><th>ΚΑΛΑΙΣΤΕΡΟΣ</th><th>ΑΚΟΜΑΝΗΣ</th></tr>";
   var x = xmlDoc.getElementsByTagName("ΑΚΟΜΑΝΗΣ");
  for (i = 0; i <x.length;  i++) { 
    table += "<tr><td>" +
    x[i].getElementsByTagName("ΚΑΛΑΙΣΤΕΡΟΣ")[0].childNodes[0].nodeValue  +
    "</td><td>" +
    x[i].getElementsByTagName("ΤΙΤΛΟΣ")[0].childNodes[0].nodeValue  +
    "</td></tr>";
  }
   document.getElementById("παράδειγμα").innerHTML = table;
}
</script>
</body>
</html>

Προσπάθησε να το δοκιμάσεις

Για περισσότερες πληροφορίες σχετικά με τη χρήση JavaScript και XML DOM, επισκεφθείτε Εισαγωγή DOM.

Εμφάνιση του πρώτου τραγουδιού στο στοιχείο HTML div

Αυτό το παράδειγμα χρησιμοποιεί μια συνάρτηση για να εμφανίζει το πρώτο τραγούδι στο στοιχείο HTML με id="προβολήΜΟΥΣΙΚΗΣ":

Παράδειγμα

εμφάνισηΜΟΥΣΙΚΗΣ(0);
function εμφάνισηΜΟΥΣΙΚΗΣ(i) {
  var xmlhttp = new XMLHttpRequest();
  xmlhttp.onreadystatechange = function() {
    if (this.readyState == 4 && this.status == 200) {
      ηΛειτουργία(this, i);
    }
  };
  xmlhttp.open("GET", "music_list.xml", true);
  xmlhttp.send();
}
function ηΛειτουργία(xml, i) {
  var xmlDoc = xml.responseXML; 
  x = xmlDoc.getElementsByTagName("ΑΛΜΠΟΥΜ");
  document.getElementById("προβολήΜΟΥΣΙΚΗΣ").innerHTML =
  "<ul>" 
  "<li>Τραγούδι:"
  x[i].getElementsByTagName("ΤΙΤΛΟΣ")[0].childNodes[0].nodeValue + "</li>"
  "<li>Καλλιτέχνης：" +
  x[i].getElementsByTagName("ARTIST")[0].childNodes[0].nodeValue + "</li>" +
  "<li>Άλμπουμ：" +
  x[i].getElementsByTagName("ALBUM")[0].childNodes[0].nodeValue + "</li>" +
  "<li>Χώρα：" +
  x[i].getElementsByTagName("COUNTRY")[0].childNodes[0].nodeValue + "</li>" +
  "<li>Εταιρεία：" +
  x[i].getElementsByTagName("COMPANY")[0].childNodes[0].nodeValue + "</li>" +
  "<li>Έτος：" + 
  x[i].getElementsByTagName("YEAR")[0].childNodes[0].nodeValue + "</li>" +
  "</ul>";
}

Προσπάθησε να το δοκιμάσεις

Περιήγηση μεταξύ τραγουδιών

Για να μπορείτε να περιηγηθείτε μεταξύ των τραγουδιών στο παραπάνω παράδειγμα, προσθέστε τις λειτουργίες next() και previous():

Παράδειγμα

function επόμενο() {
  // Εμφάνιση του επόμενου τραγουδιού, εκτός αν έφτασε το τελευταίο
   if (i < x.length-1) {
    i++;
    εμφάνισηΜΟΥΣΙΚΗΣ(i);
  }
}
function προηγούμενο() {
  // Εμφάνιση του προηγούμενου τραγουδιού, εκτός αν έφτασε το πρώτο
   if (i > 0) {
  i--;
  εμφάνισηΜΟΥΣΙΚΗΣ(i);
  }
}

Προσπάθησε να το δοκιμάσεις

Εμφάνιση πληροφοριών άλμπουμ κατά την επιλογή τραγουδιού

Η τελευταία αυτή παράδειγμα δείχνει πώς εμφανίζεται η πληροφορία του άλμπουμ όταν ο χρήστης κάνει κλικ σε ένα τραγούδι:

Παράδειγμα

function εμφάνισηΜΟΥΣΙΚΗΣ(i) {
  document.getElementById("προβολήΜΟΥΣΙΚΗΣ").innerHTML =
  "<ul>" 
  "<li>Τραγούδι:"
  x[i].getElementsByTagName("ΤΙΤΛΟΣ")[0].childNodes[0].nodeValue + "</li>"
  "<li>Καλλιτέχνης：" +
  x[i].getElementsByTagName("ARTIST")[0].childNodes[0].nodeValue + "</li>" +
  "<li>Άλμπουμ：" +
  x[i].getElementsByTagName("ALBUM")[0].childNodes[0].nodeValue + "</li>" +
  "<li>Χώρα：" +
  x[i].getElementsByTagName("COUNTRY")[0].childNodes[0].nodeValue + "</li>" +
  "<li>Εταιρεία：" +
  x[i].getElementsByTagName("COMPANY")[0].childNodes[0].nodeValue + "</li>" +
  "<li>Έτος：" + 
  x[i].getElementsByTagName("YEAR")[0].childNodes[0].nodeValue + "</li>" +
  "</ul>";
}

Προσπάθησε να το δοκιμάσεις