客戶端調用服務器端方法——ASP.NET AJAX(Atlas)、Anthem.NET和Ajax.NET Professional實現之小小比較

前幾天曾經發過一篇《ASP.NET AJAX(Atlas)和Anthem.NET——管中窺豹般小小比較》，Jeffrey Zhao說用ASP.NET AJAX中的UpdatePanel彷佛不大好。我想了想確實如此，有些高射炮打蚊子的感受。還有朋友但願我也能在比較中關照一下Ajax.NET Professional——一樣是個ASP.NET平臺上很是優秀的Ajax框架。

種種要求下，造成此文。本文將比較在ASP.NET AJAX(Atlas)、Anthem.NET和Ajax.NET Professional這三個知名ASP.NET上Ajax框架中實現客戶端調用服務器端方法的實現。客戶端調用服務器端方法是每個Ajax框架都必須考慮的問題，很是具備表明性。在程序編寫過程當中，我也將拋棄掉某些框架中提供的「智能的」服務器端控件（例如ASP.NET AJAX的UpdatePanel），而徹底用手工JavaScript和C#實現，力求創造出較爲「公平」的比較環境。

因爲本文側重於「比較」，而不是「介紹」，因此對於基礎知識都一筆帶過。有須要詳細瞭解程序實現，或是但願重現實驗結果的朋友，能夠下載本文附帶的代碼。

 

程序要實現的功能

程序功能很簡單，卻也足夠典型：

1. 用戶點擊頁面上的某個<input>按鈕
2. 瀏覽器執行該按鈕的客戶端JavaScript事件處理函數
3. 該JavaScript事件處理函數調用某服務器端方法
4. 服務器端方法執行並返回當前時間
5. 客戶端JavaScript回調函數執行，將服務器端返回的時間顯示在頁面中一個<span>中

 

程序運行界面

因爲這三個程序的界面、行爲以及實現功能都徹底一致，因此這裏僅以ASP.NET AJAX(Atlas)版本的爲例。下面是程序初始化以後的界面：

點擊按鈕，上面介紹的5個步驟將依次執行，最終獲得以下圖所示的結果，顯示出服務器端時間：

 

ASP.NET AJAX(Atlas)版本的實現代碼

首先是頁面的HTML部分，注意ASP.NET AJAX(Atlas)獨有的ScriptManager控件：

<asp:ScriptManager ID="ScriptManager1" runat="server" />

<div>

    <input type="button" value="Get Server Time" id="btnGetServerTime" onclick="return btnGetServerTime_onclick()" />

    <span id="result" />

</div>

而後是客戶端JavaScript部分，注意用PageMethods.GetServerTime()這樣的形式調用服務器端方法：

function btnGetServerTime_onclick() {

    PageMethods.GetServerTime(cb_getServerTime);

}

function cb_getServerTime(result) {

    document.getElementById("result").innerHTML = result;

}

服務器端代碼以下，注意方法必須爲靜態，且添加[System.Web.Services.WebMethod]和[Microsoft.Web.Script.Services.ScriptMethod]兩個屬性：

[System.Web.Services.WebMethod]

[Microsoft.Web.Script.Services.ScriptMethod]

public static string GetServerTime()

{

    return DateTime.Now.ToString();

}

OK！

 

Anthem.NET版本的實現代碼

首先是頁面的HTML部分，沒什麼過多須要注意的：

<div>

    <input type="button" value="Get Server Time" id="btnGetServerTime" onclick="return btnGetServerTime_onclick()" />

    <span id="result" />

</div>

客戶端JavaScript部分，注意用Anthem_InvokePageMethod輔助函數調用服務器端方法：

function btnGetServerTime_onclick() {

    Anthem_InvokePageMethod("GetServerTime", [], cb_getServerTime);

}

function cb_getServerTime(result) {

    document.getElementById("result").innerHTML = result.value;

}

最後是服務器端代碼，注意Page_Load中要註冊一下（與ASP.NET AJAX中的ScriptManager有殊途同歸之妙）。還有方法應用了[Anthem.Method]屬性：

[Anthem.Method]

public string GetServerTime()

{

    return DateTime.Now.ToString();

}

protected void Page_Load(object sender, EventArgs e)

{

    Anthem.Manager.Register(this);

}

OK！

 

Ajax.NET Professional版本的實現代碼

頁面的HTML部分和Anthem.NET版本的徹底一致：

<div>

    <input type="button" value="Get Server Time" id="btnGetServerTime" onclick="return btnGetServerTime_onclick()" />

    <span id="result" />

</div>

客戶端JavaScript部分倒於與ASP.NET AJAX得有幾分神似，注意「ASP.ajaxpro_aspx」這個東西爲本ASP.NET頁面編譯後的類名：

function btnGetServerTime_onclick() {

    ASP.ajaxpro_aspx.GetServerTime(cb_getServerTime);

}

function cb_getServerTime(result) {

    document.getElementById("result").innerHTML = result.value;

}

服務器端代碼相似Anthem.NET版本的實現方式，一樣須要在Page_Load中註冊，且須要爲方法應用一個屬性——不過這裏是[AjaxPro.AjaxMethod]：

[AjaxPro.AjaxMethod]

public string GetServerTime()

{

    return DateTime.Now.ToString();

}

protected void Page_Load(object sender, EventArgs e)

{

    AjaxPro.Utility.RegisterTypeForAjax(this.GetType());

}

OK！

 

實現方式比較

用圖表說話吧，我也一樣再也不評論了：

 

源代碼下載

這個是我進行本次實驗所用到的程序源代碼：3ASPNETAJAXFrameworksTest.zip

 

出處：http://www.cnblogs.com/dflying/archive/2006/11/27/573860.html