XML 数据显示为 HTML

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


在 HTML 中显示 XML 数据

在上一节中,我们讲解了如何通过 JavaScript 来解析 XML 并访问 DOM。本例遍历一个 XML 文件 (cd.xml),然后把每个 CD 元素显示为一个 HTML 表格行:

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

检测浏览器,然后使用合适的解析器来加载 XML

创建一个 HTML 表格(<table border="1">)

使用 getElementsByTagName() 来获得所有 XML 的 CD 节点

针对每个 CD 节点,把 ARTIST 和 TITLE 中的数据显示为表格数据

用 </table> 结束表格

如需更多有关 JavaScript 和 XML DOM 的信息,请访问 本站 的 XML DOM 教程


跨域访问

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

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

Cankaoshouce 的实例所打开的 XML 文件位于 cankaoshouce 的域上。

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