剖析MagicAjax

刚刚得知MagicAjax（http://www.magicajax.net/），他让你体验什么叫Easy AJAX，并支持.Net2.0。你无需对现有的webform方式开发有任何的改变，你只需配配web.config，拉拉控件就行了。本文不说用法，因为他实在太简单了，我在这里对他做一个分析，让大家了解他的工作方式。

从例子入手吧，一个button，一个label，点击button更新lable到当前时间。

设计器上的html：

<div style="width: 300px">
    <ajax:AjaxPanel ID="AjaxPanel1" runat="server">
        <asp:Button ID="Button1" runat="server" OnClick="Button1_Click" Text="Button" />
        <asp:Label ID="Label1" runat="server" Text="Label"></asp:Label></ajax:AjaxPanel>
</div>

输出后的html：

<div>
<input type="hidden" name="__CONTROL_FINGERPRINTS_AjaxPanel1" id="__CONTROL_FINGERPRINTS_AjaxPanel1" value="" />
<input type="hidden" name="AjaxPanel1$RBS_Store" id="AjaxPanel1$RBS_Store" value="" />
<input type="hidden" name="__VIEWSTATE" id="__VIEWSTATE" value="/wEPDwUJNTg1NTY3MzczD2QWAgIDD2QWAgIBDw9kFgIeCEFqYXhDYWxsBQVhc3luY2RkWqu19ZXiwLYiiNPPAP+GKoHYdzs=" />
</div>

<div style="width: 300px">
    <span id='AjaxPanel1$RBS_Holder'><span id="Span1" AjaxCall="async">
        <span id="Button1$ajaxdest" name="__ajaxmark"><input type="submit" name="Button1" value="Button" id="Submit1" /></span>
        <span id="Label1$ajaxdest" name="__ajaxmark"><span id="Span2">Label</span></span></span></span>
</div>

<script type="text/javascript">
<!--
var RBS_Controls =  new Array(document.getElementById("AjaxPanel1$RBS_Holder"));
var RBS_Controls_Store =  new Array(document.forms[0]["AjaxPanel1$RBS_Store"]);
// -->
</script>

MagicAjaxModule是一个IHttpModule拦截请求。主要处理在：
void Application_AcquireRequestState(object sender, EventArgs e)
·如果是普通Page，直接输出页面。
·如果请求是“Get”，直接输出页面。
·如果是ajax请求的话，由_request.Form["__AJAXCALL"]判断是否一个ajax请求，如果是则调用HttpContext.Current.Handler.ProcessRequest(HttpContext.Current)并更新相关状态，包括ViewState，最后Flush()页面。在这个过程当中，输出都是交给AjaxCallHelper完成，而这个help最后产生一个script，那么在客户端在接收到这个script，就直接执行：eval(responseText).比如例子中点击button后，最后产生的script是：

AJAXCbo.ExtendedSetHtmlOfElementScript("<span id=\"Label1\">2005-12-8 18:03:22</span>","Label1$ajaxdest");

AJAXCbo.SetFieldScript("__CONTROL_FINGERPRINTS_AjaxPanel1","C04A0FC;Button1#7DA27781;Label1#F84162CA");

AJAXCbo.SetFieldScript("__VIEWSTATE","/wEPDwUKMTkwNzc1NDY4MQ9kFgICAw9kFgICAQ8PZBYCHghBamF4Q2FsbAUFYXN5bmMWAgIDDw8WAh4EVGV4dAUSMjAwNS0xMi04IDE4OjAzOjIyZGRk+HNmUx11Ztw2Z2CodiIhPxrEm4A=");

'AJAX_LOADING_OK';

由此可以看出，点击button后，返回给客户端，客户端负责解释和执行这个script。
第一行：更新label里面的时间
第二行：更新panel的隐含字段
第三行：更新ViewState
第四行：一个标志，表示请求成功

客户端的js工作流程：
1）首先，他把页面所有的ajaxPanel放在一个array里面：RBS_Controls，而每个panel都对应到另外一个array：RBS_Controls_Store 里面的各个panel的状态。
2）这时候大家注意到页面上这句js：

