Ajax 简单的XSLT转换

5 篇文章 0 订阅
2 篇文章 0 订阅

        由于AJAX将展现转移到了客户端,因此可以在需要时载入数据、在必要时重新加载解密以及在用户与页面交互时保护相应界面。有许多不同的方式在客户端展现内容:例如采用JavaScript编写HTML——这样可以使用JavaScript模板,或者采用可扩展样式转换语言(Extensible Style Language Transformations,XSLT)。本学习内容中大多数客户端控件都将采用XSLT,因为它往往是最简单、最灵活的客户端展现技术,并且易于扩展。另外还有一种方式,即通过脚本或所有这些技术的组合来构建DOM元素和ASP.NET AJAX客户端控件。
        注意:
                 文档对象模型(Document Object Model ,DOM)是用于与HTML文档交互的JavaScript模型。DOM元素是指浏览器文档中的任意HTML元素,可以通过文档对应的JavaScript对象访问。

        XSLT在转换标准XML消息时所具备的灵活性,使它成为最受AJAX开发者欢迎的技术。XSLT能够在需要时通过通用ASP.NET AJAX JavaScript类Sys.Net.WebRequest来加载,在一些简单的案例中还可以存储在JavaScript变量内。ASP.NET AJAX库中并不包含XSLT的支持,因此必须采用自己的转换方法。下列程序是一个简单的函数——获取DOM元素并转换到XML

XmlTransform = function (xml, xsl, control) {
    if (!window.XSLTProcessor) {//ie 
        var content = xml.transformNode(xsl);
        control.innerHTML = content;
    } else {//MOZZILA 
        var processor = new XSLTProcessor();
        processor.importStylesheet(xsl);
        var content = processor.transformToFragment(xml, document);
        control.appendChild(content);
    }
}

        在大多数情况下,当使用XSLT转换XML时,在加载XML的同时必须加载XSLT,并在两者都已就绪后执行转换,同时缓存XSLT以便再次使用。还可以在用于与界面进行交互时加载XSLT,这样就能偶引入新的数据绑定的AJAX控件。下列程序演示了在客户端页面执行与用户交互相应期间,加载数据和XSLT并执行简单XSLT转换的技术。在页面的生命周期内,在用户请求时,或由客户端定时器函数触发请求时,这样的操作可以重复执行,并提供数据。

<body>
    <form id="form1" runat="server">
     <asp:ScriptManager ID="ScriptManager1" runat="server"/>
    <div id="MainContent">
       <a href="javascript:loadXml();">
        Click to load data;
       </a>
    </div>
    </form>

    <script language="javascript" type="text/javascript">
        function loadXml() {
            var context = $get('MainContent');
            var xmlReq = new Sys.Net.WebRequest();
            xmlReq.set_url('SampleRSS.xml');
            xmlReq.add_completed(xmlCallback);
            xmlReq.set_userContext(context);
            xmlReq.invoke();

            var xsltReq = new Sys.Net.WebRequest();
            xsltReq.set_url('SampleRSS.xslt');
            xsltReq.add_completed(xsltCallback);
            xsltReq.set_userContext(context);
            xsltReq.invoke();
        }

        function xmlCallback(executor,context,args1,args2,args3) {
            var control = executor.get_webRequest().get_userContext();
            var xml = executor.get_xml();
            control.xml = xml;
            if (control.xslt != null)
                XmlTransform(control.xml,control.xslt,control);
        }

        xsltCallback = function (executor, context, args1, args2, args3) {
            var control = executor.get_webRequest().get_userContext();
            var xslt = executor.get_xml();
            control.xslt = xslt;
            if (context.xml != null)
                XmlTransform(control.xml,control.xslt,control);
        }

        XmlTransform = function (xml, xsl, control) {
            for (var i = 0; i < control.childNodes.length; i++) {
                control.removeChild(control.childNodes[i]);
            }
            control.innerHTML = '';
            if (!window.XSLTProcessor) {
                var content = xml.transformNode(xsl);
                control.innerHTML = content;
            } else {
                var processor = new XSLTProcessor();
                processor.importStylesheet(xsl);
                var content = processor.transformToFragment(xml, document);
                control.appendChild(content);
            }
        }
    </script>
</body>




