Ứng dụng XML

Chương này minh họa việc sử dụng ứng dụng HTML sử dụng XML, HTTP, DOM và JavaScript.

tệp XML được sử dụng

Trong chương này, chúng ta sẽ sử dụng tên là "music_list.xmlcủa tệp XML.

Hiển thị dữ liệu XML trong bảng HTML

Bài mẫu này lặp qua mỗi yếu tố <TRACK> và sau đó hiển thị giá trị của yếu tố <ARTIST> và <TITLE> trong bảng HTML:

thực例

<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("TRACK");
  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>

Thử ngay

Để biết thêm thông tin về việc sử dụng JavaScript và XML DOM, hãy truy cập Giới thiệu về DOM。

Hiển thị bài hát đầu tiên trong phần tử div HTML

Ví dụ này sử dụng một hàm để hiển thị bài hát đầu tiên trong phần tử HTML có id="displayMUSIC":

thực例

displayMUSIC(0);
function displayMUSIC(i) {
  var xmlhttp = new XMLHttpRequest();
  xmlhttp.onreadystatechange = function() {
    if (this.readyState == 4 && this.status == 200) {
      myFunction(this, i);
    }
  };
  xmlhttp.open("GET", "music_list.xml", true);
  xmlhttp.send();
}
function myFunction(xml, i) {
  var xmlDoc = xml.responseXML; 
  x = xmlDoc.getElementsByTagName("TRACK");
  document.getElementById("showMUSIC").innerHTML =
  "<ul>" + 
  "<li>曲目：" +
  x[i].getElementsByTagName("TITLE")[0].childNodes[0].nodeValue + "</li>" +
  "<li>Artist: " +
  x[i].getElementsByTagName("ARTIST")[0].childNodes[0].nodeValue + "</li>" +
  "<li>Album: " +
  x[i].getElementsByTagName("ALBUM")[0].childNodes[0].nodeValue + "</li>" +
  "<li>Country: " +
  x[i].getElementsByTagName("COUNTRY")[0].childNodes[0].nodeValue + "</li>" +
  "<li>Company: " +
  x[i].getElementsByTagName("COMPANY")[0].childNodes[0].nodeValue + "</li>" +
  "<li>Year: " + 
  x[i].getElementsByTagName("YEAR")[0].childNodes[0].nodeValue + "</li>" +
  "</ul>";
}

Thử ngay

Di chuyển giữa các bài hát

Để di chuyển giữa các bài hát trong ví dụ trên, hãy thêm các hàm next() và previous():

thực例

function next() {
  // Hiển thị bài hát tiếp theo, trừ khi đã đến bài hát cuối cùng
   if (i < x.length-1) {
    i++;
    displayMUSIC(i);
  }
}
function previous() {
  // Hiển thị bài hát trước, trừ khi đã đến bài hát đầu tiên
   if (i > 0) {
  i--;
  displayMUSIC(i);
  }
}

Thử ngay

Hiển thị thông tin album khi nhấp vào bài hát

Cuối cùng, ví dụ này trình bày cách hiển thị thông tin album khi người dùng nhấp vào một bài hát:

thực例

function displayMUSIC(i) {
  document.getElementById("showMUSIC").innerHTML =
  "<ul>" + 
  "<li>曲目：" +
  x[i].getElementsByTagName("TITLE")[0].childNodes[0].nodeValue + "</li>" +
  "<li>Artist: " +
  x[i].getElementsByTagName("ARTIST")[0].childNodes[0].nodeValue + "</li>" +
  "<li>Album: " +
  x[i].getElementsByTagName("ALBUM")[0].childNodes[0].nodeValue + "</li>" +
  "<li>Country: " +
  x[i].getElementsByTagName("COUNTRY")[0].childNodes[0].nodeValue + "</li>" +
  "<li>Company: " +
  x[i].getElementsByTagName("COMPANY")[0].childNodes[0].nodeValue + "</li>" +
  "<li>Year: " + 
  x[i].getElementsByTagName("YEAR")[0].childNodes[0].nodeValue + "</li>" +
  "</ul>";
}

Thử ngay