您的位置：首页 > 编程语言 > ASP

ASP.NET AJAX客户端编程之旅（四）——以组件的思想开发Ajax应用：客户端组件初探

2009-09-16 15:34 537 查看

ASP.NET AJAX客户端编程之旅（四）——以组件的思想开发Ajax应用：客户端组件初探

摘要

本文将首先介绍ASP.NET AJAX的组件编程技术，然后剖析一段ASP.NET AJAX客户端组件的源代码，借此来搞清楚客户端组件到底是怎么回事。最后介绍各种组件及其关系。而在下一篇中，将介绍行为组件、绑定技术和xml-script。

以组件的思想重新审视Ajax客户端开发

在进入主题之前，我想和大家一起再来看一下本文章系列第一篇中的一个Demo：ASPNETAJAXTest。我现在将其中的客户端代码重新贴在这里。

Default.aspx:

1
3<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
4<html xmlns="http://www.w3.org/1999/xhtml">
5<head runat="server">
6 <title>Untitled Page</title>
7</head>
8<body>
9 <form id="form1" runat="server">
<asp:ScriptManager ID="ScriptManager1" runat="server">
<Services>
<asp:ServiceReference Path="~/SayHelloService.asmx" />
</Services>
</asp:ScriptManager>
<div>
<input id="btnSayHello" type="button" value="SayHello" onclick="btnSayHello_onClick()" />
<div id="result"></div>
</div>
</form>
</body>
</html>

ajax.js:

1//单击btnSayHello时调用的JS函数
2function btnSayHello_onClick()
3
7//成功时的回调函数
8function OnSucceeded(reusltText)
9
//失败时的回掉函数
function OnFailded(error)

3<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
4<html xmlns="http://www.w3.org/1999/xhtml">
5<head runat="server">
6 <title>Untitled Page</title>
7</head>
8<body>
9 <form id="form1" runat="server">
<asp:ScriptManager ID="ScriptManager1" runat="server">
<Services>
<asp:ServiceReference Path="~/SayHelloService.asmx" />
</Services>
</asp:ScriptManager>
<div>
<input id="btnSayHello" type="button" value="SayHello" />
<div id="result"></div>
</div>
</form>
</body>
</html>

这里有两处变化，一是在ScriptManager控件里增加了对PreviewScript.js的引用。这里要注意，客户端组件的内容并不包含在 ASP.NET AJAX1.0正式版里，而是包换在ASP.NET AJAX Futures CTP部分。所以，要使用这些功能，首先要添加对Microsoft.Web.Preview.dll文件的引用，这个文件在ASP.NET AJAX Futures CTP的安装目录里，然后要在页面中添加对PreviewScript.js文件的引用。

第二个变化是这里的btnSayHello已经没有了onclick属性，那么如何知道单击这个按钮的时候需要执行何种代码呢？答案在js文件里。

ajax.js:

1var btnSayHello;
2var lblResult;
3
4Sys.Application.add_init(onPageInit);
5
6function onPageInit()
7
function btnSayHello_onClick()

function OnSucceeded(resultText)

function OnFailded(error)

11
17
27
33
43
49
56
63
70

Sys.Preview.UI.Button.registerClass('Sys.Preview.UI.Button', Sys.UI.Control);

乍看之下，代码很复杂，但是如果熟悉JavaScript语言的话，读懂这段代码应该是不成问题的。这里只拣关键的地方解析。

最开始是定义构造函数，其具体内容不必细究，只需看到，它需要一个参数associatedElement，即与这个控件想关联的DOM元素。接着定义了两个属性：argument和command，可以看到，它们是符合“get_ set_”规范的。再接下来，是初始化函数和析构函数，再后面，则定义了onclick事件，这个事件也是遵循“add_ remove”语法规范的。接着通过prototype将各个函数与Button组件关联起来，而最后的“Sys.Preview.UI.Button.registerClass('Sys.Preview.UI.Button', Sys.UI.Control);”则是将Button注册成为一个组件，其完全先定名叫做“'Sys.Preview.UI.Button”，而其继承自“Sys.UI.Control”类。

通过以上简单分析，我们可以发现，所谓的客户端组件，实际上就是封装了DOM元素，用一种我们熟悉的语法封装了晦涩的DOM操作。例如，TextBox的 text属性，其实是封装了type属性为“text”的input元素的value属性。而Button的click事件，其实也就是封装了type属性为button的input元素的onclick事件。所以，从某种层面上来说，客户端组件其实就是一种“语法糖”，它将晦涩怪异的DOM操作封装成我们熟悉的控件式语法。

探寻客户端组件的家谱

不知各位朋友有没有发现，在上文中，我有时用“组件”这个词，而有时又用“控件”这个词。那么，“客户端组件”和“客户端控件”一样吗？严格来说，不一样，客户端控件应该算作客户端组件的一部分。其实，ASP.NET AJAX为我们提供的客户端组件非常丰富，它不仅包含了文本框、复选框、按钮等这些看得见的东西（一般这些看得见的东西可以叫做控件），还有一部分看不见的组件。如有一种组件叫“行为组件”，它不是一个具体的控件，而是为控件添加一种行为。例如，一般div是没有onclick事件的，但是如果我们给一个 Label控件添加一个“ClickBehavior”组件，则它就可以拥有单击事件，另外常用的行为组件还有使元素具有透明度的 “OpacityBehavior”等。

还有一种组件，叫做“绑定组件”，它更不是一种具体的控件，而是用来描述多个控件间属性相互绑定的一种关系。另外还有“动画组件”，它可以给元素添加动画效果。

上图展示了一个不完整的ASP.NET AJAX客户端组件家谱。由于这个家族非常庞大，所以这幅图并没有完全把它们表示出来，而只是表示出一个骨架。从图上可以看出，所以组件均继承自Componet类。

总体来说，ASP.NET AJAX客户端组件分为一下几类：

*Control：基本UI组件，包括TextBox、Button等。

*Behavior：行为组件，用于给组件添加行为。

*Action：动作响应组件，响应特定的动作。

*Animation：动画组件，用来给组件添加动画效果。

*Data：数据组件，包括DataView等与数据显示有关的组件。

*Validator：验证组件，用于用户输入数据的验证。

*Drag：拖放组件，用于创建可拖放式的Ajax应用。

*Bind：绑定组件，用于实现绑定技术。

*Counter：客户端计数器。

*Timer：客户端定时器，用于定时触发事件。

这里就不对各种组件做一一介绍，具体请参考微软官方的Roadmap文档：http://www.asp.net/ajax/documentation/live。

结束语

通过本文，朋友们应该对组件思想进行JavaScript编程有了一个了解。并且通过分析，也明白了ASP.NET AJAX客户端组件的本质。当然，严格说，这里仅仅介绍了“控件”的本质，而其他组件则没有介绍，有兴趣的朋友可以读读它的源代码。最后我们从全景的方式看了看客户端组件的家谱。限于篇幅，不可能对每个组件进行详尽介绍，具体可以参考相关文档。在下一篇中，将通过实例介绍行为组件和绑定技术。并介绍一种新的JavaScript编程方式：xml-script。

本文用到的例子可以在这里下载：ASPNETAJAXTest1.rar

主要参考文献

[1] 陈黎夫，ASP.NET AJAX程序设计-第II卷：客户端，人民邮电出版社，2007年10月

[2] ASP. NET AJAX Roadmap Documentation，http://www.asp.net/ajax/documentation/live

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航