第7章 XSL高级应用

将XML转换为HTML输出

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

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

例子:

ex28.xml

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

ex28.xsl

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

output.html

< html >
    < head >
       < title > 转换为HTML </ title >
       < meta  http-equiv ="Content-Type"  content ="text/html;charset=gb2312" />  
    </ head >
    < XML  id ="source"  src ="ex28.xml" />
    < XML  id ="stylesheet"  src ="ex28.xsl" />
    < script  language ="javascript" >
       function viewxml()
       {
           a.innerText=source.xml;
        }
        function viewxsl()
        {
            a.innerText=stylesheet.xml;
        }
        function change()
        {
            var xmldom=new ActiveXObject("Microsoft.XMLDOM");
            xmldom.load("ex28.xml");
            var xsldom=new ActiveXObject("Microsoft.XMLDOM");
            xsldom.load("ex28.xsl");
            document.write(xmldom.transformNode(xsldom));
        }
    </ script >
    < body >
       < p > 单击下面三个按钮查看效果 </ p >
       < p > &nbsp; </ p >
       < input  name ="button1"  type ="button"  value ="显示XML文件"  onclick ="viewxml()" />
       < input  name ="button2"  type ="button"  value ="显示XSL文件"  onclick ="viewxsl()" />
       < input  name ="button3"  type ="button"  value ="显示转换文件"  onclick ="change()" />
       < div  id ="a" ></ div >
    </ body >
</ html >

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