灵活调用xsl来解析xml文档(js异步)

　2006-11-29 11:25:31　来源：WEB开发网　　　

核心提示： 1.新建一个vs2003的web工程,取名为xmlTest 2.将工程目录下的WebForm1.aspx中内容全部删除，只留下顶部的一条语句： <%@ Page language="c#" Codebehind="WebForm1.aspx.cs" AutoEventWi

1.新建一个vs2003的web工程,取名为xmlTest

2.将工程目录下的WebForm1.aspx中内容全部删除，只留下顶部的一条语句：

<%@ Page language="c#" Codebehind="WebForm1.aspx.cs" AutoEventWireup="false" Inherits="XMLTest.WebForm1" %>

3.修改WebForm1.aspx.cs中内容，在Page_Load中加入:

以下是引用片段：
　 XmlDocument doc=new XmlDocument();
　 String xmlfile=string.Empty;
　 xmlfile=Context.Request.PhysicalapplicationPath+(Request.QueryString["sel"].ToString()=="xml"?"\\hello.xml":"\\hello.xsl");
　 doc.Load(xmlfile);
　 Response.Write(doc.InnerXml);

　　 4.在工程根目录下新增test.htm,并设为工程首页:

以下是引用片段：
<html>
<head>
<title></title>
</head>
<body>
<div id="resTree"></div>
<FONT face="宋体"></FONT><input type="button" value="执行" ><BR>
<script language="JScript">
var srcTree,xsltTree,xt;
var http_request = false;
　
function GetXml()
{　　
　 srcTree = new ActiveXObject("Msxml2.FreeThreadedDOMDocument");
　 srcTree.async=false;
　 xsltTree= new ActiveXObject("Msxml2.FreeThreadedDOMDocument");
　 xsltTree.async = false;
　 xt=new ActiveXObject("MSXML2.XSLTemplate");
　 resTree.innerHTML="";
　 makeRequest("WebForm1.aspx?sel=xml",GetXml_CB);
}
　　
　 function makeRequest(url,callback) {
　　　 http_request = false;
　　　 if (window.xmlhttpRequest) { // Mozilla, Safari,...
　　　　　 http_request = new XMLHttPRequest();
　　　　　 if (http_request.overrideMimeType) {
　　　　　　　 http_request.overrideMimeType('text/xml');
　　　　　 }
　　　 } else if (window.ActiveXObject) { // IE
　　　　　 try {
　　　　　　　 http_request = new ActiveXObject("Msxml2.XMLHTTP");
　　　　　 } catch (e) {
　　　　　　　 try {
　　　　　　　　　 http_request = new ActiveXObject("Microsoft.XMLHTTP");
　　　　　　　 } catch (e) {}
　　　　　 }
　　　 }

　 if (!http_request) {
　　　　　 alert('Giving up :( Cannot create an XMLHTTP instance');
　　　　　 return false;
　　　 }
　　　 http_request.onreadystatechange = callback;
　　　 http_request.open('GET', url, true);
　　　 http_request.send(null);
　 }

　 function GetXml_CB() {

　 if (http_request.readyState == 4) {
　　　　　 if (http_request.status == 200) {　　
　 srcTree.loadXML(http_request.responseText);
　 makeRequest("WebForm1.aspx?sel=xsl",GetXsl_CB);
　　　　　 } else {
　　　　　　　 alert('There was a problem with the request.');
　　　　　 }
　　　 }

　 }
　　
　 function GetXsl_CB(){
　　　 if (http_request.readyState == 4) {
　　　　 if (http_request.status == 200) {
　　　 xsltTree.loadXML(http_request.responseText);
　　　 xt.stylesheet=xsltTree;
　　　 var proc=xt.createProcessor();
　　　 proc.input=srcTree;
　　　 proc.transform();
　　　 resTree.innerHTML=proc.output;
　　　　　 } else {
　　　　　　　 alert('There was a problem with the request.');
　　　　　 }
　　　 }
　
　 }

　 if (!http_request) {
　　　　　 alert('Giving up :( Cannot create an XMLHTTP instance');
　　　　　 return false;
　　　 }
　　　 http_request.onreadystatechange = callback;
　　　 http_request.open('GET', url, true);
　　　 http_request.send(null);
　 }

