การประยุกต์ใช้งาน XML
ในบทนี้จะแสดงให้เห็นถึงบาง XML-based โปรแกรม XML, HTML, XML DOM ขนาดเล็กและ JavaScript สร้างขึ้น
ตัวอย่างเอกสาร XML
ในโปรแกรมนี้เราจะใช้ "cd_catalog.xml" ไฟล์
แสดงแผ่นซีดีในองค์ประกอบ HTML div
ตัวอย่างต่อไปนี้จะได้รับข้อมูล XML จากองค์ประกอบแรกของซีดีและจากนั้นแสดงข้อมูลใน id = "showCD" องค์ประกอบ HTML ที่ displayCD ฟังก์ชัน () จะเรียกเมื่อโหลดหน้านี้:
ตัวอย่าง
x=xmlDoc.getElementsByTagName("CD");
i=0;
function displayCD()
{
artist=(x[i].getElementsByTagName("ARTIST")[0].childNodes[0].nodeValue);
title=(x[i].getElementsByTagName("TITLE")[0].childNodes[0].nodeValue);
year=(x[i].getElementsByTagName("YEAR")[0].childNodes[0].nodeValue);
txt="Artist: " + artist + "<br />Title: " + title + "<br />Year: "+ year;
document.getElementById("showCD").innerHTML=txt;
}
i=0;
function displayCD()
{
artist=(x[i].getElementsByTagName("ARTIST")[0].childNodes[0].nodeValue);
title=(x[i].getElementsByTagName("TITLE")[0].childNodes[0].nodeValue);
year=(x[i].getElementsByTagName("YEAR")[0].childNodes[0].nodeValue);
txt="Artist: " + artist + "<br />Title: " + title + "<br />Year: "+ year;
document.getElementById("showCD").innerHTML=txt;
}
ลอง»
เพิ่มสคริปต์นำทาง
ในการเพิ่มระบบนำทาง (ฟังก์ชั่น) เพื่อตัวอย่างข้างต้นเราต้องสร้างถัดไป () และก่อนหน้านี้ () ฟังก์ชันที่สอง:
ตัวอย่าง
function next()
{ // display the next CD, unless you are on the last CD
if (i<x.length-1)
{
i++;
displayCD();
}
}
function previous()
{ // displays the previous CD, unless you are on the first CD
if (i>0)
{
i--;
displayCD();
}
}
{ // display the next CD, unless you are on the last CD
if (i<x.length-1)
{
i++;
displayCD();
}
}
function previous()
{ // displays the previous CD, unless you are on the first CD
if (i>0)
{
i--;
displayCD();
}
}
ลอง»
เมื่อคุณคลิกข้อมูลอัลบั้มซีดีจะปรากฏขึ้นเมื่อ
ตัวอย่างที่ผ่านมาแสดงให้เห็นถึงวิธีการที่จะแสดงข้อมูลอัลบั้มเมื่อผู้ใช้คลิกในโครงการซีดี:
สำหรับข้อมูลเพิ่มเติมเกี่ยวกับการใช้งาน JavaScript และ XML DOM เยี่ยมชมของเรา XML DOM กวดวิชา