将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> </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代码就可以了.
这是一种非常常见的方法,因为如果遇到不支持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> </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代码就可以了.
