ASP.NET AJAX分析与应用

摘要:本文介绍了 AJAX的由来、特性和架构以及相关的服务端和客户端技术,并结合实际项目开发,证明使用 AJAX带来了更好的用户体验和更高的开发效率。

关键词: AJAX;控件;服务端;客户端

中图分类号:TP312 文献标识码:A

1 引言

2005年,在 Web2.0热潮中,Ajax诞生,揭开了无刷新更新页面时代的序幕,并迅速以其更好的用户体验,更少的服务器和带宽负担等传统Web应用无法比拟的优势,成为炙手可热的Web开发技术,基于标准化被广泛支持和应用。

然而,Ajax也有很多不足之处:由于其涉及的技术太多,开发者仍需要大量的学习,对于某些比较复杂的客户端程序来讲,往往需要开发者对JavaScript以及相关技术非常精通;每种浏览器中提供的DOM模型均有轻微的差异,在编写跨浏览器的客户端应用程序时往往非常困难; 由于大部分表示层以及少部分业务逻辑均被移到了客户端用JavaScript实现,使客户端代码量急剧增大,但JavaScript从语言层面上并没有完善的面向对象支持,使客户端代码的质量无法保证。

综上所述,Ajax技术的优势在于提高用户体验,不足之处在于开发困难。而今应用程序的发展趋势是:把用户体验放在第一位,但与此同时,开发效率也不容忽视。为了解决这样的问题,各种Ajax框架如雨后春笋般应运而生。

2 AJAX简介

2.1 Ajax技术

Ajax在用户和服务器之间建立异步操作机制,可将一些基本的操作交给Ajax引擎,需要从服务器获取数据时才通过Ajax引擎直接向服务器请求。图1为传统Web应用模型与Ajax Web应用模型的工作模式比较:

图1传统Web应用模型与Ajax Web应用模型的工作模式比较

2.2 AJAX框架

像所有的优秀技术一样,Ajax已经催生出大量框架,但归结起来不外乎三类:回调框架、UI框架和完整框架:

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

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

完整框架提供包含控件和应用程序服务在内的极为丰富的编程模型,更适宜于同时应用于客户端和服务器端。

AJAX框架属于第三种类别,在实现Ajax功能的同时又极大地简化了开发过程。使用 AJAX,甚至只需拖拽几个控件,就可以使Web 页面具有精彩的AJAX 用户界面效果,同时大量地降低应用服务器层的资源消耗。图2为传统页面与 AJAX页面的工作原理比较:

图2传统页面与 AJAX页面的工作原理比较

AJAX主要的设计目标有两个:第一,对现有的服务器端模型进行扩展,让其可以生成实现富客户端的JavaScript代码;第二,为增加客户端编程模型,让纯粹的客户端编程变得更加简单。

这样, AJAX的特性就可以相应地分为服务器端和客户端两个部分,前者包含 2.0 AJAX Extensions以及 AJAX Control Toolkit(开发者社区协作的产物,其中包含了数十种非常有用的 AJAX服务器端扩展器控件以及多种独立的 AJAX服务器端控件),后者包含Microsoft AJAX Library。 AJAX 的架构如图3所示:

图 AJAX 服务器和客户端架构

AJAX客户端部分是一组JavaScript库。这些库在任何方面都没有绑定到 ――非开发人员也可以在自己的Web页面里使用。客户端库没有提供太多的特性(例如,不包含任何可以直接拖放到Web页面的预先建立的功能)。相反,建立了用于开发 AJAX页面的基础。这个基础扩展了JavaScript,弥补了几个方面的不足,并提供了一些基本架构。

AJAX服务器端部分在一个更高的层次上工作。包括使用那些客户端脚本库的控件和组件。

3 AJAX的应用

3.1 服务器端和客户端使用方法分析

AJAX分为服务器端和客户端两个部分,有些功能既可以完全使用客户端功能实现,又可以完全使用服务器端功能实现。所以,比较异同,权衡利弊,并根据实际开发中的具体情况选择最合适的方法显得至关重要。

3.2 AJAX框架的技术实践

对于开发中遇到的不同情况以及需求,应该区别对待并选择最合适的开发方式,下面是三种主要的场景:

1.继续使用普通的服务器控件,但利用 AJAX组件或者新控件和控件扩展器扩展其功能。

2. 从头创建“纯粹的”Ajax应用程序。

所谓“纯粹的”Ajax应用程序,是指服务器端没有任何表示层逻辑,只用来提供数据,同时所有的表示层逻辑均在客户端JavaScript中完成。极端一点说,这种“纯粹的”Ajax应用程序将只有一个页面,所有的功能(包括用户输入、与服务器通信、界面改变等)均通过客户端JavaScript来实现。

