菜单
×
   ❮     
HTML CSS JAVASCRIPT SQL PYTHON JAVA PHP 如何 W3.CSS C C++ C# BOOTSTRAP REACT MYSQL JQUERY EXCEL XML DJANGO NUMPY PANDAS NODEJS R TYPESCRIPT ANGULAR GIT POSTGRESQL MONGODB ASP AI GO KOTLIN SASS VUE DSA GEN AI SCIPY AWS 网络安全 数据科学
     ❯   

XML 教程

XML首页 XML简介 XML如何使用 XML树 XML语法 XML元素 XML属性 XML命名空间 XML显示 XML HttpRequest XML解析器 XML DOM XML XPath XML XSLT XML XQuery XML XLink XML验证器 XML DTD XML Schema XML服务器 XML示例 XML测验 XML证书

XML AJAX

AJAX Introduction AJAX XMLHttp AJAX Request AJAX Response AJAX XML File AJAX PHP AJAX ASP AJAX Database AJAX Applications AJAX Examples

XML DOM

DOM Introduction DOM Nodes DOM Accessing DOM Node Info DOM Node List DOM Traversing DOM Navigating DOM Get Values DOM Change Nodes DOM Remove Nodes DOM Replace Nodes DOM Create Nodes DOM Add Nodes DOM Clone Nodes DOM Examples

XPath 教程

XPath Introduction XPath Nodes XPath Syntax XPath Axes XPath Operators XPath Examples

XSLT 教程

XSLT Introduction XSL Languages XSLT Transform XSLT <template> XSLT <value-of> XSLT <for-each> XSLT <sort> XSLT <if> XSLT <choose> XSLT Apply XSLT on the Client XSLT on the Server XSLT Edit XML XSLT Examples

XQuery 教程

XQuery Introduction XQuery Example XQuery FLWOR XQuery HTML XQuery Terms XQuery Syntax XQuery Add XQuery Select XQuery Functions

XML DTD

DTD Introduction DTD Building Blocks DTD Elements DTD Attributes DTD Elements vs Attr DTD Entities DTD Examples

XSD Schema

XSD简介 XSD如何使用 XSD <schema> XSD元素 XSD属性 XSD限制 XSD复杂元素 XSD空元素 XSD仅包含元素 XSD仅包含文本 XSD混合元素 XSD指示器 XSD <any> XSD <anyAttribute> XSD替换 XSD示例

XSD Data Types

XSD String XSD Date/Time XSD Numeric XSD Misc XSD Reference

Web Services

XML Services XML WSDL XML SOAP XML RDF XML RSS

参考手册

DOM节点类型 DOM节点 DOM NodeList DOM NamedNodeMap DOM文档 DOM元素 DOM属性 DOM文本 DOM CDATA DOM注释 DOM XMLHttpRequest DOM解析器 XSLT元素 XSLT/XPath函数

XSLT - 在客户端


XSLT可以在您的浏览器中用于将文档转换为XHTML。


一个JavaScript解决方案

在前面的章节中,我们已经解释了XSLT如何用于将文档从XML转换为XHTML。我们通过将XSL样式表添加到XML文件并让浏览器进行转换来完成此操作。

尽管这种方法效果很好,但将样式表引用包含在XML文件中并不总是可取的(例如,它在不支持XSLT的浏览器中将不起作用)。

更通用的解决方案是使用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="/">
  <h2>我的 CD 收藏</h2>
  <table border="1">
    <tr bgcolor="#9acd32">
      <th style="text-align:left">标题</th>
      <th style="text-align:left">艺术家</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>
</xsl:template>

</xsl:stylesheet>

查看 XSL 文件.

请注意,XML文件没有引用XSL文件。

重要提示:上述句子表明XML文件可以使用许多不同的XSL样式表进行转换。



在浏览器中将XML转换为XHTML

以下是在客户端将XML文件转换为XHTML所需的源代码

示例

<!DOCTYPE html>
<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) {} // 帮助IE11
xhttp.send("");
return xhttp.responseXML;
}

function displayResult()
{
xml = loadXMLDoc("cdcatalog.xml");
xsl = loadXMLDoc("cdcatalog.xsl");
// 针对IE的代码
if (window.ActiveXObject || xhttp.responseType == "msxml-document")
  {
  ex = xml.transformNode(xsl);
  document.getElementById("example").innerHTML = ex;
  }
// 针对Chrome、Firefox、Opera等的代码
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>
自己动手试一试 »

提示:如果您不知道如何编写JavaScript,请学习我们的JavaScript教程

示例解释

loadXMLDoc()函数执行以下操作

  • 创建一个 XMLHttpRequest 对象
  • 使用XMLHttpRequest对象的open()和send()方法向服务器发送请求
  • 以XML数据形式获取响应数据

displayResult()函数用于显示经过XSL文件样式化的XML文件

  • 加载XML和XSL文件
  • 测试用户使用的是哪种浏览器
  • 如果是Internet Explorer
    • 使用transformNode()方法将XSL样式表应用于XML文档
    • 设置当前文档的主体(id="example")以包含样式化的XML文档
  • 如果是其他浏览器
    • 创建一个新的XSLTProcessor对象并导入XSL文件
    • 使用transformToFragment()方法将XSL样式表应用于XML文档
    • 设置当前文档的主体(id="example")以包含样式化的XML文档

×

联系销售

如果您想将 W3Schools 服务用于教育机构、团队或企业,请发送电子邮件给我们
sales@w3schools.com

报告错误

如果您想报告错误,或想提出建议,请发送电子邮件给我们
help@w3schools.com

W3Schools 经过优化,旨在方便学习和培训。示例可能经过简化,以提高阅读和学习体验。教程、参考资料和示例会不断审查,以避免错误,但我们无法保证所有内容的完全正确性。使用 W3Schools 即表示您已阅读并接受我们的使用条款Cookie 和隐私政策

版权所有 1999-2024 Refsnes Data。保留所有权利。W3Schools 由 W3.CSS 提供支持