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();
}
//这样就可以实现为静态刷新页面，带加载过程中有旋转图片,用户体验会很好效果如下

 
当然你也可以使用jquery或者ajax写动态加载table的方式来实现

赞 (0)

相关推荐

  • Ajax添加数据与删除篇实现代码

    如果你真的把前几篇掌握了．实现ajax删除功能会易如反常．我所要教你的是．灵活利用JavaScript和Dom来实现一个酷酷的删除效果．其实你学习到这里．已经能够明白,在ajax技术中那些被请求的 服务端网页,在非ajax应用中并无太大区别．无非也是接受前端发过来的请求．在后台执行一些操作而已!学习完这篇教程以后．你会明白想要实现够炫够酷的的ajax效果．你必须要熟练掌握JavaScript Dom 这些技术精通． 刚刚我喝多了,上面的这段话是我在两天前就写好的．我本来想直接睡觉的．但我想试试．

  • ajax实现页面加载和内容删除

    ajax实现页面加载和内容删除

    ajax最大的好处就在于加载和删除的时候不会跳转页面,现在的网页大多都会选择用ajax来写,相比嵌入PHP代码来说减少了代码量,同时加载页面也会比较快,下面是用ajax以数据库fruit表为例写的加载页面和水果的删除,刚开始用ajax可能写起来还是会比较手生,就当是练习好了. 这是fruit表: 下面就是首页的代码了,先建一个php文件main.php <body> <h2>内容加载</h2> <table cellpadding="0" ce

  • jQuery Ajax页面局部加载方法汇总

    在jquery中实现ajax加载的方法有很多种,不像以前的js的ajax只有那一种,下面我们介绍jquery ajax实现局部加载方法总结,有需要了解的朋友可参考. 例 $.ajax({ url: "hotelQuery!queryHotelByCity.action", type: "post", dataType: "html", data: "queryHotel.city="+cityobj.value+"&

  • 滑轮滚动到页面底部ajax加载数据配合jsonp实现探讨

    滚动下拉到页面底部加载数据是很多瀑布流网站的做法,那来看看配合jsonp是如何实现的吧,小菜总结记录之用,高手勿喷. 当然本例子采用的是jquery库,后期会做成原生js. 本例的数据调用的是锋利的jquery一书提供的一段json. 首先要先判断页面怎么样才是滚动到底部,也就是scrollTop+window的height是否大于document的height,jquery如下代码: $(window).scrollTop()+$(window).height()>=$(document).h

  • 使用ajax加载的页面中包含的javascript的解决方法

    1.[使用iframe] 在需要加载的页面中添加一个iframe,如下 复制代码 代码如下: <iframe style="display:none" onload="javascript: close_ticket_onload()"></iframe> onload中添加你所要调用的函数,如果加载的页面在弹出层中,此函数需要放在弹出此层的父页面! 2.[使用eval] 如果使用innerHTML填充XMLHttp取得的数据.如:xxx.i

  • Ajax方式删除表格一行数据示例代码

    复制代码 代码如下: /** * Ajax方式删除信息--后台数据 * * action * id 主键值 * obj 删除行的<a> */ function removeRow(action,id,obj){ if(confirm('确定要删除吗?')){ Ext.Ajax.request({ url : encodeURI("alone.portal?.f=${namespace}&.pmn=view&action="+action), params :

  • PHP+ajax 无刷新删除数据

    首先本例基于留言本整理版修改. 我们使用了jquery.js来实现ajax和dom删除 首先加入 复制代码 代码如下: <script type="text/javascript" src="lib/jquery.js"></script> 给table加个 复制代码 代码如下: id="t<!--{$item.id}-->" 写个js: 复制代码 代码如下: <script> function d

  • jQuery之ajax删除详解

    首先看html界面的代码: <a href="javascript:;"  onclick="delete_order('<?php echo $item[order_id]; ?>')"><img src="images/admin/delete-icon.png" border="0" /></a>这个一个图片链接,表示删除.它并不跳转到某个界面,而是点击时出发click事件

  • 基于jquery的finkyUI插件与Ajax实现页面数据加载功能

    基于jquery的finkyUI插件与Ajax实现页面数据加载功能

    复制代码 代码如下: <script type="text/javascript" src="js/jquery.js"></script> <script type="text/javascript" src="js/json.js"></script> <script type="text/javascript" src="js/jquer

  • jquery ajax实现批量删除具体思路及代码

    jquery ajax实现批量删除具体思路及代码

    js页面jquery代码: 复制代码 代码如下: // JavaScript Document $(document).ready(function() { // 全选 $("#allChk").click(function() { $("input[name='subChk']").prop("checked",this.checked); }); // 单选 var subChk = $("input[name='subChk']&

随机推荐