DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> XML學習教程 >> XML詳解 >> 靈活調用xsl來解析xml文檔(js異步)
靈活調用xsl來解析xml文檔(js異步)
編輯:XML詳解     
 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="執行" 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>
    <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

XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved