以组件的思想重新审视Ajax客户端开发
在进入主题之前我想和大家一起再来看一下本文章系列第一篇中的一个DemoASPNETAJAXTest我现在将其中的客户端代码重新贴在这里
Defaultaspx:
DOCTYPE html PUBLIC //WC//DTD XHTML //EN ＞ ＜html xmlns=＞ ＜head runat=server＞ ＜title＞Untitled Pagetitle＞ head＞ ＜body＞ ＜form id=form runat=server＞ ＜asp:ScriptManager ID=ScriptManager runat=server＞ ＜Scripts＞ ＜asp:ScriptReference Path=~/ajaxjs /＞ Scripts＞ ＜Services＞ ＜asp:ServiceReference Path=~/SayHelloServiceasmx /＞ Services＞ asp:ScriptManager＞ ＜div＞ ＜input id=btnSayHello type=button value=SayHello onclick=btnSayHello_onClick() /＞ ＜div id=result＞div＞ div＞ form＞body＞html＞
ajaxjs:
//单击btnSayHello时调用的JS函数
functionbtnSayHello_onClick()
{
SayHelloServiceSayHello(OnSucceededOnFailded);
}
)thisstylewidth=; align=top twffan=done>
image onmousewheel=javascript:return big(this) alt= src=http://imgeducitycn/img_///gif onload=javascript:if(thiswidth>)thisstylewidth=; align=top twffan=done>//成功时的回调函数
image onmousewheel=javascript:return big(this) alt= src=http://imgeducitycn/img_///gif onload=javascript:if(thiswidth>)thisstylewidth=; align=top twffan=done>functionOnSucceeded(reusltText)
{
$get(result)innerHTML=reusltText;
}
image onmousewheel=javascript:return big(this) alt= src=http://imgeducitycn/img_///gif onload=javascript:if(thiswidth>)thisstylewidth=; align=top twffan=done>
image onmousewheel=javascript:return big(this) alt= src=http://imgeducitycn/img_///gif onload=javascript:if(thiswidth>)thisstylewidth=; align=top twffan=done>//失败时的回掉函数
image onmousewheel=javascript:return big(this) alt= src=http://imgeducitycn/img_///gif onload=javascript:if(thiswidth>)thisstylewidth=; align=top twffan=done>functionOnFailded(error)
{
$get(result)innerHTML=调用失败错误信息+errorget_message();
}
这是一种我们很熟悉的JavaScript编程模式以DOM操作为基础在这种编程模式下所有页面元素被看成一个树状的DOM元素集合不论是取得数据还是改变页面元素的属性都要使用相应的DOM操作例如我们要取得某个文本框中的值则首先使用documentgetElementById（在ASPNET AJAX框架里可以缩写为$get）方法取得这个文本框的DOM引用然后获取其value属性的值
这种编程模式很容易给我们造成困惑例如文本框复选框提交按钮普通按钮的DOM表示都是input元素另外还要使用如innerHTML这样不是很直观的名字设置div或span的值其实对于开发人员尤其是长期从事服务器端开发的人员来说我们更希望将文本框看做TextBox将复选框看做CheckBox将按钮看做Button将div或span看做Label而且我们更希望使用labeltext这样的语句设置div中的文本而不是使用innerHTML
幸运的事ASPNET AJAX的开发人员显然考虑到了这一点现在ASPNET AJAX框架允许我们使用类似服务器端那种组件式的编程模式来进行客户端编程
下面我们来看一下使用组件思想重新编写的这个应用首先看一下aspx页面
Defaultaspx:
DOCTYPE html PUBLIC //WC//DTD XHTML //EN ＞ ＜html xmlns=＞ ＜head runat=server＞ ＜title＞Untitled Pagetitle＞ head＞ ＜body＞ ＜form id=form runat=server＞ ＜asp:ScriptManager ID=ScriptManager runat=server＞ ＜Scripts＞ ＜asp:ScriptReference Assembly=MicrosoftWebPreview Name=PreviewScriptjs /＞ ＜asp:ScriptReference Path=~/ajaxjs /＞ Scripts＞ ＜Services＞ ＜asp:ServiceReference Path=~/SayHelloServiceasmx /＞ Services＞ asp:ScriptManager＞ ＜div＞ ＜input id=btnSayHello type=button value=SayHello /＞ ＜div id=result＞div＞ div＞ form＞body＞html＞
这里有两处变化一是在ScriptManager控件里增加了对PreviewScriptjs的引用这里要注意客户端组件的内容并不包含在ASPNET AJAX正式版里而是包换在ASPNET AJAX Futures CTP部分所以要使用这些功能首先要添加对MicrosoftWebPreviewdll文件的引用
