XML 应用程序
本章演示一些基于 XML, HTML, XML DOM 和 JavaScript 构建的小型 XML 应用程序。
XML 文档实例
在本应用程序中，我们将使用 "cd_catalog.xml" 文件。
<?xml version="1.0" encoding="utf-8"?> <CATALOG> <CD> <TITLE>Empire Burlesque</TITLE> <ARTIST>Bob Dylan</ARTIST> <COUNTRY>USA</COUNTRY> <COMPANY>Columbia</COMPANY> <PRICE>10.90</PRICE> <YEAR>1985</YEAR> </CD> <CD> <TITLE>Unchain my heart</TITLE> <ARTIST>Joe Cocker</ARTIST> <COUNTRY>USA</COUNTRY> <COMPANY>EMI</COMPANY> <PRICE>8.20</PRICE> <YEAR>1987</YEAR> </CD> </CATALOG>
在 HTML div 元素中显示第一个 CD
下面的实例从第一个 CD 元素中获取 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;
}
Artist: Bob Dylan Title: Empire Burlesque Year: 1985
添加导航脚本
为了向上面的实例添加导航（功能），需要创建 next() 和 previous() 两个函数：
实例
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();
}
}
当点击 CD 时显示专辑信息
最后的实例展示如何在用户点击某个 CD 项目时显示专辑信息：
<!DOCTYPE html>
<html>
<head>
<script>
if (window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}
else
{// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.open("GET","cd_catalog.xml",false);
xmlhttp.send();
xmlDoc=xmlhttp.responseXML;
x=xmlDoc.getElementsByTagName("CD");
function displayCDInfo(i)
{
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);
country=(x[i].getElementsByTagName("COUNTRY")[0].childNodes[0].nodeValue);
company=(x[i].getElementsByTagName("COMPANY")[0].childNodes[0].nodeValue);
price=(x[i].getElementsByTagName("PRICE")[0].childNodes[0].nodeValue);
txt="Artist: "+artist+"<br>Title: "+title+"<br>Year: "+year+"<br>Country: "+country+"<br>Company: "+company+"<br>Price: "+price ;
document.getElementById("showCD").innerHTML=txt;
}
</script>
</head>
<body>
<div id='showCD'>Click on a CD to display album information.</div><br>
<script>
document.write("<table border='1'>");
for (var i=0;i<x.length;i++)
{
document.write("<tr onclick='displayCDInfo(" + i + ")'>");
document.write("<td>");
document.write(x[i].getElementsByTagName("ARTIST")[0].childNodes[0].nodeValue);
document.write("</td><td>");
document.write(x[i].getElementsByTagName("TITLE")[0].childNodes[0].nodeValue);
document.write("</td></tr>");
}
document.write("</table>");
</script>
</body>
</html>Artist: Dolly Parton
Title: Greatest Hits
Year: 1982
Country: USA
Company: RCA
Price: 9.90
Title: Greatest Hits
Year: 1982
Country: USA
Company: RCA
Price: 9.90
| Bob Dylan | Empire Burlesque |
| Bonnie Tyler | Hide your heart |
| Dolly Parton | Greatest Hits |
| Gary Moore | Still got the blues |
| Eros Ramazzotti | Eros |
| Bee Gees | One night only |
| Dr.Hook | Sylvias Mother |
| Rod Stewart | Maggie May |
| Andrea Bocelli | Romanza |
| Percy Sledge | When a man loves a woman |
| Savage Rose | Black angel |
| Many | 1999 Grammy Nominees |
| Kenny Rogers | For the good times |
| Will Smith | Big Willie style |
| Van Morrison | Tupelo Honey |
| Jorn Hoel | Soulsville |
| Cat Stevens | The very best of |
| Sam Brown | Stop |
| T'Pau | Bridge of Spies |
| Tina Turner | Private Dancer |
| Kim Larsen | Midt om natten |
| Luciano Pavarotti | Pavarotti Gala Concert |
| Otis Redding | The dock of the bay |
| Simply Red | Picture book |
| The Communards | Red |
| Joe Cocker | Unchain my heart |
如需了解更多关于使用 JavaScript 和 XML DOM 的信息，请访问我们的 XML DOM 教程。