第7章 XSL高级应用

将XML转换为HTML输出

这是一种非常常见的方法,因为如果遇到不支持XML的浏览器,必须用HTML来保持兼容性.
要使用这种方法,就要利用javascript和DOMDocument对象.

一般的方法:
定义两个DOMDocument对象,一般load xml文档,一个load xsl文档,然后用transformNode进行转换输出.

例子:

ex28.xml
第7章 XSL高级应用<?xml version="1.0" encoding="gb2312"?>
第7章 XSL高级应用<!-- 注意这里没有对XSL文件的引用 -->
第7章 XSL高级应用<CATALOG>
第7章 XSL高级应用    <CD>
第7章 XSL高级应用        <TITLE>天空</TITLE>
第7章 XSL高级应用        <ARTIST>王菲</ARTIST>
第7章 XSL高级应用        <LANGUAGE>国语</LANGUAGE>
第7章 XSL高级应用        <COMPANY>福茂唱片</COMPANY>
第7章 XSL高级应用        <YEAR>1995</YEAR>
第7章 XSL高级应用        <PRICE>28元</PRICE>
第7章 XSL高级应用    </CD>
第7章 XSL高级应用    <CD>
第7章 XSL高级应用        <TITLE>不老的传说</TITLE>
第7章 XSL高级应用        <ARTIST>张学友</ARTIST>
第7章 XSL高级应用        <LANGUAGE>粤语</LANGUAGE>
第7章 XSL高级应用        <COMPANY>宝丽金</COMPANY>
第7章 XSL高级应用        <YEAR>1997</YEAR>
第7章 XSL高级应用        <PRICE>28元</PRICE>
第7章 XSL高级应用    </CD>
第7章 XSL高级应用</CATALOG>
第7章 XSL高级应用

ex28.xsl
第7章 XSL高级应用<?xml version="1.0" encoding="gb2312"?>
第7章 XSL高级应用<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform" xmlns:fo="http://www.w3.org/1999/XSL/Format">
第7章 XSL高级应用<xsl:template match="/">
第7章 XSL高级应用    <html>
第7章 XSL高级应用        <head>
第7章 XSL高级应用            <title>转换结果</title>
第7章 XSL高级应用        </head>
第7章 XSL高级应用        <body>
第7章 XSL高级应用            <p align="center"><font color="#FF0000" size="5">CD大卖场</font></p>
第7章 XSL高级应用            <table width="95%" border="1" bgcolor="#00FFFF">
第7章 XSL高级应用                <tbody>
第7章 XSL高级应用                    <tr>
第7章 XSL高级应用                        <td width="20%"><div align="center">专辑名称</div></td>
第7章 XSL高级应用                        <td width="15%"><div align="center">歌手</div></td>
第7章 XSL高级应用                        <td width="15%"><div align="center">语言</div></td>
第7章 XSL高级应用                        <td width="15%"><div align="center">发行公司</div></td>
第7章 XSL高级应用                        <td width="15%"><div align="center">年份</div></td>
第7章 XSL高级应用                        <td width="15%"><div align="center">价格</div></td>
第7章 XSL高级应用                    </tr>
第7章 XSL高级应用                    <xsl:for-each select="//CD">
第7章 XSL高级应用                        <tr>
第7章 XSL高级应用                            <td><div align="center">
第7章 XSL高级应用                                <xsl:value-of select="TITLE"/>
第7章 XSL高级应用                            </div></td>
第7章 XSL高级应用                            <td><div align="center">
第7章 XSL高级应用                                <xsl:value-of select="ARTIST"/>
第7章 XSL高级应用                            </div></td>
第7章 XSL高级应用                            <td><div align="center">
第7章 XSL高级应用                                <xsl:value-of select="LANGUAGE"/>
第7章 XSL高级应用                            </div></td>
第7章 XSL高级应用                            <td><div align="center">
第7章 XSL高级应用                                <xsl:value-of select="COMPANY"/>
第7章 XSL高级应用                            </div></td>
第7章 XSL高级应用                            <td><div align="center">
第7章 XSL高级应用                                <xsl:value-of select="YEAR"/>
第7章 XSL高级应用                            </div></td>
第7章 XSL高级应用                            <td><div align="center">
第7章 XSL高级应用                                <xsl:value-of select="PRICE"/>
第7章 XSL高级应用                            </div></td>
第7章 XSL高级应用                        </tr>
第7章 XSL高级应用                    </xsl:for-each>
第7章 XSL高级应用                </tbody>
第7章 XSL高级应用            </table>
第7章 XSL高级应用        </body>
第7章 XSL高级应用    </html>
第7章 XSL高级应用</xsl:template>
第7章 XSL高级应用</xsl:stylesheet>
第7章 XSL高级应用

output.html
第7章 XSL高级应用<html>
第7章 XSL高级应用   <head>
第7章 XSL高级应用      <title>转换为HTML</title>
第7章 XSL高级应用      <meta http-equiv="Content-Type" content="text/html;charset=gb2312"/> 
第7章 XSL高级应用   </head>
第7章 XSL高级应用   <XML id="source" src="ex28.xml"/>
第7章 XSL高级应用   <XML id="stylesheet" src="ex28.xsl"/>
>

这样输出的HTML就直接用document.write写出转换方法transformNode的返回HTML代码就可以了.

相关文章：

猜你喜欢
相关资源
相似解决方案
热门标签
Java Python linux javascript Mysql C# Docker 算法 前端 SpringBoot Redis Vue spring 设计模式 .net core .net kubernetes c++ 数据库 数据结构 大数据 js 机器学习 微服务 Android Go 程序员 面试 JVM ASP.net core 云原生 人工智能 后端 PHP git CSS golang k8s Nginx Django mybatis 深度学习 多线程 React 架构 devops 爬虫 云计算 Spring Boot LeetCode