XML to HTML

本章讲解如何把 XML 数据显示为 HTML。

在 HTML 中显示 XML 数据

在上一节中，我们讲解了如何通过 JavaScript 来解析 XML 并访问 DOM。

本例遍历一个 XML 文件 cd_catalog.xml，

  1. <CATALOG>
  2. <CD>
  3. <TITLE>Empire Burlesque</TITLE>
  4. <ARTIST>Bob Dylan</ARTIST>
  5. <COUNTRY>USA</COUNTRY>
  6. <COMPANY>Columbia</COMPANY>
  7. <PRICE>10.90</PRICE>
  8. <YEAR>1985</YEAR>
  9. </CD>
  10. <CD>
  11. <TITLE>Hide your heart</TITLE>
  12. <ARTIST>Bonnie Tyler</ARTIST>
  13. <COUNTRY>UK</COUNTRY>
  14. <COMPANY>CBS Records</COMPANY>
  15. <PRICE>9.90</PRICE>
  16. <YEAR>1988</YEAR>
  17. </CD>
  18. <CD>
  19. <TITLE>Greatest Hits</TITLE>
  20. <ARTIST>Dolly Parton</ARTIST>
  21. <COUNTRY>USA</COUNTRY>
  22. <COMPANY>RCA</COMPANY>
  23. <PRICE>9.90</PRICE>
  24. <YEAR>1982</YEAR>
  25. </CD>
  26. <CD>
  27. <TITLE>Still got the blues</TITLE>
  28. <ARTIST>Gary Moore</ARTIST>
  29. <COUNTRY>UK</COUNTRY>
  30. <COMPANY>Virgin records</COMPANY>
  31. <PRICE>10.20</PRICE>
  32. <YEAR>1990</YEAR>
  33. </CD>
  34. <CD>
  35. <TITLE>Eros</TITLE>
  36. <ARTIST>Eros Ramazzotti</ARTIST>
  37. <COUNTRY>EU</COUNTRY>
  38. <COMPANY>BMG</COMPANY>
  39. <PRICE>9.90</PRICE>
  40. <YEAR>1997</YEAR>
  41. </CD>
  42. <CD>
  43. <TITLE>One night only</TITLE>
  44. <ARTIST>Bee Gees</ARTIST>
  45. <COUNTRY>UK</COUNTRY>
  46. <COMPANY>Polydor</COMPANY>
  47. <PRICE>10.90</PRICE>
  48. <YEAR>1998</YEAR>
  49. </CD>
  50. <CD>
  51. <TITLE>Sylvias Mother</TITLE>
  52. <ARTIST>Dr.Hook</ARTIST>
  53. <COUNTRY>UK</COUNTRY>
  54. <COMPANY>CBS</COMPANY>
  55. <PRICE>8.10</PRICE>
  56. <YEAR>1973</YEAR>
  57. </CD>
  58. <CD>
  59. <TITLE>Maggie May</TITLE>
  60. <ARTIST>Rod Stewart</ARTIST>
  61. <COUNTRY>UK</COUNTRY>
  62. <COMPANY>Pickwick</COMPANY>
  63. <PRICE>8.50</PRICE>
  64. <YEAR>1990</YEAR>
  65. </CD>
  66. </CATALOG>

然后把每个 CD 元素显示为一个 HTML 表格行：

  1. <html>
  2. <body>
  3.  
  4. <script type="text/javascript">
  5. if (window.XMLHttpRequest)
  6.   {// code for IE7+, Firefox, Chrome, Opera, Safari
  7.   xmlhttp=new XMLHttpRequest();
  8.   }
  9. else
  10.   {// code for IE6, IE5
  11.   xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
  12.   }
  13. xmlhttp.open("GET","cd_catalog.xml",false);
  14. xmlhttp.send();
  15. xmlDoc=xmlhttp.responseXML;
  16.  
  17. document.write("<table border='1'>");
  18. var x=xmlDoc.getElementsByTagName("CD");
  19. for (i=0;i<x.length;i++)
  20.   {
  21.   document.write("<tr><td>");
  22.   document.write(x[i].getElementsByTagName("ARTIST")[0].childNodes[0].nodeValue);
  23.   document.write("</td><td>");
  24.   document.write(x[i].getElementsByTagName("TITLE")[0].childNodes[0].nodeValue);
  25.   document.write("</td></tr>");
  26.   }
  27. document.write("</table>");
  28. </script>
  29.  
  30. </body>
  31. </html>

例子解释：

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

如需更多有关 JavaScript 和 XML DOM 的信息，请访问我们的 XML DOM 教程。

跨域访问

出于安全方面的原因，现代的浏览器不允许跨域的访问。

这意味着，网页以及它试图加载的 XML 文件，都必须位于相同的服务器上。

假如你打算在自己的网页上使用上面的例子，则必须把 XML 文件放到自己的服务器上。否则，xmlDoc.load() 将产生错误 "Access is denied"。