</script>

</body>
</html>

　　 5.运行工程，看看效果吧!

hello.xml(注意:我的xml文档中并没有指定对应的xsl解析文件名)

以下是引用片段：
<?xml version='1.0'?>

<breakfast-menu>
<food>
　 <name>Belgian Waffles</name>
　 <price>$5.95</price>
　 <description>Two of our famous Belgian Waffles
　　 with plenty of real maple syrup.</description>
　 <calories>650</calories>
</food>
<food>
　 <name>Strawberry Belgian Waffles</name>
　 <price>$7.95</price>
　 <description>Light Belgian waffles covered with
　　 strawberries and whipped cream.</description>
　 <calories>900</calories>
</food>
<food>
　 <name>Berry-Berry Belgian Waffles</name>
　 <price>$8.95</price>
　 <description>Light Belgian waffles covered
　　 with an assortment of fresh berries
　　 and whipped cream.</description>
　 <calories>900</calories>
</food>
<food>
　 <name>French Toast</name>
　 <price>$4.50</price>
　 <description>Thick slices made from our homemade
　　 sourdough bread.</description>
　 <calories>600</calories>
</food>
<food>
　 <name>Homestyle Breakfast</name>
　 <price>$6.95</price>
　 <description>Two eggs, bacon or sausage, toast,
　　 and our ever-popular hash browns.</description>
　 <calories>950</calories>
</food>
</breakfast-menu>

hello.xsl

以下是引用片段：
<?xml version="1.0"?>
<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
<xsl:template match="/breakfast-menu">

　 <xsl:for-each select="food">
　　　　 <DIV STYLE="background-color:teal; color:white; padding:4px">
　　　　　 <SPAN STYLE="font-weight:bold; color:white"><xsl:value-of select="name"/></SPAN>
　　　　　至 <xsl:value-of select="price"/>
　　　　 </DIV>
　　　　 <DIV STYLE="margin-left:20px; margin-bottom:1em; font-size:10pt">
　　　　　 <xsl:value-of select="description"/>
　　　　　 <SPAN STYLE="font-style:italic">
　　　　　　 <xsl:value-of select="calories"/> 嘿嘿
　　　　　 </SPAN>
　　　　 </DIV>
　　　 </xsl:for-each>

</xsl:template>
</xsl:stylesheet>

　　 xml文档只有纯粹的数据，如果需要显示到html页面中的话，一般需要使用定制的xsl文档来解析，或者手工通过js来读取xml中的值显示到html中的dom树中，当使用xsl文档来解析时，相应的xml文档中必须指定对应的xsl文档才能正常显示，但当有些程序动态输出xml文档时，并没有指定相应的xsl文档，这时就必须通过其它途径来加载相应的xsl文档来解析，当然，在服务器端输出xml文档时，通过一些xml api也可以实现，我这儿描述的是通过js来实现的一种方式。用这种方式的话，就抛开了服务器平台的限制，服务器端只需要输出相应的xml文档(.net/j2ee都可以)，并且将对应的xsl文档输出给客户端（可以输出流或直接在客户端加载xsl文档)。

这里有几个需要注意的地方，我们一般是使用Msxml2.Document组件来加载xml文档的，但当动态使用xsl解析xml文档时，必须使用Msxml2.FreeThreadedDOMDocument这种自由线程的组件，同时使用MSXML2.XSLTemplate模板组件来加载xml,xsl数据，通过MSXML2.XSLTemplate的transform方法，就可以动态的用xsl来解析xml数据了,另外，IE5开始，系统默认的xml组件是msxml2，如果需要使用更新的msxml组件需要安装更新的msxml组件包，并指定新的名称，例如Msxml2.FreeThreadedDOMDocument.4.0，现在最新的msxml组件是6.0beta，可在M$网站下载。

演示：http://www.21cz.cn/xmltest/test.htm

xml文件查看：http://www.21cz.cn/xmltest/hello.xml
　　 xsl文件查看：http://www.21cz.cn/xmltest/hello.xsl