在 HTML 中显示 XML 数据

遍历一个 XML 文件 (cd_catalog.xml)，然后把每个 CD 元素显示为一个 HTML 表格行：
Xml文档:
<?xml version="1.0" encoding="ISO-8859-1" ?> 
- <!-- 
 Edited with XML Spy v2007 (http://www.altova.com) 
  --> 
- <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>Hide your heart</TITLE> 
  <ARTIST>Bonnie Tyler</ARTIST> 
  <COUNTRY>UK</COUNTRY> 
  <COMPANY>CBS Records</COMPANY> 
  <PRICE>9.90</PRICE> 
  <YEAR>1988</YEAR> 
  </CD>
- <CD>
  <TITLE>Greatest Hits</TITLE> 
  <ARTIST>Dolly Parton</ARTIST> 
  <COUNTRY>USA</COUNTRY> 
  <COMPANY>RCA</COMPANY> 
  <PRICE>9.90</PRICE> 
  <YEAR>1982</YEAR> 
  </CD>
- <CD>
  <TITLE>Still got the blues</TITLE> 
  <ARTIST>Gary Moore</ARTIST> 
  <COUNTRY>UK</COUNTRY> 
  <COMPANY>Virgin records</COMPANY> 
  <PRICE>10.20</PRICE> 
  <YEAR>1990</YEAR> 
  </CD>
- <CD>
  <TITLE>Eros</TITLE> 
  <ARTIST>Eros Ramazzotti</ARTIST> 
  <COUNTRY>EU</COUNTRY> 
  <COMPANY>BMG</COMPANY> 
  <PRICE>9.90</PRICE> 
  <YEAR>1997</YEAR> 
  </CD>
- <CD>
  <TITLE>One night only</TITLE> 
  <ARTIST>Bee Gees</ARTIST> 
  <COUNTRY>UK</COUNTRY> 
  <COMPANY>Polydor</COMPANY> 
  <PRICE>10.90</PRICE> 
  <YEAR>1998</YEAR> 
  </CD>
- <CD>
  <TITLE>Sylvias Mother</TITLE> 
  <ARTIST>Dr.Hook</ARTIST> 
  <COUNTRY>UK</COUNTRY> 
  <COMPANY>CBS</COMPANY> 
  <PRICE>8.10</PRICE> 
  <YEAR>1973</YEAR> 
  </CD>
- <CD>
  <TITLE>Maggie May</TITLE> 
  <ARTIST>Rod Stewart</ARTIST> 
  <COUNTRY>UK</COUNTRY> 
  <COMPANY>Pickwick</COMPANY> 
  <PRICE>8.50</PRICE> 
  <YEAR>1990</YEAR> 
  </CD>
- <CD>
  <TITLE>Romanza</TITLE> 
  <ARTIST>Andrea Bocelli</ARTIST> 
  <COUNTRY>EU</COUNTRY> 
  <COMPANY>Polydor</COMPANY> 
  <PRICE>10.80</PRICE> 
  <YEAR>1996</YEAR> 
  </CD>
- <CD>
  <TITLE>When a man loves a woman</TITLE> 
  <ARTIST>Percy Sledge</ARTIST> 
  <COUNTRY>USA</COUNTRY> 
  <COMPANY>Atlantic</COMPANY> 
  <PRICE>8.70</PRICE> 
  <YEAR>1987</YEAR> 
  </CD>
- <CD>
  <TITLE>Black angel</TITLE> 
  <ARTIST>Savage Rose</ARTIST> 
  <COUNTRY>EU</COUNTRY> 
  <COMPANY>Mega</COMPANY> 
  <PRICE>10.90</PRICE> 
  <YEAR>1995</YEAR> 
  </CD>
- <CD>
  <TITLE>1999 Grammy Nominees</TITLE> 
  <ARTIST>Many</ARTIST> 
  <COUNTRY>USA</COUNTRY> 
  <COMPANY>Grammy</COMPANY> 
  <PRICE>10.20</PRICE> 
  <YEAR>1999</YEAR> 
  </CD>
- <CD>
  <TITLE>For the good times</TITLE> 
  <ARTIST>Kenny Rogers</ARTIST> 
  <COUNTRY>UK</COUNTRY> 
  <COMPANY>Mucik Master</COMPANY> 
  <PRICE>8.70</PRICE> 
  <YEAR>1995</YEAR> 
  </CD>
- <CD>
  <TITLE>Big Willie style</TITLE> 
  <ARTIST>Will Smith</ARTIST> 
  <COUNTRY>USA</COUNTRY> 
  <COMPANY>Columbia</COMPANY> 
  <PRICE>9.90</PRICE> 
  <YEAR>1997</YEAR> 
  </CD>
- <CD>
  <TITLE>Tupelo Honey</TITLE> 
  <ARTIST>Van Morrison</ARTIST> 
  <COUNTRY>UK</COUNTRY> 
  <COMPANY>Polydor</COMPANY> 
  <PRICE>8.20</PRICE> 
  <YEAR>1971</YEAR> 
  </CD>
- <CD>
  <TITLE>The very best of</TITLE> 
  <ARTIST>Cat Stevens</ARTIST> 
  <COUNTRY>UK</COUNTRY> 
  <COMPANY>Island</COMPANY> 
  <PRICE>8.90</PRICE> 
  <YEAR>1990</YEAR> 
  </CD>
- <CD>
  <TITLE>Stop</TITLE> 
  <ARTIST>Sam Brown</ARTIST> 
  <COUNTRY>UK</COUNTRY> 
  <COMPANY>A and M</COMPANY> 
  <PRICE>8.90</PRICE> 
  <YEAR>1988</YEAR> 
  </CD>
- <CD>
  <TITLE>Bridge of Spies</TITLE> 
  <ARTIST>T’Pau</ARTIST> 
  <COUNTRY>UK</COUNTRY> 
  <COMPANY>Siren</COMPANY> 
  <PRICE>7.90</PRICE> 
  <YEAR>1987</YEAR> 
  </CD>
- <CD>
  <TITLE>Private Dancer</TITLE> 
  <ARTIST>Tina Turner</ARTIST> 
  <COUNTRY>UK</COUNTRY> 
  <COMPANY>Capitol</COMPANY> 
  <PRICE>8.90</PRICE> 
  <YEAR>1983</YEAR> 
  </CD>
- <CD>
  <TITLE>Midt om natten</TITLE> 
  <ARTIST>Kim Larsen</ARTIST> 
  <COUNTRY>EU</COUNTRY> 
  <COMPANY>Medley</COMPANY> 
  <PRICE>7.80</PRICE> 
  <YEAR>1983</YEAR> 
  </CD>
- <CD>
  <TITLE>Pavarotti Gala Concert</TITLE> 
  <ARTIST>Luciano Pavarotti</ARTIST> 
  <COUNTRY>UK</COUNTRY> 
  <COMPANY>DECCA</COMPANY> 
  <PRICE>9.90</PRICE> 
  <YEAR>1991</YEAR> 
  </CD>
- <CD>
  <TITLE>The dock of the bay</TITLE> 
  <ARTIST>Otis Redding</ARTIST> 
  <COUNTRY>USA</COUNTRY> 
  <COMPANY>Atlantic</COMPANY> 
  <PRICE>7.90</PRICE> 
  <YEAR>1987</YEAR> 
  </CD>
- <CD>
  <TITLE>Picture book</TITLE> 
  <ARTIST>Simply Red</ARTIST> 
  <COUNTRY>EU</COUNTRY> 
  <COMPANY>Elektra</COMPANY> 
  <PRICE>7.20</PRICE> 
  <YEAR>1985</YEAR> 
  </CD>
- <CD>
  <TITLE>Red</TITLE> 
  <ARTIST>The Communards</ARTIST> 
  <COUNTRY>UK</COUNTRY> 
  <COMPANY>London</COMPANY> 
  <PRICE>7.80</PRICE> 
  <YEAR>1987</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文档:
<html> 
<body> 

<script type="text/Ｊavascript"> 
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; 

document.write("<table border=’1’>"); 
var x=xmlDoc.getElementsByTagName("CD"); 
for (i=0;i<x.length;i++) 
  { 
  document.write("<tr><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> 

例子解释： 
1.   检测浏览器，然后使用合适的解析器来加载 XML 
2.   创建一个 HTML 表格（<table border="1">） 
3.   使用 getElementsByTagName() 来获得所有 XML 的 CD 节点 
4.   针对每个 CD 节点，把 ARTIST 和 TITLE 中的数据显示为表格数据 
5.   用 </table> 结束表格

收集:汕尾网络公司