XML文档内容:
<?xml version="1.0" encoding="utf-8"?>
<rss version="2.0">
  <channel>
    <title>Developing Service-Oriented AJAX Applications on the Microsoft Platform</title>
    <description>
      Delivers hands-on, practical advice about separating the API layer and the UI in a true service-oriented application.
      Provides extensive code examples in C# and JavaScript.
      Features architectural and procedural guidance missing from most other AJAX books for Microsoft developers.
   </description>

     <item>
        <title>Chapter 1: Service-Oriented AJAX Fundamentals</title>
        <description>
           Introduces the service-oriented architecture pattern for AJAX applications. 
           It gives an overview of the pattern and simple examples to get you started.
        </description>
        <pubDate>10/1/2008 12:00:01 AM</pubDate>
     </item>
     <item>
        <title>Chapter 2: he AJAX Application Server: Service Orientation and the Windows Communication Foundation</title>
        <description>
           Introduces WCF as a Web service technology platform and focuses on the service-oriented principles of modern software architecture.
        </description>
        <pubDate>10/2/2008 12:00:01 AM</pubDate>
     </item>
     <item>
        <title>Chapter 3: The AJAX Application Server: Windows Communication Foundation's Web Programming Model</title>
        <description>
           Describes the WCF Web programming model and the REST architecture pattern, as well as syndication support in the WCF framework.
        </description>
        <pubDate>10/3/2008 12:00:01 AM</pubDate>
     </item>
     <item>
        <title>Chapter 4: The AJAX Runtime with the Microsoft AJAX Library</title>
        <description>
           Introduces the Microsoft AJAX Library and focuses on the core runtime controls and deployment.
        </description>
        <pubDate>10/4/2008 12:00:01 AM</pubDate>
     </item>
     <item>
        <title>Chapter 5: The Microsoft AJAX Library</title>
        <description>
           Looks at the Microsoft AJAX Library in-depth and focuses on the core runtime, including core namespaces, base type extensions, and the JavaScript type system.
        </description>
        <pubDate>10/5/2008 12:00:01 AM</pubDate>
     </item>
     <item>
        <title>Chapter 6: AJAX Application Services with Sys.Services</title>
        <description>
           Covers AJAX-enabled application services for authentication, profile, and authorization using the ASP.NET AJAX framework.
        </description>
        <pubDate>10/6/2008 12:00:01 AM</pubDate>
     </item>
     <item>
        <title>Chapter 7: Building an AJAX Class Library with Components</title>
        <description>
           Explains the JavaScript Component model for object-oriented development using the Microsoft AJAX Library.
        </description>
        <pubDate>10/7/2008 12:00:01 AM</pubDate>
     </item>
     <item>
        <title>Chapter 8: Building AJAX Controls</title>
        <description>
           Explains the JavaScript Behavior and Control model for object-oriented development using the Microsoft AJAX Library.
        </description>
        <pubDate>10/8/2008 12:00:01 AM</pubDate>
     </item>
     <item>
        <title>Chapter 9: History and Navigation</title>
        <description>
           Describes the history management capabilities of the client-side AJAX framework utilizing the Microsoft AJAX Library.
        </description>
        <pubDate>10/9/2008 12:00:01 AM</pubDate>
     </item>
     <item>
        <title>Chapter 10: AJAX and XSLT</title>
        <description>
           Explains basic XSLT and how to use XSLT for client-side rendering in service-oriented AJAX applications.
        </description>
        <pubDate>10/10/2008 12:00:01 AM</pubDate>
     </item>
     <item>
        <title>Chapter 11: AJAX and SharePoint</title>
        <description>
           Covers how to deploy Web services to Windows SharePoint Services 3.0 and Microsoft Office SharePoint Server 2007, and how to deploy service-oriented AJAX applications within the Web Part framework.
        </description>
        <pubDate>10/11/2008 12:00:01 AM</pubDate>
     </item>   
  </channel>
</rss>

XSL文档内容:
<xsl:stylesheet
	xmlns:xsl="http://www.w3.org/1999/XSL/Transform"
	version="1.0">
  <xsl:strip-space elements="true"/>
  <xsl:output omit-xml-declaration="yes" method="html" />

  <xsl:template match="/rss/channel">
    <h3>
      <xsl:value-of select="title" disable-output-escaping="yes" />
    </h3>
    <xsl:apply-templates select="item" />
  </xsl:template>

  <xsl:template match="item">
    <div>
       <div style="font-weight:bold;">
          <xsl:value-of select="title" disable-output-escaping="yes" />
       </div>
      <xsl:value-of select="description" disable-output-escaping="yes"  />
    </div>
     <br/>
  </xsl:template>
</xsl:stylesheet>



评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值