深度解析Asp.Net2.0中的Callback机制

深度解析Asp.Net2.0中的Callback机制

看到不少朋友最近在写使用callback的文章，也有点手痒，也来涂鸦一下，挖掘挖掘callback的潜力。callback的一般使用方法还算简单，直接参照msdn的帮助和范例就足够了。但是想要真正用好、用精，或者想开发一些基于callback机制的WEB组件，那么，就要先深入了解callback的实现机制了。在本文中，Teddy将和您一起解析callback的整个调用、反馈机制，相信对于帮助您更好的使用callback，将能有一定的益处。

Callback vs Atlas

首先，谈谈Atlas。很多朋友可能会觉得奇怪，已经有了Callback，为什么又要出Atlas呢？关于这个问题，Atlas的作者怎么解释，我倒没有去调查。只不过从我个人对callback和atlas的使用感受来讲，觉得，callback作为一个接口和postback非常类似的实现，肯定是为了让用户类似使用postback来使用它。但是，它的这个类似postback的机制，应该说使用上还不是特别方便，也不易扩展，当然这是相比于其他的AJAX框架实现来说的。因此，微软方面借鉴了许多的已有的AJAX实现，如Prototype，Backbase以及AJAX.NET，并结合ASP.NET2.0的部分特有功能，发明了这样一个博采众长的AJAX框架。基于Atlas来开发AJAX应用有多好，很难量化的来说，但至少不比其他的这些AJAX框架来的差是肯定的，加上微软这个后台，以及像live.com这样的重量级站点的应用推广，其影响当然是值得期待的。

不过，这也不是说callback实现没一无是处了，作为程序员，我们需要有正确的态度，在正确的使用情形，使用最正确的技术。没有哪一个框架是万能的，是适合任何使用环境的；就像大家都在争论那个软件开发方法最好，CMMi，RUP，XP，AGILE~~，其实，没有最好，最合适的才是最好的。我们最应该做的，是了解各种方案的原理和优缺点，从而，合理的使用正确的工具来解决实际问题。

Begin from Client Script

我们都知道，凡是AJAX，从底层来讲，无外乎两种实现机制：XMLHTTP以及IFRAME。在AJAX这个词获得广泛关注之前，其实，基于这两种底层实现的功能框架，或者基于这两种技术的无刷新效果实现就已经被广泛的使用了。当然，发展到今天，在使用接口方面，这些底层机制的细节往往被框架给隐藏了，使用接口变得越来越简单，用户只要调用这些简单接口，没有必要知道具体是怎么实现效果的了。

不过，这里我们既然是要解析callback的实现机制，那还是让我们从一个callback调用的客户端脚本调用开始，看看，微软是怎么实现这个callback机制的。

1、ClientScript.GetCallbackEventReference(...)

要激发一个callback，首先，当然需要在客户端本中发出一个调用。一个典型的调用语法如下：

< script  language ="javascript"  type ="text/javascript" >
function any_script_function(arg, context)
{
    <%= ClientScript.GetCallbackEventReference(this, "arg", "ReceiveServerData", "context")%>;    
}
</ script >

ClientScript.GetCallbackEventReference(...)将根据传入的参数返回实际的回调脚本。这个函数有多个重载版本，因此，这些参数的含义，大家可以参考MSDN。以具体的上面这段示例代码中的参数来说：

- this表示执行回调的的服务端控件是当前这个Page，当前的Page必须实现ICallbackEventHandler接口，包括必须实现string GetCallbackResult()和void RaiseCallbackEvent(eventArgument)这两个接口函数，这个参数也可以是指向某个WEB控件的引用，当然，这个空间也必须实现ICallbackEventHandler接口；

- "arg"是将被传给RaiseCallbackEvent的参数eventArgument的值，可以使人以自定义格式的字符串；

- "ReceiveServerData"是当回调成功之后，处理返回内容的客户端脚本函数的名称，这个函数必须存在于执行回调的页面，并且这个函数可以包含两个参数，例如：

< script  type ="text/javascript" >  
    function ReceiveServerData(result, context) 
    { 
         
    } 
</ script >

