W3C HTML 网页标准教程

XML to HTML

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

在 HTML 中显示 XML 数据

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

本例遍历一个 XML 文件 (cd_catalog.xml),然后把每个 CD 元素显示为一个 HTML 表格行:

<html>
<body>

<script type="text/javascript">
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>

查看示例:在 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 文件,都必须位于相同的服务器上。

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

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

收藏文章
表情删除后不可恢复,是否删除
取消
确定
图片正在上传,请稍后...
评论内容为空!
按钮 内容不能为空!
立刻说两句吧! 查看11条评论