OGeek|极客世界-中国程序员成长平台 › 门户 ›编程› AJAX› AJAX编程经验 › 查看内容

Ajax实现静态刷新页面过程带加载旋转图片

2022-2-5 17:00| 发布者: 菜鸟教程小白| 查看: 277| 评论: 0|原作者: [db:作者]|来自: [db:来源]

摘要: 当然你也可以使用jquery或者ajax写动态加载table的方式来实现,方式多种多样，感兴趣的朋友可以了解下，希望本文提供的静态刷新页面对你学习ajax有所帮助 ...

 
<!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 id="Head1" runat="server"> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<link href="/Style/NiuLan.css" rel="stylesheet" type="text/css" /> 
<title></title> 
<script type="text/javascript">//当刷新的时候 原先的页面的展示数据不会隐藏这里面是隐藏函数 
//取得PageRequestManager对象，每一个Asp.net Ajax页面中会右唯一一个这种对象负责处理所有的Async - Postback要求 
var prm = Sys.WebForms.PageRequestManager.getInstance(); //新增事件处理至PageRequestManager的initializeRequest事件，当Async-Postback发生时，此事件会被触发，我们的InitRequest函数便会被运行　　　　 
prm.add_initializeRequest(InitRequest); 
//新增事件处理至PageRequestManager的endRequest事件，当Async-Postback完成时，此事件会被触发，我们的EndRequest函数便会被运行 　　 
prm.add_endRequest(EndRequest); function InitRequest(sender, args) { 
//显示出UpdateProgress1控件 
document.getElementById('detail').style.display = "none"; 
} 
function EndRequest(sender, args) { 
//隐藏UpdateProgress1控件 
document.getElementById('detail').style.display = "block"; 
} 
//用于取消Async-Postback动作 
function CancelClick() { 
//当处于Async-Postback动作时，get_isInAsyncPostBack函数会回传true，此时调用abortPostBack 函数便会取消Async-Postback动作。 
if (prm.get_isInAsyncPostBack()) { 
prm.abortPostBack(); 
} 
} 
</script> 
</head> 
<body > 
<form id="Form1" runat="server"> 
//使用  Ajax Extensitons 中的ScriptManager 
<asp:ScriptManager runat="server"> 
</asp:ScriptManager> 
//使用地方比如 
<asp:UpdatePanel ID="UpdatePanel1" runat="server"> 
<ContentTemplate> 
//放代码 
<div id="detail"><asp:ImageButton ID="ibtnFBSJ" runat="server" ImageUrl="/images/ershoufang/bs/fbsj.gif" 
OnClick="ibtnFBSJ_Click" /> 
</div> 
//当在静态刷新页面的时候会调用UpdateProgress 但是这个后台也是需要代码的看下面 
<asp:UpdateProgress ID="UpdateProgress1" runat="server" AssociatedUpdatePanelID="UpdatePanel1"> 
<ProgressTemplate> 
<div style="text-align: center"> 
<img alt="" src="/images/loading.gif" /> 
</div> 
</ProgressTemplate> 
</asp:UpdateProgress> 
</ContentTemplate> 
</asp:UpdatePanel> 
</form> 
</body> 
</html> 
后台 
protected void ibtnFBSJ_Click(object sender, ImageClickEventArgs e) 
{ 
System.Threading.Thread.Sleep(2000); 
drpSortOrder.SelectedValue = ((int)ErShouFangJiChuZuFang.order.按发布时间排序).ToString(); 
PopulateDetails(); 
} 
//这样就可以实现为静态刷新页面，带加载过程中有旋转图片,用户体验会很好效果如下 