学习AJAX (三) (UpdatePanel 客户端)
PageRequestManager类
-getInstance静态方法
获得全局唯一的PageRequestManager实例
-isInAsyncPostBack属性
是否正在处于一个异步更细过程中
-abortPostBack方法
取消当前的异步更新
多次调用不会产生异常
客户端的生命周期
Sys.Application与PageRequestManager共同形成
Sys._Application类
init 事件
load 事件
unload 事件
捷径方法
pageLoad方法
pageUnload方法
PageRequestManager的事件
异步刷新时触发
initializeRequest
beginRequest
pageLoading
pageLoaded
endRequest
进入页面
PRM-pageLoaded事件
App-init
App-load
pageLoad
离开页面
pageUnload 方法
App-unload事件
异步提交过程
发起一个异步提交
PRM-initializeRequest
PRM-beginRequest
服务器端处理
PRM-pageLoading(正常)
PRM-pageLoaded
App-load
pageLoad
PRM-endRequest（异常）
App-init事件
基于浏览器Window.onload 事件
所有脚本已经加载完毕
所有组件还没有开始创建
用于创建各种组件
这里给出一个App-init中实现更新优先级的程序
App-load与unload事件
load事件 参数类型(Sys.ApllicationLoadEventArgs)
components属性:获得这次加载阶段中所有建立对象
unload事件
PRM-initializeRequest事件
reques属性 ：用于获得WebRequest对象
postBackElement:触发异步刷新的Dom元素
常用操作：
读取此请求信息
取消此次异步刷新
//解释下这里有两个按钮，提交这两个按钮都会产生异步的提交，通常是后面一个提交覆盖掉前面一个提交
//这里就在initializeRequest事件中实现一个优先按钮和一个普通按钮异步提交会不会被覆盖掉
<scripttype="text/javascript"language="javascript">
varlastPostBackButtonId=null;
//得到优先级高的按钮
varbtnPrecedenceId="<%=this.btnPrecedence.ClientID%>";
Sys.WebForms.PageRequestManager.getInstance().add_initializeRequest(
function(sender,e)
{
//获得PageRequestManager这个类的实例
varprm=Sys.WebForms.PageRequestManager.getInstance();
//调用get_isInAsyncPostBack判断这个实例是否处于回发当中
if(prm.get_isInAsyncPostBack())
{
//条件：上次更新处与回发当中
//判断上次按钮是否是优先按钮
if(lastPostBackButtonId==btnPrecedenceId)
{
//是的话，取消当前的异步更新
e.set_cancel(true);
//如果这次更新的提交的按钮是优先按钮
if(e.get_postBackElement().id==btnPrecedenceId)
{
showMessage("不可重复发起优先的刷新。");
}
else
{
showMessage("请等待优先的刷新结束。");
}
return;
}
elseif(e.get_postBackElement().id==btnPrecedenceId)
{
showMessage("发起优先的刷新，普通的刷新将被取消。");
}
else
{
showMessage("重新发起普通的刷新，前一次提交将被取消。");
}
}
lastPostBackButtonId=e.get_postBackElement().id;
});
</script>
要点：为每个控件指定明确的ID
使用ContentTemplateContainer属性向UpdatePanel内添加新控件
updatepanel必须要from控件中
InitializeRequest:它的作用主要是取消回发,和优先级,看看它的ventArgs有什么内容InitializeRequestEventArgs
get_postBackElement();可以得到引发回发的元素,例如,Button1引发了回发.我们用e.get_postBackElement()就可以得到这个Button的所有信息.get_request()获取表示当前回发的请求对象.set_cancel(Bool);取消回发.我们就是用它控制回发优先级.另外.一个同等级的回发单击两次.如果第一次回发还没结束.就会被取消,接着实行第二次回发
PRM-beginRequest 事件
参数类型:BeginRequestEventArs
request属性:用于获得WebRequest对象
postBackElement：触发异步刷新的Dom元素
常用操作:
改取请求消息
改变请求方式
这里要实现在外部按钮提交异步刷新显示UpdateProgress
<scriptlanguage="javascript"type="text/javascript">
Sys.WebForms.PageRequestManager.getInstance().add_beginRequest(
function(sender,e)
{
if(e.get_postBackElement().id!="<%=this.Button2.ClientID%>")
{
return;
}
varupdateProgress=$get("<%=this.UpdateProgress1.ClientID%>");
vardynamicLayout=<%=this.UpdateProgress1.DynamicLayout.ToString().ToLower()%>;
if(dynamicLayout)
{
updateProgress.style.display="block";
}
else
{
updateProgress.style.visibility="visible";
}
});
</script>
PRM-pageLoading事件
panelsDeleting属性：获得即将删除的UpdatePanel
panelsUpdating属性：获得即将更新的Updatepanel
即将要更新的Updatepanel样式改变
<scriptlanguage="javascript"type="text/javascript">
//改变样式的函数
functionhighlightPanels(panels,clear)
{
for(vari=0;i<panels.length;i++)
{
varpanel=panels[i];
panel.style.border=clear?"solid0pxwhite":"solid2pxred";
panel.style.backgroundColor=clear?"white":"#d6dde8";
}
}
Sys.WebForms.PageRequestManager.getInstance().add_pageLoading(
function(sender,e)
{
//这里注意获得即将要更新的updatepanel是一个数组
//也就是说会有好几个updatepanel会更新
varpanelsUpdating=Array.clone(e.get_panelsUpdating());
highlightPanels(panelsUpdating);
//延迟的函数进行清空
window.setTimeout(
function(){highlightPanels(panelsUpdating,true);},
2000);
});
</script>
PRM-pageLoaded事件
参数类型:pageLoadedEventArgs
panelsCreated属性：获得新建的UpdatePanel
panelsUpdated属性：获得应经更新的UpdatePanel
将更新的Updatepanel换一个位置
<scriptlanguage="javascript"type="text/javascript">
Sys.WebForms.PageRequestManager.getInstance().add_pageLoaded(
function(sender,e)
{
varupId="<%=this.UpdatePanel1.ClientID%>";
//获得已经更新的Updatepanel是一个数组类型
varrefreshedPanels=e.get_panelsUpdated();
for(vari=0;i<refreshedPanels.length;i++)
{
if(refreshedPanels[i].id==upId)
{
refreshedPanels[i].id=upId+Math.floor(9999*Math.random());
vardiv=document.createElement("div");
div.id=upId;
$get("commentContainer").appendChild(div);
return;
}
}
});
</script>
PRM-endRequest事件
参数类型:EndRequestEventArgs
response属性获得这次请求
原文链接：https://www.f2er.com/ajax/165984.html