Ứng dụng XML
Chương này trình bày một số ứng dụng HTML sử dụng XML, HTTP, DOM và JavaScript.
Tài liệu XML được sử dụng
Trong chương này, chúng ta sẽ sử dụng tệp XML có tên "cd_catalog.xml" .
Hiển thị dữ liệu XML trong một bảng HTML
Ví dụ này lặp lại từng phần tử <CD> và hiển thị giá trị của phần tử <ARTIST> và <TITLE> trong bảng HTML:
Thí dụ
<html>
<head>
<style>
table, th, td {
border: 1px solid black;
border-collapse:collapse;
}
th, td {
padding: 5px;
}
</style>
</head>
<body>
<button type="button" onclick="loadXMLDoc()">Get my CD collection</button>
<br><br>
<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", "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>
Để biết thêm thông tin về cách sử dụng JavaScript và DOM XML, hãy truy cập Giới thiệu DOM.
Hiển thị CD đầu tiên trong phần tử div HTML
Ví dụ này sử dụng một hàm để hiển thị phần tử CD đầu tiên trong phần tử HTML với id = "showCD":
Thí dụ
displayCD(0);
function displayCD(i) {
var xmlhttp
= new XMLHttpRequest();
xmlhttp.onreadystatechange =
function() {
if (this.readyState
== 4 && this.status == 200) {
myFunction(this, 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;
}
Điều hướng giữa các đĩa CD
Để điều hướng giữa các CD, trong ví dụ trên, hãy thêm hàm next () và trước ():
Thí dụ
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);
}
}
Hiển thị thông tin album khi nhấp vào đĩa CD
Ví dụ cuối cùng cho thấy cách bạn có thể hiển thị thông tin album khi người dùng nhấp vào đĩa CD:
Thí dụ
function displayCD(i) {
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;
}