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