非典型ajax實踐

最後更新：2018-12-07 來源：互聯網

上載者：User

創建阿里雲帳戶，並獲得超過 40 款產品的免費試用版；而企業帳戶則可以享有總值 $1200 的免費試用版。立即註冊！

前言
ajax可以說是今天互連網最流行的詞語，然而其根本就是用戶端非同步調用伺服器端，最終返回需要的東西。目前我們都會用asp.netajax、ajax.net或者是純xmlhttp式的非同步呼叫，其實asp.net2.0內部也提供了一種非同步呼叫的方式，那就是Callback機制（相對於postback來講）。

ICallbackEventHandler介面
Callback機制用ICallbackEventHandler介面來實現，該介面定義了兩個方法。

//返回伺服器執行的結果給用戶端
        public string GetCallbackResult()
        {
            //throw new Exception("The method or operation is not implemented.");return rValue;
        }

  //callback被觸發時的處理方法
        public void RaiseCallbackEvent(string eventArgument)
        {
            //throw new Exception("The method or operation is not implemented.");
        }

ClientScript對象
然後就是結合ClientScript對象的一系列方法實現用戶端callback伺服器端的引用，用戶端指令碼註冊等等了，即是說用用戶端方法觸發了伺服器端的事件。在做了一系列事件後就把結果返回給用戶端。

//獲得用戶端要觸發伺服器的函數的引用，這樣一來該用戶端函數就可以非同步觸發伺服器端的事件並做響應處理了，所以要想用Callback，這個是必須要用的方法之一
GetCallbackEventReference(Control control, string argument, string clientCallback, string context);
//將一段指令碼（js）註冊（添加）到用戶端去，這個也是經常用到的方法
RegisterClientScriptBlock(Type type, string key, string script);

過程執行個體分析
要用到的東西大概這麼多，而整個非同步呼叫的過程是：
1，在aspx中放一個js函數（用來觸發伺服器端事件），使之有處理伺服器傳回資料的能力，這一步也可以在aspx.cs產生指令碼塊並註冊到aspx中去；
2，在aspx.cs裡面先用GetCallbackEventReference產生一個步驟1中函數的引用，這一步使之有了觸發伺服器事件的能力，並指定了參數和上下文；
3，再在aspx.cs裡面放一個觸發步驟1中函數的函數（用來傳遞一些參數和上下文進來）；
4，在aspx中適當的位置觸發步驟3中的函數並傳響應參數和上下文進來。

這就是整個過程，幹說很累，搞個例子：
aspx檔案如下：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
    <title>Client PostBack Demo</title>    <link href="Site.css" rel="stylesheet" type="text/css" />
</head>
<body>
    <form id="form1" runat="server">
    <div>Enter Category ID: <input type="text" id="txtCategoryID" name="txtCategoryID" />    <input type="button" value="Submit" onclick="GetProductsByCategoryID()"  /><br />
        <br />
        <br />
    <div id="MyDiv" runat="server">
    </div>
    <asp:GridView ID="myGridView" CssClass="GridViewBackGround" runat="server" />
    </div>
    </form>
</body>
</html>
<script language ="javascript" type="text/javascript">
function GetProductsByCategoryID()
{
    // txtCategoryID is the textbox
    categoryID = document.getElementById("txtCategoryID").value;

    CallServer(categoryID,'');
}
function ReceiveServerData(rValue)
{
     document.getElementById("myDiv").innerHTML = rValue;
}
</script>

其中的按鈕的click事件觸發了GetProductsByCategoryID()函數，GetProductsByCategoryID()又調用了“CallServer（categoryID,''）”（步驟3中的函數），這時傳入了兩個參數一個進來。下面CallServer就會調用要觸發伺服器事件的用戶端函數（名稱是ReceiveServerData）的引用[GetCallbackEventReference（this, "arg", "ReceiveServerData", "context"）返回]。

aspx.cs檔案如下：

protected void Page_Load(object sender, EventArgs e)
    {
        string sbReference = ClientScript.GetCallbackEventReference(this, "arg", "ReceiveServerData", "context");
        string cbScript = String.Empty;

        // check if the script is already registered or not
        if (!ClientScript.IsClientScriptBlockRegistered("CallServer"))
        {
            cbScript = @" function CallServer(arg,context) { " + sbReference + "}";
            ClientScript.RegisterClientScriptBlock(this.GetType(), "CallServer", cbScript, true);
        }
    }

這時就會觸發一個事件，回應程式法是RaiseCallbackEvent（string eventArgument）,這個string型參數就是剛才GetCallbackEventReference（this, "arg", "ReceiveServerData", "context"）中指定的arg。
當上面的方法執行完畢後就會觸發另一個事件，回應程式法是string GetCallbackResult()，它會返回一個string給觸發觸發伺服器事件的用戶端函數ReceiveServerData（），最終將要更新的用戶端做響應改變。

結論
非同步呼叫伺服器端技術被人封裝了很多了，微軟也不例外，除了asp.netajax外，在asp.net中也內建了Callback機制來實現非同步呼叫，其實其底層還是xmlhttp的封裝，不過asp.netajax的功能和控制項要強大的多，相比callback就“輕量”的多了。

本文章原先以中文撰寫並發佈於 aliyun.com，亦設英文版本，僅作資訊用途。本網站不對文章的準確性，完整性或可靠性或其任何翻譯作出任何明示或暗示的陳述或保證。如對該文章有任何疑慮或投訴，請傳送電郵至 info-contact@alibabacloud.com 並提供相關疑慮或投訴的詳細說明。職員會於 5 個工作天內與您聯絡，一經驗證之後，即會刪除該侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

Sales Support

1 on 1 presale consultation

Chat Contact Sales
After-Sales Support

24/7 Technical Support 6 Free Tickets per Quarter Faster Response

Open a Ticket
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

Learn More