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() {
(本文来源于图老师网站,更多请访问http://m.tulaoshi.com/webkaifa/) 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