这两个参数，分别是回调的返回数据result，和原封不动被返回的我们激发回调时的这个context参数，当然，这两个参数都是字符串类型的。

- "context"就不用多解释了，记得这个参数会被原封不动的传给指定的返回数据处理函数就行了。MSDN的官方文档说，context一般可用来传递需要在客户端的返回数据处理函数中用来调用的脚本代码，不过实际上，你传什么都可以，把它看成一种从客户端回调的的激发端，到处理返回数据的接收段之间的参数传递通道就行了。

2、WebForm_DoCallback(...)

Ok，明白了以上代码的含义，下面我们来看看，前面的这条“<%= ClientScript.GetCallbackEventReference(this, "arg", "ReceiveServerData", "context")%>;”在运行时会被解析成什么样子呢？我们只要在页面运行时察看页面源码就可以看到，实际上服务器帮我们生成了下面这段script代码：

< script  language ="javascript"  type ="text/javascript" >
function any_script_function()
{
    WebForm_DoCallback('__Page',arg,ReceiveServerData,context,null,false);    
}
</ script >

这段代码是什么意思呢？很显然的他调用了一个系统与定义的script函数：WebForm_DoCallback。我们要把这个函数找出来看看它具体为我们干了什么。在运行时的页面源码中，我们很容易可以找到这段脚本的出处。我们注意到有一个script，src="/TestCallbackWeb/WebResource.axd?d=HEcYmh-7_szSIu1D_mHSEw2&amp;t=632661779991718750"，这里就定义了WebForm_DoCallback。让我们把它用flashget下载下来，将扩展名改为.js。看看源码吧，没有被混淆的，所以很容易看明白。我这里就只把和callback相关的部分贴出来解释一下，见代码中的注释：

// 用于存放所有未完成的callback对象的数组__pendingCallbacks
var  __pendingCallbacks  =   new  Array();
var  __synchronousCallBackIndex  =   - 1 ;

