分享
 
 
 

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

王朝html/css/js·作者佚名  2008-05-30
窄屏简体版  字體: |||超大  

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

 
 
 
免责声明:本文为网络用户发布,其观点仅代表作者个人观点,与本站无关,本站仅提供信息存储服务。文中陈述内容未经本站证实,其真实性、完整性、及时性本站不作任何保证或承诺,请读者仅作参考,并请自行核实相关内容。
2023年上半年GDP全球前十五强
 百态   2023-10-24
美众议院议长启动对拜登的弹劾调查
 百态   2023-09-13
上海、济南、武汉等多地出现不明坠落物
 探索   2023-09-06
印度或要将国名改为“巴拉特”
 百态   2023-09-06
男子为女友送行,买票不登机被捕
 百态   2023-08-20
手机地震预警功能怎么开?
 干货   2023-08-06
女子4年卖2套房花700多万做美容:不但没变美脸,面部还出现变形
 百态   2023-08-04
住户一楼被水淹 还冲来8头猪
 百态   2023-07-31
女子体内爬出大量瓜子状活虫
 百态   2023-07-25
地球连续35年收到神秘规律性信号,网友:不要回答!
 探索   2023-07-21
全球镓价格本周大涨27%
 探索   2023-07-09
钱都流向了那些不缺钱的人,苦都留给了能吃苦的人
 探索   2023-07-02
倩女手游刀客魅者强控制(强混乱强眩晕强睡眠)和对应控制抗性的关系
 百态   2020-08-20
美国5月9日最新疫情:美国确诊人数突破131万
 百态   2020-05-09
荷兰政府宣布将集体辞职
 干货   2020-04-30
倩女幽魂手游师徒任务情义春秋猜成语答案逍遥观:鹏程万里
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案神机营:射石饮羽
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案昆仑山:拔刀相助
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案天工阁:鬼斧神工
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案丝路古道:单枪匹马
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案镇郊荒野:与虎谋皮
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案镇郊荒野:李代桃僵
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案镇郊荒野:指鹿为马
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案金陵:小鸟依人
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案金陵:千金买邻
 干货   2019-11-12
 
推荐阅读
 
 
 
>>返回首頁<<
 
靜靜地坐在廢墟上,四周的荒凉一望無際,忽然覺得,淒涼也很美
© 2005- 王朝網路 版權所有