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

【 tulaoshi.com - Web开发 】

　　     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="宋体"/FONTinput type="button" value="执行" onclick="GetXml()"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.');
　　            }
　　        }
　　  
　　    }

　　    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);
　　    }

　　  /script

　　/body
　　/html

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

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

　　以下是引用片段：
　　？xml version='1.0'？

　　breakfast-menu
　　  food
　　    nameBelgian Waffles/name
　　    price$5.95/price
　　    descriptionTwo of our famous Belgian Waffles 
　　      with plenty of real maple syrup./description
　　    calories650/calories
　　  /food
　　  food
　　    nameStrawberry Belgian Waffles/name
　　    price$7.95/price
　　    descriptionLight Belgian waffles covered with 
　　     strawberries and whipped cream./description
　　    calories900/calories
　　  /food
　　  food
　　    nameBerry-Berry Belgian Waffles/name
　　    price$8.95/price
　　    descriptionLight Belgian waffles covered 
　　      with an assortment of fresh berries 
　　      and whipped cream./description
　　    calories900/calories
　　  /food
　　  food
　　    nameFrench Toast/name
　　    price$4.50/price
　　    descriptionThick slices made from our homemade 
　　     sourdough bread./description
　　    calories600/calories
　　  /food
　　  food
　　    nameHomestyle Breakfast/name
　　    price$6.95/price
　　    descriptionTwo eggs, bacon or sausage, toast, 
　　      and our ever-popular hash browns./description
　　    calories950/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