// 回调主函数WebForm_DoCallback
function  WebForm_DoCallback(eventTarget, eventArgument, eventCallback, context, errorCallback, useAsync)  {

    //构造回调参数，回调参数包括了原来页面上的formpostdata和我们传递的目标控件、eventArgument和部分验证信息
    var postData = __theFormPostData +
                "__CALLBACKID=" + WebForm_EncodeCallback(eventTarget) +
                "&__CALLBACKPARAM=" + WebForm_EncodeCallback(eventArgument);
    if (theForm["__EVENTVALIDATION"]) {
        postData += "&__EVENTVALIDATION=" + WebForm_EncodeCallback(theForm["__EVENTVALIDATION"].value);
    }
   
   //下面实例化XMLHTTP对象，如果浏览器支持XMLHTTP则直接用XMLHTTP执行异步回调
    var xmlRequest,e;
    try {
        xmlRequest = new XMLHttpRequest();
    }
    catch(e) {
        try {
            xmlRequest = new ActiveXObject("Microsoft.XMLHTTP");
        }
        catch(e) {
        }
    }
    var setRequestHeaderMethodExists = true;
    try {
        setRequestHeaderMethodExists = (xmlRequest && xmlRequest.setRequestHeader);
    }
    catch(e) {}
    var callback = new Object();
    callback.eventCallback = eventCallback;
    callback.context = context;
    callback.errorCallback = errorCallback;
    callback.async = useAsync;
    
   //获取对应的回调对象 
    var callbackIndex = WebForm_FillFirstAvailableSlot(__pendingCallbacks, callback);
    if (!useAsync) {
        if (__synchronousCallBackIndex != -1) {
            __pendingCallbacks[__synchronousCallBackIndex] = null;
        }
        __synchronousCallBackIndex = callbackIndex;
    }
    if (setRequestHeaderMethodExists) {
        xmlRequest.onreadystatechange = WebForm_CallbackComplete;
        callback.xmlRequest = xmlRequest;
        xmlRequest.open("POST", theForm.action, true);
        xmlRequest.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
        xmlRequest.send(postData);
        return;
    }
   
   //万一浏览器不支持XMLHTTP的话，我们IFRAME方案代替，在一个隐藏的IFRAME中执行Postback   
    callback.xmlRequest = new Object();
    var callbackFrameID = "__CALLBACKFRAME" + callbackIndex;
    var xmlRequestFrame = document.frames[callbackFrameID];
    if (!xmlRequestFrame) {
        xmlRequestFrame = document.createElement("IFRAME");
        xmlRequestFrame.width = "1";
        xmlRequestFrame.height = "1";
        xmlRequestFrame.frameBorder = "0";
        xmlRequestFrame.id = callbackFrameID;
        xmlRequestFrame.name = callbackFrameID;
        xmlRequestFrame.style.position = "absolute";
        xmlRequestFrame.style.top = "-100px"
        xmlRequestFrame.style.left = "-100px";
        try {
            if (callBackFrameUrl) {
                xmlRequestFrame.src = callBackFrameUrl;
            }
        }
        catch(e) {}
        document.body.appendChild(xmlRequestFrame);
    }
    var interval = window.setInterval(function() {
        xmlRequestFrame = document.frames[callbackFrameID];
        if (xmlRequestFrame && xmlRequestFrame.document) {
            window.clearInterval(interval);
            xmlRequestFrame.document.write("");
            xmlRequestFrame.document.close();
            xmlRequestFrame.document.write('<html><body><form method="post"><input type="hidden" name="__CALLBACKLOADSCRIPT" value="t"></form></body></html>');
            xmlRequestFrame.document.close();
            xmlRequestFrame.document.forms[0].action = theForm.action;
            var count = __theFormPostCollection.length;
            var element;
            for (var i = 0; i < count; i++) {
                element = __theFormPostCollection[i];
                if (element) {
                    var fieldElement = xmlRequestFrame.document.createElement("INPUT");
                    fieldElement.type = "hidden";
                    fieldElement.name = element.name;
                    fieldElement.value = element.value;
                    xmlRequestFrame.document.forms[0].appendChild(fieldElement);
                }
            }
            var callbackIdFieldElement = xmlRequestFrame.document.createElement("INPUT");
            callbackIdFieldElement.type = "hidden";
            callbackIdFieldElement.name = "__CALLBACKID";
            callbackIdFieldElement.value = eventTarget;
            xmlRequestFrame.document.forms[0].appendChild(callbackIdFieldElement);
            var callbackParamFieldElement = xmlRequestFrame.document.createElement("INPUT");
            callbackParamFieldElement.type = "hidden";
            callbackParamFieldElement.name = "__CALLBACKPARAM";
            callbackParamFieldElement.value = eventArgument;
            xmlRequestFrame.document.forms[0].appendChild(callbackParamFieldElement);
            if (theForm["__EVENTVALIDATION"]) {
                var callbackValidationFieldElement = xmlRequestFrame.document.createElement("INPUT");
                callbackValidationFieldElement.type = "hidden";
                callbackValidationFieldElement.name = "__EVENTVALIDATION";
                callbackValidationFieldElement.value = theForm["__EVENTVALIDATION"].value;
                xmlRequestFrame.document.forms[0].appendChild(callbackValidationFieldElement);
            }
            var callbackIndexFieldElement = xmlRequestFrame.document.createElement("INPUT");
            callbackIndexFieldElement.type = "hidden";
            callbackIndexFieldElement.name = "__CALLBACKINDEX";
            callbackIndexFieldElement.value = callbackIndex;
            xmlRequestFrame.document.forms[0].appendChild(callbackIndexFieldElement);
            xmlRequestFrame.document.forms[0].submit();
        }
    }, 10);
}

// 该函数在每次回调结束后会调用来检查当前的回调列表中的回调的执行情况，如果，执行完毕的，则从列表中删除回调对象，并删除临时建立的IFRAME
function  WebForm_CallbackComplete()  {
    for (i = 0; i < __pendingCallbacks.length; i++) {
        callbackObject = __pendingCallbacks[i];
        if (callbackObject && callbackObject.xmlRequest && (callbackObject.xmlRequest.readyState == 4)) {
            WebForm_ExecuteCallback(callbackObject);
            if (!__pendingCallbacks[i].async) {
                __synchronousCallBackIndex = -1;
            }
            __pendingCallbacks[i] = null;
            var callbackFrameID = "__CALLBACKFRAME" + i;
            var xmlRequestFrame = document.getElementById(callbackFrameID);
            if (xmlRequestFrame) {
                xmlRequestFrame.parentNode.removeChild(xmlRequestFrame);
            }
        }
    }
}

