Ultimele tutoriale de dezvoltare web
 

XML Aplicații


Acest capitol demonstrează unele aplicații HTML folosind XML, HTTP, DOM și JavaScript.


Documentul XML folosit

În acest capitol vom folosi fișierul XML numit „cd_catalog.xml“ .


Datele de afișare XML într-un tabel HTML

Acest exemplu bucle prin fiecare <CD> element și afișa valorile <ARTIST> și <TITLE> elemente într - un tabel HTML:

Exemplu

<html>
<head>
<style>
table, th, td {
  border: 1px solid black;
  border-collapse:collapse;
}
th, td {
  padding: 5px;
}
</style>
</head>
<body>

<table id="demo"></table>

<script>
function loadXMLDoc() {
  var xmlhttp = new XMLHttpRequest();
  xmlhttp.onreadystatechange = function() {
    if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
      myFunction(xmlhttp);
    }
  };
  xmlhttp.open("GET", "cd_catalog.xml", true);
  xmlhttp.send();
}
function myFunction(xml) {
  var i;
  var xmlDoc = xml.responseXML;
  var table="<tr><th>Artist</th><th>Title</th></tr>";
  var x = xmlDoc.getElementsByTagName("CD");
  for (i = 0; i <x.length; i++) {
    table += "<tr><td>" +
    x[i].getElementsByTagName("ARTIST")[0].childNodes[0].nodeValue +
    "</td><td>" +
    x[i].getElementsByTagName("TITLE")[0].childNodes[0].nodeValue +
    "</td></tr>";
  }
  document.getElementById("demo").innerHTML = table;
}
</script>

</body>
</html>
Încearcă - l singur »

Pentru mai multe informații despre utilizarea JavaScript și XML DOM, du - te la DOM Intro.


Afișează primul CD-ul intr-un element div HTML

THS exemplu utilizează o funcție pentru a afișa primul element CD-ul într-un element HTML cu id = „showCD“:

Exemplu

displayCD(0);

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;
}
Încearcă - l singur »

Naviga între CD-uri

Pentru a naviga între CD - uri, în exemplul de mai sus, se adaugă o next() și previous() funcție:

Exemplu

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

function previous() {
  // display the previous CD, unless you are on the first CD
  if (i > 0) {
  i--;
  displayCD(i);
  }
}
Încearcă - l singur »

Afișare informații album Când faceți clic pe un CD

Ultimul exemplu arată cum puteți afișa informații album atunci când utilizatorul face clic pe un CD:

Încearcă - l singur .