代码改变世界

微软ASP.NET AJAX框架剖析

2007-09-13 09:42  Jacky_Xu  阅读(1100)  评论(0编辑  收藏  举报
一、简介

大约在2006年年初,AJAX迅速成为Web 2.0开发中的一个热点,也成为开发以用户为中心的Web应用程序事实上的标准。然而,要开发出高质量的AJAX应用程序,首先要求开发者是一名JavaScript高手,并不得不使用一些远不如C#或Java那样完善的开发工具。因此,由于AJAX“先天”的异步性及浏览器之间的差异,开发、调试及维护AJAX应用程序的过程将变得非常艰难并耗费大量时间。为此,许多公司和个人争相开发出自己的AJAX产品。但归结来看,所有AJAX产品不外乎三大类型:回调框架、UI框架和完整框架。

第一,回调框架。这类框架一般由少数的几个客户端及服务器端库文件组成。它只允许开发者从客户端调用服务器端代码片段,并以序列化方式传送输入和输出参数。

第二,UI框架。典型的UI框架一般都是从现有的专业控件库演变而来,它们往往提供给开发者一些高级网格控件、图表控件和树控件,等等。这些控件都会支持异步回发机制并在客户端生成用于自动刷新页面的JavaScript代码。

第三,完整框架。相比于以上两种框架,完整框架则提供包含控件和应用程序服务在内的极为丰富的编程模型,更适宜于同时应用于客户端和服务器端。微软的ASP.NET AJAX框架属于第三种类别。

微软于2005年夏天着手开发自己的代号为“ATLAS”的AJAX方案。由于这个产品的开发过程采用了一种开放方式(与社团结合并完全开放源码),所以在短期内出现多个CTP版本,并于2007年1月份,正式推出并更名为ASP.NET AJAX 1.0(以下我们简称为“MS AJAX”),其官方支持网站为http://ajax.asp.net

二、MS AJAX的目标

构建一套完整的Web用户体验框架—提供一组丰富的内置组件,并允许开发者方便地依照自己的需要加以扩展;因此,对于那些熟悉JavaScript脚本语言的开发者将极大地提高程序的可维护性和可重用性。

与ASP.NET 2.0编程模型有机集成—提供一种端对端的解决方案,使得MS AJAX应用程序能够非常容易地访问服务器端ASP.NET和.NET框架中现有的编程模型。

自由选择开发模型—实际开发中,开发人员可以根据需要选择以服务器端为中心还是以客户端为中心作为应用程序的基本开发模型。

完全跨平台并基于标准—兼容大多数浏览器和平台,它实现的MS AJAX脚本框架能够适用于任何流行的Web服务器。

零客户端安装—运行基于MS AJAX开发的应用程序时,不需要客户端安装任何内容。MS AJAX的“客户端”由一系列从浏览器下载到本地的JavaScript文件组成。

此外,MS AJAX框架还可以应用于PHP及ColdFusion等Web开发环境中。

三、MS AJAX体系结构

从总体上看,整个ASP.NET AJAX框架被划分为如下三个模块:

1、ASP.NET AJAX。这一部分是ASP.NET AJAX框架的核心部分,包括了核心AJAX类型系统,网络协议层,组件模型,扩展器基类,以及与ASP.NET集成的服务器端功能。

2、ASP.NET AJAX CTP。ASP.NET AJAX社区支持的“增值”CTP部分,包括了以前各个Atlas CTP版本包含的,但并不在完全支持的“核心”1.0版本内的额外的高级特性。微软的最终目标是,通过用户进一步的试用与反馈,逐步将其中稳定的部分增加到核心模块中去。

3、ASP.NET AJAX Control Toolkit。包含了基于ASP.NET AJAX 1.0版“核心”版本的大量(还在继续增加)的功能极强的免费AJAX控件。它是一个开源项目,由微软和非微软开发人员共同开发维护,主要支持站点是http://www.CodePlex.com

篇幅所限,在此我们略去对ASP.NET AJAX框架的安装介绍,具体请参考ASP.NET AJAX的官方网站。

服务器端主要技术

ASP.NET AJAX的主要设计目标有两点:(1)扩展现有的ASP.NET服务器端模型,让其能够自动生成支持富客户端的JavaScript代码;(2)为ASP.NET增加客户端编程模型,进一步简化客户端编程。

由此,整个ASP.NET AJAX框架实质上包含了两种截然不同(但不互相排斥)的API:客户端API和服务器端API。你可以通过直接的客户端编程、传统服务器端编程或这两者的任意组合构建AJAX应用。本质上,任何基于AJAX的页面都需要一些客户端JavaScript代码来处理浏览器的文档对象模型(DOM)和任何特定于应用程序的扩展。但是,不必将这类脚本代码编写工作留给ASP.NET程序员。事实上,框架可生成专门设计的脚本代码作为服务器端控件的输出。这种形式的间接页面更新是目前为止将AJAX功能添加到新的和现有的ASP.NET 2.0页面的最简单方法。在ASP.NET AJAX中,页面更新可由服务器控件(UpdatePanel控件)所自动插入的一段客户端代码来管理。

下图1展示了ASP.NET AJAX框架的服务器端架构。

图1:ASP.NET AJAX服务器端架构

ASP.NET AJAX框架中提供了自己的类似于ASP.NET服务器控件的MS AJAX服务器控件;但是,MS AJAX服务器控件却具有能够生成客户端JavaScript脚本的能力。因此,MS AJAX服务器控件进一步简化了产生MS AJAX客户端JavaScript脚本的过程,非常适合于专注于服务器开发的开发人员。MS AJAX包含了完整的服务器控件,如Button、Label、Option、TextBox、CheckBox、HyperLink和Validator等,这些控件与现有的ASP.NET服务器控件非常类似。所有这些控件都会被无缝地集成进Visual Studio开发环境,所以,你可以如同使用ASP.NET服务器控件一般使用它们。

这一部分中,有两个最主要的服务器端控件:ScriptManager和UpdatePanel。在此,我们仅作简要介绍。

ScriptManager控件包括在ASP.NET 2.0 AJAX Extensions中,它管理页面上的所有组件以及页面的局部更新,生成相关的客户端代理脚本以便能够在JavaScript中访问Web服务,所有需要支持ASP.NET AJAX的ASP.NET页面上有且只能有一个ScriptManager控件。在这个ScriptManager控件中,我们可以指定需要的脚本库,或者指定通过JavaScript来调用的Web服务,还可以指定页面错误处理方式等。

UpdatePanel控件代表ASP.NET AJAX以服务器为中心的编程模型的中心。它允许你执行服务器端代码并将已更新标记返回到客户端浏览器。其与传统的回发机制存在的区别在于,传统的回发是整页刷新,而UpdatePanel控件会设法发送一个频带外请求以取得刷新标记,并在响应就绪后更新特定部分的DOM树(即局部刷新)。

因此,UpdatePanel将是用来改造现有ASP.NET 2.0程序的重型武器,其强大之处在于不用编写任何客户端脚本,只要在一个页面上添加几个UpdatePanel控件和一个ScriptManager控件就可以自动实现局部更新。

下表列出了UpdatePanel控件中的常用重要属性:

属性 说明
ChildrenAsTriggers 当UpdateMode属性为Conditional时,UpdatePanel中的子控件的异步回送是否会引发UpdatePanle的更新。
RenderMode 表示UpdatePanel最终呈现的HTML元素。Block(默认)表示<div>,Inline表示<span>。
UpdateMode 表示UpdatePanel的更新模式,有两个选项:Always和Conditional。Always是指不管有没有Trigger其他控件都将更新该UpdatePanel;Conditional表示只有当前UpdatePanel的Trigger或ChildrenAsTriggers属性为true时当前UpdatePanel中控件引发的异步回送或者整页回送或是服务器端调用Update()方法才会引发更新该UpdatePanel。

注意,UpdatePanel的工作依赖于ScriptManager服务端控件和客户端PageRequestManager类(Sys.WebForms.PageRequestManager)。当ScriptManager中允许页面局部更新时,它会以异步的方式回传给服务器,与传统的整页回传方式不同的是只有包含在UpdatePanel中的页面部分会被更新,在从服务端返回HTML之后,PageRequestManager会通过操作DOM对象来替换需要更新的代码片段。

关于ASP.NET AJAX Control Toolkit

ASP.NET AJAX Control Toolkit,其正式支持网站是http://www.CodePlex.com。此外,你也可以在http://ajax.asp.net上下载之。这一部分是微软与开发者社区合作开发的一个功能强大的ASP.NET AJAX扩展工具包,其中包含的是全免费的、开源的ASP.NET服务器端控件和ASP.NET AJAX扩展器控件。完整的下载包中包含如下几部分:

◆数十种提供常用AJAX功能的服务器端组件及源码;

◆演示上述组件的示例Web站点;

◆开发基于ASP.NET AJAX自定义服务器端组件的Visual Studio 2005项目模板;

◆测试上述组件及自定义组件的Web站点。

客户端主要技术

ASP.NET AJAX以客户端为中心的编程模型的重心是支持远程端点(通常为ASP.NET Web服务和Windows通讯基础服务,但也可能是其它内容)调用的能力。直接从客户端浏览器启动时,对远程端点的调用需要JavaScript代理和JavaScript代码片段。注意,我们可以把“客户端数据绑定”视为传统JavaScript运行时和DOM的扩展。在纯粹的客户端编程风格中,首先会连接到远程端点,然后下载数据,并将数据绑定到DOM子树。此时,模板结构和一些状态信息保存在客户端上,只有原始数据从服务器移动到客户端上。

下图2展示了ASP.NET AJAX框架的客户端架构。

图2:ASP.NET AJAX客户端框架

MS AJAX客户端脚本库是由一些JavaScript(.js)文件组成的,并且提供了面向对象的JavaScript特性极大地简化了程序开发。从上图2看出,MS AJAX客户端脚本库包括:

1、浏览器兼容层—为MS AJAX脚本提供了跨浏览器的兼容性。

2、MS AJAX核心服务—包含了一些JavaScript扩展,如类、命名空间、事件处理、继承、数据类型与对象序列化。

3、MS AJAX基础类库—包含StringBuilder、Debugger、Timer、Tracing等新组件。

4、网络层—负责处理与Web服务及应用程序之间的沟通,以及管理异步远程方法调用。

5、UI层—提供一些MS AJAX客户端的能力,包括行为(Behavior)、MS AJAX声明性语法、UI组件及数据绑定。

6、MS AJAX控件层—为客户端开发提供了特定MS AJAX控件,这些控件能具有数据绑定、脚本化、绑定到MS AJAX行为如拖放功能等等,这一层包含如常规类型控件(对应于HTML常用控件)、具有数据绑定能力的ListView控件,以及数据导航控件。

四、使用ASP.NET AJAX框架的三种实现方案

(一)改造现有的ASP.NET 2.0应用程序

这种情况针对我们已经拥有一个具有完整功能的ASP.NET 2.0应用程序的情况,但是,由于系统性能及用户体验等各种原因需要对这种程序进行AJAX“再改造”。理由很简单:一方面,MS AJAX客户端实现方案与现有ASP.NET 2.0服务器编程模式存在显著区别;另一方面,我们也根本不可能再次重写已经相对完备的现有的程序逻辑。此时,选择使用MS AJAX服务器端实现方案对这种程序进行改造是最佳选择—几乎不费一枪一弹就可以把现有应用程序AJAX化。例如,典型的要求局部页面更新的情况,只需要我们使用MS AJAX服务器端控件UpdatePanel把这一部分加以“封装”包围即可为现有应用添加AJAX功能。

【建议】如果你的团队不擅长JavaScript,或者你希望将公开给客户端编程的信息降到最少,则可使用此方案。此外,如果你需要保护应用程序中任何敏感的业务逻辑,也建议使用此方案。

(二)从头创建‘纯’ASP.NET AJAX应用程序

对于一切从头开始创建基于ASP.NET 2.0服务器端平台的情况,则要考虑使用这种方案。即是,所有实现都使用MS AJAX客户端JavaScript编程及xml-script声明式编程来实现。尽管这种开发方案仍存在相当的难度(没有现成的优秀IDE支持,而且调试技术也基本依赖于手工,更要求开发人员具备娴熟的JavaScript编程技巧等),但却能够为系统带来全方位的性能优化。

(三)在非ASP.NET 2.0服务器端平台上开发基于ASP.NET AJAX框架的应用程序

当你需要AJAX应用程序的现代型跨浏览器版本时,可以使用MS AJAX客户端实现方案。不过,没有了MS AJAX服务端实现的支持,我们仍然可以开发出一流的AJAX应用程序。

【注意】此方案下,部分客户端数据绑定建议使用完全用AJAX JavaScript编写的两个客户端控件(分别是用于多记录视图的ListView和用于单记录视图的ItemView)以实现基于模板的数据绑定。这两个控件和客户端数据源以及筛选组件组合在一起。绑定客户端数据后,当然,最后得到的页面包括一厚层的JavaScript和/或XML Script,但没有任何托管代码(脚本管理器控件除外)。调用通过JSON数据流以独立于类型的方式移动输入参数和接收返回值。要触发多种服务端调用并将更改应用于客户端,需要强类型化JavaScript代码。当你需要使用以异步方式触发和控制远程操作的智能客户端时,建议使用此方法。此方法需要JavaScript编码来处理返回值和更新当前DOM中任何受结果影响的部分。

总之,根据以上分析,任何一种MS AJAX实现方案都不是绝对独立的,而是相辅相成。例如,在所有实现方案下,我们都要依赖于MS AJAX服务器端ScriptManager控件来负责向浏览器端发送MS AJAX客户端框架所必需的JavaScript代码等。

五、MS AJAX框架学习参考资料

◆官方站点http://ajax.asp.net上提供了较多的在线参考文档、基础编程部分的在线视频和一组重要的示例程序;

◆http://forums.asp.net,其中汇集中了来自世界各地的从早期的MS AJAX(即ATLAS)到目前最新的MS AJAX框架开发中的不少疑问及解答;

◆《MS AJAX基础教程》(【美】Laurence Moroney著,陈黎夫译,人民邮电出版社,2006年11月)。这本书虽然有相当一部分内容已经过时,但是作为国内第一本MS AJAX框架学习资料,仍具有相当的参考价值。此外,由陈黎夫自主编写的《ASP.NET AJAX程序设计》(第I卷)已经上市,还将陆续出版第Ⅱ、Ⅲ卷。

◆Scott Guthrie,Scott Guthrie 是 Microsoft 开发事业部的总经理。Scott Guthrie的中文博客为http://blog.joycode.com/scottgu/

◆陈黎夫在博客园中的博客文章(http://dflying.cnblogs.com/);

◆“老赵”的博客(http://jeffreyzhao.cnblogs.com/);

◆MSDN上的几篇文章(例如http://msdn.microsoft.com/msdnmag/issues/07/02/CuttingEdge/);

◆MS AJAX框架相应的源码文件*.js及示例文件。

六、总结

在本文中,我们仅粗略地向读者介绍了微软ASP.NET AJAX框架的大致架构及总体功能,没有深入其中,更没有给出现成的案例。在以后的文章中,我会逐渐整理出基于这个框架的实战案例供读者参考。

总的来看,MS AJAX的整体框架现在已经基本成熟,但是在许多方面还需要作进一步的改进。如果您想基于ASP.NET 2.0平台进行Web开发,不学习MS AJAX框架是没有理由的,因为这是大势所趋;因此,宜早下手为妥。