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

Question

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

我有一个 HTML 页面。 我想使用 XML 文件中的数据创建 HTML，并使用 XSLT 对其进行样式设置，方法是使用 JavaScript 从服务器读取 XML 和 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节点。 那么我不是在技术上将<html>节点放在<div id="example" /> ，这不应该导致不正确的 html 吗？ （嵌套的html标签）？ 当我在 safari 中查看控制台时，DOM 看起来很正常（只有一组html 、 head 、 body等。这是怎么回事？我误解了 XSLT 的工作原理吗？

Answer 1

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

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

Answer 2

您可以将 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 。

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

问题描述

2 个解决方案

解决方案1
2 已采纳 2014-09-09 08:01:04

解决方案2
0 2014-09-09 08:03:41

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

问题描述

2 个解决方案

解决方案1 2 已采纳 2014-09-09 08:01:04

解决方案2 0 2014-09-09 08:03:41

解决方案1
2 已采纳 2014-09-09 08:01:04

解决方案2
0 2014-09-09 08:03:41