XML编程
搜索
分类

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

来源：互联网 时间：2008-09-05 17:12:00　

     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="http://www.knowsky.com/执行" 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

标签：
0
投稿

猜你喜欢

  • Python3基础之list列表实例解析

    2022-04-22 16:07:15

  • python有几个版本

    2021-09-12 00:44:30

  • 解决django同步数据库的时候app models表没有成功创建的问题

    2024-01-15 02:04:09

  • Python 中获取数组的子数组示例详解

    2022-11-04 19:26:26

  • node.js 中国天气预报 简单实现

    2024-05-13 10:05:44

  • Python实现以主程序的形式执行模块

    2022-01-14 01:37:00

  • 如何让python的运行速度得到提升

    2023-04-26 21:48:35

  • Jupyter notebook无法导入第三方模块的解决方式

    2023-05-23 08:28:53

  • PYQT5设置textEdit自动滚屏的方法

    2022-03-03 06:42:35

  • ts封装axios最佳实践示例详解

    2024-04-19 09:59:07

  • Dreamweaver滑动菜单的制作[图]

    2007-11-08 12:43:00

  • python-for x in range的用法(注意要点、细节)

    2022-11-12 22:40:49

  • 使用vue制作探探滑动堆叠组件的实例代码

    2024-04-28 09:25:26

  • Python爬虫实例_利用百度地图API批量获取城市所有的POI点

    2023-01-11 15:30:37

  • Python下载手机小视频的操作方法

    2022-11-16 02:40:55

  • 日式酒店电梯面板设计

    2008-06-08 13:23:00

  • 基于Python中random.sample()的替代方案

    2021-01-16 18:41:07

  • php测试kafka项目示例

    2023-11-19 20:40:04

  • 详解Python调用系统命令的六种方法

    2023-11-20 02:22:36

  • asp 存储过程分页代码第1/2页

    2011-04-03 10:39:00
    • asp之家 网络编程 m.aspxhome.com