Εφαρμογές XML

Πίνακας περιεχομένων

    Εμφάνιση πίνακα περιεχομένων

Αυτό το κεφάλαιο παρουσιάζει ορισμένες εφαρμογές HTML που χρησιμοποιούν XML, HTTP, DOM και JavaScript.

Το έγγραφο XML που χρησιμοποιείται

Σε αυτό το κεφάλαιο θα χρησιμοποιήσουμε το αρχείο XML που ονομάζεται "cd_catalog.xml".

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

Αυτό το παράδειγμα περνά μέσα από κάθε στοιχείο <CD> και εμφανίζει τις τιμές του <ARTIST> και του στοιχεία <TITLE> σε έναν πίνακα HTML:

Παράδειγμα

<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>
<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>

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

Εμφανίστε το πρώτο CD σε ένα στοιχείο div HTML

Αυτό το παράδειγμα χρησιμοποιεί μια συνάρτηση για την εμφάνιση του πρώτου στοιχείου CD σε ένα στοιχείο HTML με id="showCD":

Παράδειγμα

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;
}

Δοκιμάστε το μόνοι σας →

<!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>

Πλοηγηθείτε μεταξύ των CD

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

Παράδειγμα

function next()
{
  // display the next CD, unless you are on the last CD
	if (i < len-1) {
    i++;
    displayCD(i);
  }
}

function previous()
{
  // display the previous CD, unless you are on the first CD 
	if (i > 0) {
    i--;
    displayCD(i);
  }
}

Δοκιμάστε το μόνοι σας →

<!DOCTYPE html>
<html>
<body>

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

<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>

Εμφάνιση πληροφοριών άλμπουμ όταν κάνετε κλικ σε ένα CD

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

Παράδειγμα

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;
}

Δοκιμάστε το μόνοι σας →

<!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>