最新的Web开发教程
 

XSLT - 在客户端


XSLT可以用来将文档转换为XHTML浏览器。


一个JavaScript解决方案

在前面的章节中,我们已经解释了XSLT如何可以用于从XML转换的文档以XHTML。 我们通过添加一个XSL样式表的XML文件,并让浏览器做转型这样做。

即使这工作得很好,它并不总是希望包括在XML文件的样式表的参考(eg it will not work in a non XSLT aware browser.)

更通用的解决办法是使用JavaScript执行转换。

通过使用JavaScript,我们可以:

  • 做特定的浏览器测试
  • 根据浏览器和用户需求使用不同的样式表

这是XSLT的美丽! 其中一个设计目标是XSLT使人们有可能从一种格式转换到另一个数据,支持不同的浏览器和不同的用户需求。


XML文件和XSL文件

看看你在前面的章节中所看到的XML文档:

<?xml version="1.0" encoding="UTF-8"?>
<catalog>
  <cd>
    <title>Empire Burlesque</title>
    <artist>Bob Dylan</artist>
    <country>USA</country>
    <company>Columbia</company>
    <price>10.90</price>
    <year>1985</year>
  </cd>
.
.
</catalog>

查看XML文件

而伴随XSL样式表:

<?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 style="text-align:left">Title</th>
      <th style="text-align:left">Artist</th>
    </tr>
    <xsl:for-each select="catalog/cd">
    <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>

查看XSL文件

Notice that the XML file does not have a reference to the XSL file.

IMPORTANT:上面这句话表明,XML文件可以用许多不同的XSL样式表进行改造。


XML转换成XHTML的浏览器

下面是XML文件转换成XHTML在客户端上所需的源代码:

<html>
<head>
<script>
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()
{
xml = loadXMLDoc("cdcatalog.xml");
xsl = loadXMLDoc("cdcatalog.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);
  }
}
</script>
</head>
<body onload="displayResult()">
<div id="example" />
</body>
</html>
试一试»

Tip:如果你不知道如何编写JavaScript,请学习我们的JavaScript教程

例子解释:

The loadXMLDoc() function does the following:

  • 创建XMLHttpRequest对象
  • 使用open()send() XMLHttpRequest对象的方法来发送请求到服务器
  • 获得响应数据的XML数据

The displayResult() function is used to display the XML file styled by the XSL file:

  • 加载XML和XSL文件
  • 测试用户有什么样的浏览器
  • 如果Internet Explorer:
    • 使用transformNode()方法将XSL样式表应用于XML文档
    • 设置当前文件的主体(id="example")以包含风格xml文档
  • 如果其他浏览器:
    • 创建一个新的XSLTProcessor中的对象和XSL文件导入到它
    • 使用transformToFragment()方法将XSL样式表应用于XML文档
    • 设置当前文件的主体(id="example")以包含风格xml文档