// 该函数执行我们在回调激发端指定的处理返回数据的script函数，如我们上面范例代码中的ReceiveServerData函数
function  WebForm_ExecuteCallback(callbackObject)  {
    var response = callbackObject.xmlRequest.responseText;
    if (response.charAt(0) == "s") {
        if ((typeof(callbackObject.eventCallback) != "undefined") && (callbackObject.eventCallback != null)) {
            callbackObject.eventCallback(response.substring(1), callbackObject.context);
        }
    }
    else if (response.charAt(0) == "e") {
        if ((typeof(callbackObject.errorCallback) != "undefined") && (callbackObject.errorCallback != null)) {
            callbackObject.errorCallback(response.substring(1), callbackObject.context);
        }
    }
    else {
        var separatorIndex = response.indexOf("|");
        if (separatorIndex != -1) {
            var validationFieldLength = parseInt(response.substring(0, separatorIndex));
            if (!isNaN(validationFieldLength)) {
                var validationField = response.substring(separatorIndex + 1, separatorIndex + validationFieldLength + 1);
                if (validationField != "") {
                    var validationFieldElement = theForm["__EVENTVALIDATION"];
                    if (!validationFieldElement) {
                        validationFieldElement = document.createElement("INPUT");
                        validationFieldElement.type = "hidden";
                        validationFieldElement.name = "__EVENTVALIDATION";
                        theForm.appendChild(validationFieldElement);
                    }
                    validationFieldElement.value = validationField;
                }
                if ((typeof(callbackObject.eventCallback) != "undefined") && (callbackObject.eventCallback != null)) {
                    callbackObject.eventCallback(response.substring(separatorIndex + validationFieldLength + 1), callbackObject.context);
                }
            }
        }
    }
}

// 获取对应的回调对象 
function  WebForm_FillFirstAvailableSlot(array, element)  {
    var i;
    for (i = 0; i < array.length; i++) {
        if (!array[i]) break;
    }
    array[i] = element;
    return i;
}

// 再下面是一些辅助函数和与callback关系不大的函数，我就不列出来了，有兴趣的朋友可以自己看看
//

从以上代码我们可以很明白的看到，系统判断您的浏览器是否支持XMLHTTP或IFRAME，如果至少支持其中之一，则用相应的方法执行回调，否则当然就是提示错误了。回调的时候，采用post的方式，异步post到当前页面，然后等待回调结束，此时，由我们指定的返回数据处理script函数来处理返回的数据。

看到这里，我还不知道服务端怎么处理这个根据传过来的参数解析、执行，并返回数据的过程。但是，我们已经知道，WebForm_DoCallback(...)将会将当前页面的web控件的信息都post回去，这就意味着，我们在服务端有可能可以访问到这些web控件的value，这还不错，方便了我们处理当前数据。另一方面，eventArgument既然是一个任意格式的字符串参数，我们肯定要在服务段自己解析它的。

Serverside Callback Operation & Render

好了，那么接下来就让我们来看看在服务端，ASP.NET都为我们做了些什么。

首先，我们知道，当前的Page是必须实现ICallbackEventHandler这个接口的，也就是其包含的两个函数：string GetCallbackResult()和void RaiseCallbackEvent(eventArgument)。根据MSDN的文档，我们知道，在一个callback被post到服务端时，Page将会首先将post回来的form data绑定到当前页面的服务端web控件，接着判断本次post是callback还是postback，如果是postpost，那么自然是原来的那个机制；

如果是callback，则将回调用触发本次callback的控件（在本例中，我们在激发这个callback时，第一个参数指定的是this也就是当前的Page，那么这里当前的Page就是这个触发控件）的RaiseCallbackEvent(eventArgument)，当然，eventArgument也将会正确的传过来，在这个函数的实现代码里我们可以对这个参数进行解析处理，并在某个地方，存储我们准备返回的数据，或者待处理的已经被解析出来的参数；

