文字

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();
}
}

1444387634311137.png


当点击 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


Bob DylanEmpire Burlesque
Bonnie TylerHide your heart
Dolly PartonGreatest Hits
Gary MooreStill got the blues
Eros RamazzottiEros
Bee GeesOne night only
Dr.HookSylvias Mother
Rod StewartMaggie May
Andrea BocelliRomanza
Percy SledgeWhen a man loves a woman
Savage RoseBlack angel
Many1999 Grammy Nominees
Kenny RogersFor the good times
Will SmithBig Willie style
Van MorrisonTupelo Honey
Jorn HoelSoulsville
Cat StevensThe very best of
Sam BrownStop
T'PauBridge of Spies
Tina TurnerPrivate Dancer
Kim LarsenMidt om natten
Luciano PavarottiPavarotti Gala Concert
Otis ReddingThe dock of the bay
Simply RedPicture book
The CommunardsRed
Joe CockerUnchain my heart

如需了解更多关于使用 JavaScript 和 XML DOM 的信息,请访问我们的 XML DOM 教程。



上一篇: 下一篇: