简略的分析一下Anthem无刷新控件的实现原理和流程

Anthem的原理简单来说是post到当前页面.获得需要更新的内容,再更新原来的页面.只有上传文件的fileUpload控件是通过创建iframe实现.

这篇随笔简略的分析了下anthem完成无刷新的基本原理,anthem的代码思路清晰 ,值得去研究下源码.anthem的代码行数还是有点多.需要慢慢看 我还是暂时记录下来,以备以后回顾.

拿最简单的Label和button控件分析,实现的效果是 单击button以后,button将disable,显示"处理中",接着Label显示"今天星期一".

代码:

aspx 代码

<anthem:button id="btnClick" runat="server" enabledduringcallback="False" onclick="btnClick_Click" text="按钮" textduringcallback="处理中"></anthem:button>

<anthem:label id="lblResult" runat="server"></anthem:label>

cs 代码

protected void btnClick_Click(object sender, EventArgs e)

{

System.Threading.Thread.Sleep(5000);

this.lblResult.Text = "今天星期一";

this.lblResult.UpdateAfterCallBack = true;

}

效果如下






图一 图二 图三

处理流程大概:

1.在页面放入Anthem Label,button控件

2.页面第一次加载时 会在页面上加入Anthem.js的函数 在button的onclick事件中加入

javascript:Anthem_FireCallBackEvent(this,event,'btnClick','',true,'','','处理中',false,null,null,null,true,true);

return false;

这个函数的原型是

function Anthem_FireCallBackEvent(

control,

e,

eventTarget,

eventArgument,

causesValidation,//是否触发页面验证

validationGroup,

imageUrlDuringCallBack,//回调时的图片显示

textDuringCallBack,//回调时的文本

enabledDuringCallBack,//是否在回调时禁用控件

preCallBackFunction,//执行回调前调用的函数

postCallBackFunction,//回调完成后调用的函数

callBackCancelledFunction,//取消时调用的函数

includeControlValuesWithCallBack,

updatePageAfterCallBack//回调后是否更新

)
这个函数是在控件Render时通过GetCallbackEventReference方法添加上去的.

public static string GetCallbackEventReference(ICallBackControl control, string argument,

bool causesValidation, string validationGroup, string imageDuringCallback)

{

return string.Format(

"javascript:Anthem_FireCallBackEvent(this,event,'{0}','{1}',{2},'{3}','{4}',

'{5}',{6},{7},{8},{9},true,true);",

((Control)control).UniqueID,//控件ID

argument,//控件参数

causesValidation ? "true" : "false",

validationGroup,

imageDuringCallback,//

control.TextDuringCallBack,

control.EnabledDuringCallBack ? "true" : "false",

(control.PreCallBackFunction == null || control.PreCallBackFunction.Length == 0) ?

"null" : control.PreCallBackFunction,

(control.PostCallBackFunction == null || control.PostCallBackFunction.Length == 0) ?

"null" : control.PostCallBackFunction,

(control.CallBackCancelledFunction == null || control.CallBackCancelledFunction.Length == 0) ?

"null" : control.CallBackCancelledFunction

);

}

Anthem还会将每个Anthem的控件保存下来,从而知道要更新的控件.

3.加载完成后 显示按钮如图一

4.单击按钮后 显示按钮如图二

触发onclick事件 该事件调用Anthem_FireCallBackEvent函数 这个函数进行了一系列的函数调用

首先调用

function Anthem_PreProcessCallBack(

control,

e,

eventTarget,

causesValidation,

validationGroup,

imageUrlDuringCallBack,

textDuringCallBack,

enabledDuringCallBack,

preCallBackFunction,

callBackCancelledFunction,

preProcessOut

)

这个函数做了以下事情

若causesValidation为true 先判断整个页面是否通过验证

若定义了preCallBackFunction 函数就执行该函数

当都通过再往下执行,否则就取消以后的流程

然后用preProcessOut保存触发事件的控件中的初始信息 等待回调完成后 重新赋值给控件将控件中的状态设置成预定样式 如button上显示的文字 设置成textDuringCallBack的文字

接着执行

Anthem_FireEvent(eventTarget,eventArgument,

function(result) { //回调函数

Anthem_PostProcessCallBack(

result,

control,

eventType,

eventTarget,

null,

null,

imageUrlDuringCallBack,

textDuringCallBack,

postCallBackFunction,

preProcessOut

);

},

null,

includeControlValuesWithCallBack,

updatePageAfterCallBack

);

执行函数

function Anthem_FireEvent(eventTarget, eventArgument, clientCallBack, clientCallBackArg,

includeControlValuesWithCallBack, updatePageAfterCallBack)

{

var form = Anthem_GetForm();

Anthem_SetHiddenInputValue(form, "__EVENTTARGET", eventTarget);//设置触发事件的控件

Anthem_SetHiddenInputValue(form, "__EVENTARGUMENT", eventArgument);//设置事件的参数

Anthem_CallBack(null, null, null, null, null, clientCallBack, clientCallBackArg,

includeControlValuesWithCallBack, updatePageAfterCallBack);

form.__EVENTTARGET.value = "";

form.__EVENTARGUMENT.value = "";

}

执行

Anthem_CallBack(null, null, null, null, null, clientCallBack,

clientCallBackArg, includeControlValuesWithCallBack, updatePageAfterCallBack);

先执行Anthem_PreCallBack函数,若未定义或执行不通过则返回.

然后保存页面元素的name和value 作为参数

若页面没包含文件上传控件 则利用参数对当前页面的进行post

若创建XMLHttpRequest错误

就执行Anthem_Error(result); 并执行函数Anthem_PostProcessCallBack处理错误

若post返回结果错误 则执行Anthem_Error

等待Post结果的过程中 发生了...

post到自身页面时 ,我们可以想象重新打开了一个相同的页面,把参数传递过去.

pagehandler根据传递过来的__EVENTTARGET和__EVENTARGUMENT参数 执行btnClick_Click函数

this.lblResult.Text = "今天星期一";

this.lblResult.UpdateAfterCallBack = true;
render 控件的时候根据lblResult的UpdateAfterCallBack属性为true 在label控件的外围加上标记

效果如下:
<!--START:lblResult--><span id="lblResult">今天星期一</span><!--END:lblResult-->

接着执行Anthem_UpdatePage 更新页面

这个函数将递归的为原来页面需要更新的控件赋予httpRequest得到的新值.如将label中的innerHtml赋值成
<!--START:lblResult--><!--END:lblResult-->
中的值.这样就完成了当前页面控件的无刷新更新.其他复杂的控件也是

通过这个原理进行更新的.

执行EvalClientSideScript注册的脚本

执行回调函数Anthem_PostProcessCallBack

回调函数Anthem_PostProcessCallBack主要把页面button控件的状态还原回去.将button的文字由

"更新中..."还原成"确定" disable还原成"enable".

并执行用户自定义的postCallBackFunction

执行Anthem_PostCallBack

整个流程就完成了 anthem还做了很多其他工作

这只是简略的分析了下anthem完成无刷新的基本原理,anthem的代码思路简单,值得去研究下源码.

anthem的代码行数还是有点多.需要慢慢看 我还是暂时记录下来,以备以后忘记后回顾.Created by jecray