Bab ini menunjukkan beberapa aplikasi HTML menggunakan XML, HTTP, DOM, dan JavaScript.
XML Dokumen Digunakan
Dalam bab ini kita akan menggunakan file XML yang disebut "cd_catalog.xml" .
Tampilan Data XML dalam Tabel HTML
Contoh ini loop melalui setiap <CD> elemen, dan menampilkan nilai-nilai dari <ARTIST> dan <TITLE> elemen dalam tabel HTML:
Contoh
<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> Cobalah sendiri " Untuk informasi lebih lanjut tentang menggunakan JavaScript dan XML DOM, pergi ke DOM Intro.
Menampilkan CD Pertama di div Elemen HTML
THS contoh menggunakan fungsi untuk menampilkan elemen CD pertama dalam sebuah elemen HTML dengan id = "showCD":
Contoh
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;
} Cobalah sendiri " Arahkan Antara CD
Untuk menavigasi antara CD, dalam contoh di atas, menambahkan next() dan previous() fungsi:
Contoh
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);
}
}
Cobalah sendiri " Tampilkan Informasi Album Ketika Mengklik Pada CD
Contoh terakhir menunjukkan bagaimana Anda dapat menampilkan informasi album ketika pengguna mengklik pada CD: