课程表

XML 基础

XML JavaScript

XML 高级

XML 实例

工具箱
速查手册

XML to HTML

当前位置：免费教程 » XML相关 » XML

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

在 HTML 中显示 XML 数据

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

本例遍历一个 XML 文件 (cd_catalog.xml)，然后把每个 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>

TIY：在 HTML 表格中显示 XML 数据。

例子解释：

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

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

跨域访问

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

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

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

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

转载本站内容时，请务必注明来自W3xue，违者必究。
 友情链接：直通硅谷 　点职佳 　北美留学生论坛

本站QQ群：前端 618073944 | Java 606181507 | Python 626812652 | C/C++ 612253063 | 微信 634508462 | 苹果 692586424 | C#/.net 182808419 | PHP 305140648 | 运维 608723728

W3xue 的所有内容仅供测试，对任何法律问题及风险不承担任何责任。通过使用本站内容随之而来的风险与本站无关。
关于我们  |  意见建议  |  捐助我们  |  报错有奖  |  广告合作、友情链接（目前9元/月）请联系QQ：27243702 沸活量
皖ICP备17017327号-2　皖公网安备34020702000426号