<script language='javascript'>
    if (typeof(AJAXCbo) == 'undefined')
        alert("Unable to find script library '/AjaxCallObject.js'. Copy the file to the required location, or change the 'scriptPath' setting at magicAjax section of web.config.");
    else
        AJAXCbo.HookAjaxCall(false,false,false);
</script>

AjaxCallObject.prototype.HookAjaxCall = function(bPageIsStored, bUnloadStoredPage, bTracing)会hook几个事件：
window.onload，  window.onbeforeunload，  window.onunload，  document.forms[0].onsubmit（这是是重点）
3）点击panel里面的button发出一个submit，由于document.forms[0].onsubmit被hook了，他在这里引发：AJAXCbo.DoAjaxCall(target.name, "", cbType)并return false,就不会引发页面刷新。
4）在DoAjaxCall里面，一个for循环把form里面的内容序列化成字符串放在变量theData里面
5）调用XmlHttp工作：open->onreadystatechange（设置异步完成引发事件）->setRequestHeader->send
不管异步调用还是同步调用，最后都会引发：OnComplete事件，OnComplete就会调用eval(responseText)来执行服务段返回的script了。

AjaxPanel控件：
控件主要render HTML，配合客户端的js工作。
·构造函数初始化控件的panel里面的XmlHttp请求方式。（同步/异步）
·void AddedControl(Control control, int index)把panel里面的服务端控件加到_addedControls这个集合里面，上面就是把Button1和Lable1加载。
·void OnLoad(EventArgs e)注册这个panel的隐含字段，就是上面的__CONTROL_FINGERPRINTS_AjaxPanel1。
·void OnPreRender(EventArgs e) ：如果不是嵌套的panel加入隐含字段AjaxPanel1$RBS_Store和两个变量（RBS_Controls和RBS_Controls_Store）用处处理客户端AJAX调用。这里必要说明一下，这个隐含字段是用于类似ViewState的用途？
·void Render(HtmlTextWriter writer)把非嵌套的panel输出成<span>，就是上面的<span id='AjaxPanel1$RBS_Holder'> ，如果是嵌套的panel就只有顶层的panel有这个<span>。
·void RenderChildren(HtmlTextWriter writer)把panel里面的子控件输出，非服务端控件输出不变。如果是服务端控件就把这个控件放在一个<span>里面，并且id为：控件名称+$ajaxdest，name为：__ajaxmark。最后如果IsPageNoStoreMode是true则注册一个js，他会在客户端执行（AJAXCbo.SetFieldIfEmptyScript），把控件的状态放到__CONTROL_FINGERPRINTS_AjaxPanel1这个隐含字段。

<script type='text/javascript'>
AJAXCbo.SetFieldIfEmptyScript("__CONTROL_FINGERPRINTS_AjaxPanel1","C04A0FC;Button1#7DA27781;Label1#31926D7E");
</script>

·void OnUnload(EventArgs e)IsPageNoStoreMode为true的话，会更新控件的更新控件的状态。


哈～好像写完了，最后给大家一个小秘诀。看看AjaxCallObject.js，当请求的时候，他会象GMail那样在右上脚出现一个Wait...的等待，很cool，你只要在这里做一个小更改，改CreateWaitElement那部分就能达到另外的效果。我这里把请求数据时，改成windows关机时，整个页面变灰的那种效果，类似的js如下：

<SCRIPT type="text/javascript">
    <!--
    function log_out()
    {
        ht1 = parent.frames.item(0).document.getElementsByTagName("html");
        ht1[0].style.filter = "progid:DXImageTransform.Microsoft.BasicImage(grayscale=1)";
        ht2 = document.getElementsByTagName("html");
        ht2[0].style.filter = "progid:DXImageTransform.Microsoft.BasicImage(grayscale=1)";
        if (confirm('你是否确认注销？'))
        {
            return true;
        }
        else
        {
            ht1[0].style.filter = "";
            ht2[0].style.filter = "";
            return false;
        }
    }
    //-->
</SCRIPT>

OK~希望本文对你有用，最后请大家斧正文中的错误。