如何使用XSLT和javascript从XML创建HTML

How to create HTML from XML using XSLT and javascript?

本文关键字：XML 创建 HTML javascript 何使用 XSLT      更新时间：2023-09-26

我正在学习本教程：http://www.w3schools.com/xsl/xsl_client.asp

我有一个HTML页面。我想使用XML文件中的数据创建HTML，并通过使用JavaScript从服务器读取XML和XSLT文件，使用XSLT对其进行样式设置。

HTML页面：

<html>
    <head>
        <script type="text/javascript" src="/scripts/onload.js"></script>
    </head>
    <body onload="displayResult()">
        <div id="example" />
    </body>
</html>

Javascript：

function loadXMLDoc(filename)
{
if (window.ActiveXObject)
  {
  xhttp = new ActiveXObject("Msxml2.XMLHTTP");
  }
else 
  {
  xhttp = new XMLHttpRequest();
  }
xhttp.open("GET", filename, false);
try {xhttp.responseType = "msxml-document"} catch(err) {} // Helping IE11
xhttp.send("");
return xhttp.responseXML;
}
function displayResult()
{
var location = document.URL;
var xmlLocation = location +"myXMl.xml";
xml = loadXMLDoc(xmlLocation);
xsl = loadXMLDoc("style.xsl");
// code for IE
if (window.ActiveXObject || xhttp.responseType == "msxml-document")
  {
  ex = xml.transformNode(xsl);
  document.getElementById("example").innerHTML = ex;
  }
// code for Chrome, Firefox, Opera, etc.
else if (document.implementation && document.implementation.createDocument)
  {
  xsltProcessor = new XSLTProcessor();
  xsltProcessor.importStylesheet(xsl);
  resultDocument = xsltProcessor.transformToFragment(xml, document);
  document.getElementById("example").appendChild(resultDocument);
  }
}

XSLT文件：

<?xml version="1.0" encoding="UTF-8"?>
<xsl:stylesheet version="1.0"
xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
<xsl:template match="/">
  <html>
  <body>
  <h2>My CD Collection</h2>
  <table border="1">
    <tr bgcolor="#9acd32">
      <th>Title</th>
      <th>Artist</th>
    </tr>
    <xsl:for-each select="movie">
    <tr>
      <td><xsl:value-of select="title"/></td>
      <td><xsl:value-of select="artist"/></td>
    </tr>
    </xsl:for-each>
  </table>
  </body>
  </html>
</xsl:template>
</xsl:stylesheet>

xml文件没有什么特别的，因为它只包含CD的信息等。

我很困惑，因为它看起来像是在将XSLT的输出"插入"到html的body中的"示例"div中。但是XSLT已经定义了html、head和body节点。那么，从技术上讲，我不是在<div id="example" />中放置了一个<html>节点吗？这不应该导致错误的html吗？（嵌套的html标签）？当我在safari中查看控制台时，DOM看起来很正常（只有一组html、head、body等。那么发生了什么？我是否误解了XSLT的工作原理？

您没有误解XSLT的工作原理。代码将html和body节点放在div元素中。只是浏览器当时可能选择忽略它们，而不将它们添加到DOM中。

因此，W3Schools的例子可能非常具有误导性。XSLT不应该真正包含html和body标记。只有当您在XML中使用<?xml-stylesheet处理指令，以便在浏览器中将XML显示为HTML时，才真正需要它们（如http://www.w3schools.com/xsl/xsl_transformation.asp，例如）

您可以将XSLT中给定的html标记作为一些伪标记，如果不想使用它们，您可以删除它们。

只需将XSLT修改为以下内容。

<?xml version="1.0" encoding="UTF-8"?>
<xsl:stylesheet version="1.0"
xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
<xsl:template match="/">
  <h2>My CD Collection</h2>
  <table border="1">
    <tr bgcolor="#9acd32">
      <th>Title</th>
      <th>Artist</th>
    </tr>
    <xsl:for-each select="movie">
    <tr>
      <td><xsl:value-of select="title"/></td>
      <td><xsl:value-of select="artist"/></td>
    </tr>
    </xsl:for-each>
  </table>
</xsl:template>
</xsl:stylesheet>

并且仍然得到主html、head和body tags。

相关文章：