3.在非 2.0服务器端平台上使用 AJAX。

这种情况下的 AJAX服务器端无法实现,只能考虑使用 AJAX的客户端实现方式。

值得注意的是, AJAX的两种实现方式并不是互相对立的,而是相辅相成的。上面所说的“选择某种实现方式”仅仅意味着“偏重使用某种实现方式”。

上述第一种场景最为常见,而且实现最为简单。下面以《湖北省农村能源管理系统》中的实际应用为例,简单介绍CascadingDropDown控件的使用。

CascadingDropDown是AjaxControlToolkit中的组件,用来控制数个普通的DropDownList控件,使其产生无刷新的级联效果,同时大大简化开发流程。完成级联选择项变化的过程通过在 IIS 服务器上的 Web Service 实现。这个 Web Service 可以完全地控制其中级联的业务逻辑。通过它开发人员可以很方便地从 Xml 或者数据库中获得相关数据。以下是相关的主要代码:

＜!--下拉列表控件--＞

＜asp:DropDownList ID=“DropDownList1” runat=“server” SkinID=“ddl1” AutoPostBack=“true” OnSelectedIndexChanged=“DropDownList_SelectedIndexChanged”/＞

•••

＜!--对应的CascadingDropDown控件--＞

＜ajaxToolkit:CascadingDropDown ID=“CascadingDropDown1” runat=“server” TargetControlID=“DropDownList1” LoadingText=“正在加载区域类型” PromptText=“请选择区域类型” ServicePath=“UserManage.asmx” ServiceMethod=“getAreaType” Category=“typename”＞

＜/ajaxToolkit:CascadingDropDown＞

＜ajaxToolkit:CascadingDropDown ID=“CascadingDropDown2” runat=“server” TargetControlID=“DropDownList2” ParentControlID=“DropDownList1” LoadingText=“正在加载市级城市” PromptText=“请选择市级城市” ServicePath=“UserManage.asmx” ServiceMethod=“getCity” Category=“cityname”＞

＜/ajaxToolkit:CascadingDropDown＞

＜ajaxToolkit:CascadingDropDown ID=“CascadingDropDown3” runat=“server” TargetControlID=“DropDownList3” ParentControlID=“DropDownList2” LoadingText=“正在加载县级城市”PromptText=“请选择县级城市” ServicePath=“UserManage.asmx” ServiceMethod=“getCountry” Category=“countryname”＞

＜/ajaxToolkit:CascadingDropDown＞

WebService代码(以三级下拉列表的WebService代码为例):

//获取县级城市

[WebMethod]

public CascadingDropDownNameValue[] getCountry(string knownCategoryValues, string category)

{StringDictionary kv= CascadingDropDown.ParseKnownCategoryValuesString(knownCategoryValues);

•••

if ((kv.ContainsKey(“rolename”) && kv.ContainsKey(“cityname”) && kv[“rolename”] == “6fc98827-de43-4026-b67d-b4d207fb1afd”)|| (kv.ContainsKey(“typename”) && kv.ContainsKey(“cityname”)))

{ DataTable countries = getCountryTable(kv[“cityname”].ToString());

//填充下拉列表

List＜CascadingDropDownNameValue＞ values = new List＜CascadingDropDownNameValue＞();

foreach (DataRow dr in countries.Rows)

{ values.Add(new CascadingDropDownNameValue(dr[“CountryName”].ToString(), dr[“CountryID”].ToString())); }

return values.ToArray();

•••

4 结束语

AJAX最精彩的特性是它并不只是一个JavaScript库或者一个简化回调的.NET组件,而是一个多层的平台,能够创建更具响应性更动态的页面――设置一个完全不同类型的Web应用程序。由以上内容可知,可以在三个不同层次使用 AJAX框架。另外, AJAX还在不断的发展改善中,可以大胆预测, AJAX Control Toolkit将提供大量的服务器端扩展器控件,让开发者极为方便地为现有的应用程序添加Ajax功能;其他服务器端平台上将有对 AJAX服务器端控件/组件的实现。

参考文献

[1]陈黎夫 AJAX程序设计(第I卷): 服务器端 2.0 AJAX Extensions与 AJAX Control Toolkit [M]. 北京: 人民邮电出版社, 2007.

[2]陈黎夫 2.0 Ajax程序设计(第II卷): 客户端Microsoft AJAX Library与异步通信层[M]. 北京: 人民邮电出版社, 2007.

[3][美] Matthew MacDonald, Mario 3.5高级程序设计(第2版) [M]. 北京: 人民邮电出版社, 2008.