詳解ASP.NET AJAX
我們來看一下使用組件思想重新編寫的這個應用。首先看一下aspx頁面：
Default.aspx:
- DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"＞- ＜htmlxmlns="http://www.w3.org/1999/xhtml"＞
- ＜headrunat="server"＞
- ＜title＞UntitledPagetitle＞
- head＞
- ＜body＞
- ＜formid="form1"runat="server"＞
- ＜asp:ScriptManagerID="ScriptManager1"runat="server"＞
- ＜Scripts＞
- ＜asp:ScriptReferenceAssembly="Microsoft.Web.Preview"Name="PreviewScript.js"/＞
- ＜asp:ScriptReferencePath="~/ajax.js"/＞
- Scripts＞
- ＜Services＞
- ＜asp:ServiceReferencePath="~/SayHelloService.asmx"/＞
- Services＞
- asp:ScriptManager＞
- ＜div＞
- ＜inputid="btnSayHello"type="button"value="SayHello"/＞
- ＜divid="result"＞div＞
- div＞
- form＞24body＞25html＞
這里有兩處變化，一是在ScriptManager控件里增加了對PreviewScript.js的引用。這里要注意，客戶端組件的內容并不包含在ASP.NET AJAX1.0正式版里，而是包換在ASP.NET AJAX Futures CTP部分。所以，要使用這些功能，首先要添加對Microsoft.Web.Preview.dll文件的引用，這個文件在ASP.NET AJAX Futures CTP的安裝目錄里，然后要在頁面中添加對PreviewScript.js文件的引用。
第二個變化是這里的btnSayHello已經(jīng)沒有了onclick屬性，那么如何知道單擊這個按鈕的時候需要執(zhí)行何種代碼呢？答案在js文件里。
ajax.js:
- var btnSayHello;
- var lblResult;
- Sys.Application.add_init(onPageInit);
- function onPageInit()
- { btnSayHello=new Sys.Preview.UI.Button($get("btnSayHello"));
- btnSayHello.initialize();
- lblResult=new Sys.Preview.UI.Label($get("result"));
- lblResult.initialize(); btnSayHello.add_click(btnSayHello_onClick);
- }
- function btnSayHello_onClick(){
- SayHelloService.SayHello(OnSucceeded,OnFailded);
- }function OnSucceeded(resultText){
- lblResult.set_text(resultText);
- }function OnFailded(error){
- lblResult.set_text("調用失敗。錯誤信息："+error.get_message());}
我們看到，應用組件編程思想后，JavaScript發(fā)生了巨大的改變。不著急，我們一步一步解析這個文件。
最頂上是定義了兩個全局變量，這兩個變量將分別存儲對btnSayHello和result的引用。之所以要定義成全局變量，是方便在整個文件中調用兩個控件。
Sys.Application.add_init(onPageInit);的作用是告訴頁面當頁面初始化時執(zhí)行名為onPageInit的函數(shù)。
onPageInit是一個自定義函數(shù)，主要完成客戶端控件的創(chuàng)建、初始化工作。以下面兩行代碼為例：
- btnSayHello=new Sys.Preview.UI.Button($get("btnSayHello"));
- btnSayHello.initialize();
***行我想大多數(shù)人一看就知道是什么意思，因為那個“new”實在太親切了，這正是創(chuàng)建一個Button的實例，并將其賦給btnSayHello變量。其中Sys.Preview.UI.Button是Button的完全限定名，而大多數(shù)控件的構造函數(shù)都需要一個參數(shù)，用來指出這個控件要關聯(lián)到的DOM 元素。而第二行是必須的，在實例化一個控件后，***馬上調用initialize方法，避免一些奇怪的情況發(fā)生。
- btnSayHello.add_click(btnSayHello_onClick);
上面這行代碼是將控件的單擊事件與btnSayHello_onClick這個函數(shù)關聯(lián)起來。這里我要專門說一下ASP.NET AJAX客戶端控件的屬性及事件的設置方法。
ASP.NET AJAX框架規(guī)定，在獲取一個控件的屬性時，應使用“控件名.get_屬性名()”這種方法，而設置時則是“控件名.set_屬性名()”。為一個控件的某個事件添加監(jiān)聽函數(shù)時，應該用“控件名.add_事件名()”，移除時用“控件名.remove_事件名()”。這是ASP.NET AJAX強制執(zhí)行的命名規(guī)范，所有的客戶端控件都遵從這個規(guī)則，以后我們在開發(fā)自己的客戶端組件時，也應該遵從這個規(guī)則。
知道了以上知識，很多代碼就很好理解了。例如“l(fā)blResult.set_text(resultText);”就是將lblResult控件的text屬性設置為resultText。剩下的代碼我就不解釋了，應該沒問題了。
【編輯推薦】