接着，系统将调用string GetCallbackResult()，在这个函数的实现代码中，我们可以直接返回我们在RaiseCallback函数中存储的准备返回的数据，或者根据待处理的已经被解析出来的参数处理这些参数，并返回结果。这个返回的字符串，自然将以脚本的形式被render回客户端。被返回的脚本细节如下(反编译Page.RenderCallback()的源码)， 我们可以看到，返回的结果除了我们需要的结果数据和相应的脚本，没有多余的数据，因此，callback的执行效率应该说还是不错的：

private   void  RenderCallback()
{
      bool flag1 = !string.IsNullOrEmpty(this._requestValueCollection["__CALLBACKLOADSCRIPT"]);
      try
      {
            string text1 = null;
            if (flag1)
            {
                  text1 = this._requestValueCollection["__CALLBACKINDEX"];
                  if (string.IsNullOrEmpty(text1))
                  {
                        throw new HttpException(SR.GetString("Page_CallBackInvalid"));
                  }
                  for (int num1 = 0; num1 < text1.Length; num1++)
                  {
                        if (!char.IsDigit(text1, num1))
                        {
                              throw new HttpException(SR.GetString("Page_CallBackInvalid"));
                        }
                  }
                  this.Response.Write("<script>parent.__pendingCallbacks[");
                  this.Response.Write(text1);
                  this.Response.Write("].xmlRequest.responseText=\"");
            }
            if (this._callbackControl != null)
            {
                  string text2 = this._callbackControl.GetCallbackResult();
                  if (this.EnableEventValidation)
                  {
                        string text3 = this.ClientScript.GetEventValidationFieldValue();
                        this.Response.Write(text3.Length.ToString(CultureInfo.InvariantCulture));
                        this.Response.Write('|');
                        this.Response.Write(text3);
                  }
                  else
                  {
                        this.Response.Write('s');
                  }
                  this.Response.Write(flag1 ? Util.QuoteJScriptString(text2) : text2);
            }
            if (flag1)
            {
                  this.Response.Write("\";parent.__pendingCallbacks[");
                  this.Response.Write(text1);
                  this.Response.Write("].xmlRequest.readyState=4;parent.WebForm_CallbackComplete();</script>");
            }
      }
      catch (Exception exception1)
      {
            this.Response.Clear();
            this.Response.Write('e');
            if (this.Context.IsCustomErrorEnabled)
            {
                  this.Response.Write(SR.GetString("Page_CallBackError"));
                  return;
            }
            this.Response.Write(flag1 ? Util.QuoteJScriptString(HttpUtility.HtmlEncode(exception1.Message)) : HttpUtility.HtmlEncode(exception1.Message));
      }
}

另外，才发现原来System.Web.UI.Utils这个类中有那么多有用的方便的函数如QuateJScriptString()，以前一直自己手写这样功能的函数呢~~真傻呀~~

Conclusion

至此，我们已经基本上清楚明白callback的前台幕后了。如果您对服务段的处理过程的细节还觉得不够，您也可以自行反编译Page对象，看看其实现代码的细节，还是很有意思的。

总体而言，我们发现，callback无论是兼容性（XMLHTTP或IFRAME我想大多数浏览器都支持吧），还是性能（没有返回不需要的数据），还是使用的便利性（因为ASP.NET帮我们绑定了页面上的当前的Web控件的数据，这就意味着我们可以在callback后的服务端，象postback时一样来写代码，也方便我们移植原来的postback的代码到callback方式的代码）都是非常优秀的。我们也完全可以扩展现有的控件，或者写我们自己的控件以支持这样的callback效果，并且，混合使用callback控件和原来的postback方式的控件也是非常可靠和容易的。这对我们升级原来的基于postback为主的代码，是非常有利的，如果用Atlas来做同样的代码升级和与postback方式的控件混合使用，我可以跟您说，会有很多问题。不信你自己可以试试~~