开发学院

您的位置:首页>教程>正文

教程正文

XML to 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>


    例子解释:

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

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

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

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

    5. 用 </table> 结束表格

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

    跨域访问

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

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

    开发学院 的实例所打开的 XML 文件位于 开发学院 的域上。

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