Community Server系列之四：Ajax在CS2.0中的應用1

       Ajax技術在時下很熱門，當然在CS2.0中也不例外的運用到了此技術，CS2中沒有使用任何第三方Ajax控制項，這就給我們提供一個研究Ajax機理的好地方，現介紹一下在CS2中Ajax的一些簡單應用，並分析應用的原理。

       我想要研究此技術最好的辦法就是把代碼分離出來放在自己的工程中，重現這些功能，在重現這些功能的時候一定會遇到這樣或那樣的問題，這恰好是我們應該著重研究的地方，所以讓我們先來分離代碼吧。

       就拿CS中的一個Ajax小應用來說，當具有系統管理員許可權的使用者進入後，可以看到頁面的標題和一些新聞內容是可以無重新整理改變的，讓我們先從此處下手吧。找到相應的控制項頁面，我們會發現，這些控制項引用的一些檔案，我現在先把它們列出來，下面的是我在分析TitleBar代碼後分離出來的：

 

        參看，有這麼幾個檔案是很關鍵的：

        AjaxManager.cs主要提供Ajax應用所需要的功能枚舉等等，此檔案包含三個類見圖2，其中AjaxManager裡麵包含了幾個靜態方法，這個是關鍵。

        Global.js這個檔案主要包含兩個重要的指令碼函數來處理用戶端的Ajax提交，另外還有一些很有用的js函數。

當然，這兩個檔案只是基礎，要使用ajax必需要相應的頁面的配合和對js編程的熟悉，現在讓我們來瞭解一下Ajax的機理，Ajax說白了就是使用JS指令碼和XMLHttp技術在後台提交資料到伺服器，經過伺服器相應方法的處理後把資料返回給用戶端，由於資料在後台提交的，使用者只看到資料的變化卻看不到頁面的重新整理，功能酷酷的，實現起來也不難，這就開始了：

首先讓我們看看在CS2中的Ajax的實現原理

 

按照的步驟來分析，並且以一個執行個體來瞭解它，這個樣本很簡單：在用戶端提供兩個使用者輸入的數字，提交到伺服器進行計算，並把計算結果返回給用戶端。

（在看下面的解說之前最好先下載本篇文章的樣本程式結合著看。）

       首先，我們建立一個aspx的頁面，這裡命名為Default.aspx，第一步要在提交請求的時候讓頁面註冊Ajax_CallBack指令碼（此指令碼即是用戶端和伺服器通訊的關鍵），這裡我們的後台代碼很簡單你可以在Page_Load方法裡寫成這樣if(!this.IsPostBack) AjaxManager.Register(this,"Counter");可以看出調用了AjaxManager的靜態方法，此方法的作用就是分析傳進去的參數(這裡的參數為this也就是頁面的引用)，產生用戶端Ajax_CallBack指令碼。在產生指令碼之前自動去找在此頁面有多少個帶了AjaxMethod屬性的方法，一個伺服器方法對應一個用戶端Ajax_CallBack方法，產生了用戶端指令碼後我們只需要在用戶端寫上少量的調用方法即可與伺服器通訊了。在這裡註冊到用戶端的指令碼為：

"CounterEnter": function(first, second, clientCallBack) {
    return Ajax_CallBack('ASP.Default_aspx', null, 'CounterEnter', [first,second], clientCallBack, false, false, false, false,'/cs_ajax/Default.aspx?Ajax_CallBack=true');
}

有了這個指令碼，用戶端的工作並沒有做完，因為還沒有讓用戶端控制項響應操作，這裡就需要我們手動寫一些作業碼了，不過一般不會太複雜，比如這裡我們只需要在頁面加多這樣的js語句快：

function CounterEnter(){
$('txtResult').value= iteSettings.CounterEnter($('txtFirst').value,$('txtSecond').value,null).value; }

     在用戶端的按鈕onclick事件上調用此函數即可，這段用戶端的代碼也許有人會迷糊，其中“$”函數是Glogal.js檔案中的，等同於document.getElementById，iteSettings.CounterEnter則是調用前面註冊到用戶端的指令碼，那麼這段代碼的意思是傳遞第一個和第二個輸入筐的值到伺服器器上的CounterEnter方法，並把返回的結果付給txtResult的文字框，前面已經提到過伺服器上的CounterEnter方法此方法帶有AjaxMethod屬性，程式會自動找到此方法並執行的。至於怎麼找到的，在後面詳解，伺服器方法在執行完此方法後返回結果，返回的值通過AjaxManager的相關方法以js指令碼的形式Response給用戶端（形式如：{value:’aaa’,error:null}），在得到這個返回對象後我們只需要調用其中的Value屬性即可擷取返回的值。
    那麼伺服器怎樣去分辨是Get請求還是PostBack或者AjaxPostBack呢，只有分清楚了這個才能在該執行的時候執行相應的方法，好的，其實在這裡通過Get方法和AjaxPost的資料asp.net都不認為是回傳給伺服器，這樣一來我們在PageLoad代碼裡的寫的if(!this.IsPostBack)對兩者請求都視為等效，那麼通過背景AjaxPost請求的頁面同樣會去執行AjaxManager.Register方法，那麼我們看看此方法除了註冊用戶端JS代碼還做了寫什麼呢。我們注意到在最後一段代碼裡有一句：control.PreRender += new EventHandler(OnPreRender);這句話就是在當即將Response給用戶端頁面的時候執行OnPreRender方法先，此方法的作用即是判斷用戶端提交的參數裡是否有Ajax參數，如果有就判斷此次Request為Ajax提交，需要執行伺服器的相關方法，此處通過一系列的跳轉和反射找到了應該調用的方法並執行，返回執行完後的結果給用戶端並中止頁面繼續Responst，這樣就完成了一個完整的Ajax調用，當然在AjaxManager裡面有很多細節在這裡沒有詳細寫出來，如有異議或疑問希望多多指正和探討，也希望此篇文章能起到拋磚引玉的作用，給大家一個小小的參考。
   下一篇將介紹Ajax在CS2中的進階應用程式，本文樣本下載。