array(2) { ["docs"]=> array(10) { [0]=> array(10) { ["id"]=> string(3) "428" ["text"]=> string(77) "Visual Studio 2017 单独启动MSDN帮助(Microsoft Help Viewer)的方法" ["intro"]=> string(288) "目录 ECharts 异步加载 ECharts 数据可视化在过去几年中取得了巨大进展。开发人员对可视化产品的期望不再是简单的图表创建工具,而是在交互、性能、数据处理等方面有更高的要求。 chart.setOption({ color: [ " ["username"]=> string(8) "DonetRen" ["tagsname"]=> string(55) "Visual Studio 2017|MSDN帮助|C#程序|.NET|Help Viewer" ["tagsid"]=> string(23) "[401,402,403,"300",404]" ["catesname"]=> string(0) "" ["catesid"]=> string(2) "[]" ["createtime"]=> string(10) "1511400964" ["_id"]=> string(3) "428" } [1]=> array(10) { ["id"]=> string(3) "427" ["text"]=> string(42) "npm -v;报错 cannot find module "wrapp"" ["intro"]=> string(288) "目录 ECharts 异步加载 ECharts 数据可视化在过去几年中取得了巨大进展。开发人员对可视化产品的期望不再是简单的图表创建工具,而是在交互、性能、数据处理等方面有更高的要求。 chart.setOption({ color: [ " ["username"]=> string(4) "zzty" ["tagsname"]=> string(50) "node.js|npm|cannot find module "wrapp“|node" ["tagsid"]=> string(19) "[398,"239",399,400]" ["catesname"]=> string(0) "" ["catesid"]=> string(2) "[]" ["createtime"]=> string(10) "1511400760" ["_id"]=> string(3) "427" } [2]=> array(10) { ["id"]=> string(3) "426" ["text"]=> string(54) "说说css中pt、px、em、rem都扮演了什么角色" ["intro"]=> string(288) "目录 ECharts 异步加载 ECharts 数据可视化在过去几年中取得了巨大进展。开发人员对可视化产品的期望不再是简单的图表创建工具,而是在交互、性能、数据处理等方面有更高的要求。 chart.setOption({ color: [ " ["username"]=> string(12) "zhengqiaoyin" ["tagsname"]=> string(0) "" ["tagsid"]=> string(2) "[]" ["catesname"]=> string(0) "" ["catesid"]=> string(2) "[]" ["createtime"]=> string(10) "1511400640" ["_id"]=> string(3) "426" } [3]=> array(10) { ["id"]=> string(3) "425" ["text"]=> string(83) "深入学习JS执行--创建执行上下文(变量对象,作用域链,this)" ["intro"]=> string(288) "目录 ECharts 异步加载 ECharts 数据可视化在过去几年中取得了巨大进展。开发人员对可视化产品的期望不再是简单的图表创建工具,而是在交互、性能、数据处理等方面有更高的要求。 chart.setOption({ color: [ " ["username"]=> string(7) "Ry-yuan" ["tagsname"]=> string(33) "Javascript|Javascript执行过程" ["tagsid"]=> string(13) "["169","191"]" ["catesname"]=> string(0) "" ["catesid"]=> string(2) "[]" ["createtime"]=> string(10) "1511399901" ["_id"]=> string(3) "425" } [4]=> array(10) { ["id"]=> string(3) "424" ["text"]=> string(30) "C# 排序技术研究与对比" ["intro"]=> string(288) "目录 ECharts 异步加载 ECharts 数据可视化在过去几年中取得了巨大进展。开发人员对可视化产品的期望不再是简单的图表创建工具,而是在交互、性能、数据处理等方面有更高的要求。 chart.setOption({ color: [ " ["username"]=> string(9) "vveiliang" ["tagsname"]=> string(0) "" ["tagsid"]=> string(2) "[]" ["catesname"]=> string(8) ".Net Dev" ["catesid"]=> string(5) "[199]" ["createtime"]=> string(10) "1511399150" ["_id"]=> string(3) "424" } [5]=> array(10) { ["id"]=> string(3) "423" ["text"]=> string(72) "【算法】小白的算法笔记:快速排序算法的编码和优化" ["intro"]=> string(288) "目录 ECharts 异步加载 ECharts 数据可视化在过去几年中取得了巨大进展。开发人员对可视化产品的期望不再是简单的图表创建工具,而是在交互、性能、数据处理等方面有更高的要求。 chart.setOption({ color: [ " ["username"]=> string(9) "penghuwan" ["tagsname"]=> string(6) "算法" ["tagsid"]=> string(7) "["344"]" ["catesname"]=> string(0) "" ["catesid"]=> string(2) "[]" ["createtime"]=> string(10) "1511398109" ["_id"]=> string(3) "423" } [6]=> array(10) { ["id"]=> string(3) "422" ["text"]=> string(64) "JavaScript数据可视化编程学习(二)Flotr2,雷达图" ["intro"]=> string(288) "目录 ECharts 异步加载 ECharts 数据可视化在过去几年中取得了巨大进展。开发人员对可视化产品的期望不再是简单的图表创建工具,而是在交互、性能、数据处理等方面有更高的要求。 chart.setOption({ color: [ " ["username"]=> string(7) "chengxs" ["tagsname"]=> string(28) "数据可视化|前端学习" ["tagsid"]=> string(9) "[396,397]" ["catesname"]=> string(18) "前端基本知识" ["catesid"]=> string(5) "[198]" ["createtime"]=> string(10) "1511397800" ["_id"]=> string(3) "422" } [7]=> array(10) { ["id"]=> string(3) "421" ["text"]=> string(36) "C#表达式目录树(Expression)" ["intro"]=> string(288) "目录 ECharts 异步加载 ECharts 数据可视化在过去几年中取得了巨大进展。开发人员对可视化产品的期望不再是简单的图表创建工具,而是在交互、性能、数据处理等方面有更高的要求。 chart.setOption({ color: [ " ["username"]=> string(4) "wwym" ["tagsname"]=> string(0) "" ["tagsid"]=> string(2) "[]" ["catesname"]=> string(4) ".NET" ["catesid"]=> string(7) "["119"]" ["createtime"]=> string(10) "1511397474" ["_id"]=> string(3) "421" } [8]=> array(10) { ["id"]=> string(3) "420" ["text"]=> string(47) "数据结构 队列_队列实例:事件处理" ["intro"]=> string(288) "目录 ECharts 异步加载 ECharts 数据可视化在过去几年中取得了巨大进展。开发人员对可视化产品的期望不再是简单的图表创建工具,而是在交互、性能、数据处理等方面有更高的要求。 chart.setOption({ color: [ " ["username"]=> string(7) "idreamo" ["tagsname"]=> string(40) "C语言|数据结构|队列|事件处理" ["tagsid"]=> string(23) "["246","247","248",395]" ["catesname"]=> string(12) "数据结构" ["catesid"]=> string(7) "["133"]" ["createtime"]=> string(10) "1511397279" ["_id"]=> string(3) "420" } [9]=> array(10) { ["id"]=> string(3) "419" ["text"]=> string(47) "久等了,博客园官方Android客户端发布" ["intro"]=> string(288) "目录 ECharts 异步加载 ECharts 数据可视化在过去几年中取得了巨大进展。开发人员对可视化产品的期望不再是简单的图表创建工具,而是在交互、性能、数据处理等方面有更高的要求。 chart.setOption({ color: [ " ["username"]=> string(3) "cmt" ["tagsname"]=> string(0) "" ["tagsid"]=> string(2) "[]" ["catesname"]=> string(0) "" ["catesid"]=> string(2) "[]" ["createtime"]=> string(10) "1511396549" ["_id"]=> string(3) "419" } } ["count"]=> int(200) } 222 XSL基础教程(二) - 爱码网

客户端XSL:如何用XML解析器在客户机上将XML文档转换成HTML文档。

一个JavaScript的解决方法
在前文中,我们解释了如何用XSL将一个文档从XML转换成HTML。窍门就是向XML文件中增加一个XSL样式表,然后让浏览器来进行转换。即使这种方法能奏效,在XML文件中包含一个样式表引用也并非令人满意的方法,并且在不支持XSL的浏览器上这种方法还不能奏效。
一个更通用的方法应该是用一个JavaScript来进行从XML到HTML的转换。使用一个JavaScript,就更有以下可能性:

  • 允许JavaScript进行浏览器细节测试;
  • 根据浏览器和用户需求使用不同的样式表。
  • 这就是XSL的美妙之处。XSL设计目的之一就是使数据从一个格式转换成另一个格式成为可能,从而支持不同的浏览器和不同的用户需求。
  • 客户端XSL转换将成为未来浏览器工作任务的一个主要部分,我们还将看到专业化浏览器市场的成长,比如Braille、发声网络、网络打印机、手持PC、移动电话等。


XML文件和XSL文件
现在重新来看看前面章节中的XML文档:

<?xml version="1.0"?>
            <CATALOG>
            <CD>
            <TITLE>Empire Burlesque</TITLE>
            <ARTIST>Bob Dylan</ARTIST>
            <COUNTRY>USA</COUNTRY>
            <COMPANY>Columbia</COMPANY>
            <PRICE>10.90</PRICE>
            <YEAR>1985</YEAR>
            </CD>
            .
            .
            .
            还有附带的XSL样式表:
            <?xml version='1.0'?>
            <xsl:stylesheet xmlns:xsl="http://www.w3.org/TR/WD-xsl">
            <xsl:template match="/">
            <html>
            <body>
            <table border="2" bgcolor="yellow">
            <tr>
            <th>Title</th>
            <th>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>

要确保XML文件没有对XSL文件的引用,XSL文件也没有对XML文件的引用。注意:上面的句子说明一个XML文件可以用许多不同的XSL文件进行转换。
在浏览器中将XML转换到HTML
以下是在客户机上将XML文件转换成HTML所需要的源代码,很简单:
<html>
            <body>
            <script language="javascript">
            // Load XML
            var xml = new ActiveXObject("Microsoft.XMLDOM")
            xml.async = false
            xml.load("cd_catalog.xml")
            // Load the XSL
            var xsl = new ActiveXObject("Microsoft.XMLDOM")
            xsl.async = false
            xsl.load("cd_catalog.xsl")
            // Transform
            document.write(xml.transformNode(xsl))
            </script>
            </body>
            </html>


如果使用的是Internet Explorer 5.0 或更高版本,请点击这里 查看结果

代码的第一块创建了Microsoft XML 解析器(XMLDOM)的一个例示,并将XML文档加载到内存中。代码的第二块创建解析器的另一个例示,并将XSL文档加载到内存中。代码的最后一行用XSL文档转换XML文档,将结果写入HTML 文档中。

XSL基础教程(二)
XSL基础教程(二)
XSL基础教程(二)

服务器端XSL:如何用XML解析器在服务器上将XML文档转换成HTML文档。

服务器端XSL
由于不是所有的浏览器都支持XML和XSL,因此就有了一个在服务器上将XML转换成HTML的方法。

一个跨浏览器的解决方法
在前面的章节中,我们解释了如何用XSL在浏览器中将XML文档转换成HTML,窍门就是让JavaScript使用一个XML解析器来进行转换。但是当浏览器不支持XML解析器时,这种方法是不奏效的。要使XML数据对所有浏览器都可用,我们就必须在服务器上转换XML文档,并将它作为纯HTML发送到浏览器。

这是XSL的另一个美妙之处。XSL的设计目的之一是使得在服务器上将数据从一种格式转换成另一种格式成为可能,并将可读数据返回到所有未来的浏览器中。

在服务器上进行XSL转换正在成为未来Internet信息服务器工作任务的一个主要部分,同时我们将看到专用浏览器市场的发展,如:Braille、有声网络、网络打印机、手持PC、移动电话等。

XML文件和XSL文件
现在来重新看看前面章节中的XML文档:

<?xml version="1.0"?>
            <CATALOG>
            <CD>
            <TITLE>Empire Burlesque</TITLE>
            <ARTIST>Bob Dylan</ARTIST>
            <COUNTRY>USA</COUNTRY>
            <COMPANY>Columbia</COMPANY>
            <PRICE>10.90</PRICE>
            <YEAR>1985</YEAR>
            </CD>
            .
            .
            .

如果使用的是Internet Explorer 5.0或更高版本,可以点击这里查看 XML文件
再看看伴随的XSL样式表:
<?xml version='1.0'?>
            <xsl:stylesheet xmlns:xsl="http://www.w3.org/TR/WD-xsl">
            <xsl:template match="/">
            <html>
            <body>
            <table border="2" bgcolor="yellow">
            <tr>
            <th>Title</th>
            <th>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>

如果使用的是Internet Explorer 5.0或更高版本,可以点击这里查看 XSL文件

以上XSL文档的语法在前面章节中已经解释过了,因此这里不再做解释。但是要确保XML文件没有对XSL文件的引用,XSL文件也没有对XML文件的引用。同时请注意:上面的句子表明一个服务器上的XML文件可以用许多不同的XSL文件进行转换。

在服务器端将XML转换成HTML
以下是在服务器上转换XML文件所需要的简单源代码:

<%
            'Load the XML
            set xml = Server.CreateObject("Microsoft.XMLDOM")
            xml.async = false
            xml.load(Server.MapPath("cd_catalog.xml"))
            'Load the XSL
            set xsl = Server.CreateObject("Microsoft.XMLDOM")
            xsl.async = false
            xsl.load(Server.MapPath("cd_catalog.xsl"))
            'Transform the file
            Response.Write(xml.transformNode(xsl))
            %>

代码的第一块创建Microsoft XML解析器(XMLDOM)的一个例示,并将XML文件装载到内存中。代码的第二块创建解析器的另一个例示,并将XSL文档装载到内存。代码的最后一行用XSL文档转换XML文档,并将结果返回浏览器。

相关文章: