AJAX(Progress)学习

原创 2007年10月13日 21:13:00
一.通过客户端脚本取消异步更新
1.创建一个Web页面并切换到设计视图。
2.在工具箱中双击ScriptManager、UpdatePanel、UpdateProgress控件添加到页面中。添加后页面如下:
3.在UpdatePanel控件中添加一个Label控件并设置它的Text属性值为“Panel Rendered”。
4.添加一个Button控件并设置它的Text属性值为“refresh”。
5.在UpdateProgress控件中添加文本text Processing…,并添加一个HtmlButton控件并设置它的Text属性为cancle。
6.双击refresh控件添加Click事件。
7.在Buttond的Click事件处理中添加如下代码,人为的创建一个3秒钟的延迟并显示当前服务器的时间。.添加如下脚本,获取一个当前PageRequestManager类的实例,并创建一个函数调用abortPostBack方法来停止异步更新。.设置HtmlButton的click特性为CancelAsyncPostBack。
protected void Button1_Click(object sender, EventArgs e)
{
    System.Threading.Thread.Sleep(
3000);

    Label1.Text 
= DateTime.Now.ToString();
}
8
<script language="javascript" type="text/javascript">
<!-- 
var prm = Sys.WebForms.PageRequestManager.getInstance();

function CancelAsyncPostBack() {

    
if (prm.get_isInAsyncPostBack()) {

      prm.abortPostBack();

    }

}

// -->
</script>
9
10.添加如下的样式块到<head>元素之间。.保存并按Ctrl + F5运行。
<style type="text/css">

#UpdatePanel1 
{

  width
:200px; height:100px;

  border
: 1px solid gray;

}


#UpdateProgress1 
{

  width
:200px; background-color: #FFC080;

  bottom
: 0%; left: 0px; position: absolute;

}


</style>
11
12.单击refresh按钮,经过短暂的延时之后显示进度信息,完成异步更新之后UpdatePanel中的信息显示为当前的服务器时间。
13.单击refresh按钮并立即单击Cancle按钮结束异步更新,注意到UpdatePanel中的时间信息并没有更新。
二.通过客户端脚本显示或者隐藏进度信息
在下列情况下,UpdateProgress控件将不会自动显示:
    由UpdateProgress控件关联的UpdatePanel之外的控件引发的异步更新。
    UpdateProgress控件没有关联任何UpdatePanel,不在UpdatePanel中的控件引发的异步更新(例如用代码实现的更新)。
下面的例子将展示一个不在UpdateProgress所关联的UpdatePanel中的控件所引发的异步更新时,如何显示UpdateProgress控件。
1.在我们前面所创建的页面中,切换到设计视图。
2.选中UpdateProgress控件,在属性窗口中,设置AssociatedUpdatePanelID属性为UpdatePanel1。
3.在UpdatePanel和UpdateProgress控件之外添加一个Button控件。
4.设置Button的Text属性值为Trigger,并设置ID属性为Panel1Trigger。
5.选择UpdatePanel控件,在属性窗口中Triggers属性行单击ellipsis (…)。
6.创建一个异步更新触发器,并设置控件ID为Panel1Trigger。
7.双击Trigger按钮添加Click事件。
8.在Buttond的Click事件处理中添加如下代码,人为的创建一个3秒钟的延迟并显示当前服务器的时间,并附加上一条信息表示是由触发器引发的异步更新。.在代码窗口,在已有的<Script>脚本块中添加如下代码:
protected void Panel1Trigger_Click(object sender, EventArgs e)
{
    System.Threading.Thread.Sleep(
3000);

    Label1.Text 
= DateTime.Now.ToString() + " - trigger";
}
9


.保存并按Ctrl + F5运行。
<script language="javascript" type="text/javascript">

<!-- 

var prm = Sys.WebForms.PageRequestManager.getInstance();

function CancelAsyncPostBack() {

    
if (prm.get_isInAsyncPostBack()) {

      prm.abortPostBack();

    }


}


prm.add_initializeRequest(InitializeRequest);

prm.add_endRequest(EndRequest);

var postBackElement;

function InitializeRequest(sender, args) {

    
if (prm.get_isInAsyncPostBack()) {

        args.set_cancel(
true);
    }


    postBackElement 
= args.get_postBackElement();

    
if (postBackElement.id = 'Panel1Trigger') {

        $get('UpdateProgress1').style.display 
= 'block';                

    }


}


function EndRequest(sender, args) {

    
if (postBackElement.id = 'Panel1Trigger') {

        $get('UpdateProgress1').style.display 
= 'none';

    }


}


// -->

</script>
10
11.单击Trigger按钮,如下所示:
 

Ajax-进度事件

进度事件定义了客户端服务器之间通信相关的事件,用以表示从接收响应数据到通信完成过程的不同阶段的进度情况。 有6个进度事件: loadstart:接收到响应数据的第一个字节时触发 progress:接...
  • rsylqc
  • rsylqc
  • 2016年10月02日 11:21
  • 2000

Ajax控件UpdateProgress的使用心得

             最近做网站用到了UpProgress控件,所以把遇到的问题和自己的看法写下来,供以后参考,也希望给大家代码帮助。UpProgress是和UpdatePanel一起使用的。实现...
  • shengyongwang
  • shengyongwang
  • 2009年11月30日 20:09
  • 4391

ajax 实现加载进度条

ajax beforeSend:先说说这个 beforeSend, 在请求发送前执行 比如 可以判断用户有没有登录 ,如果没有登录就停止请求 并提示。 $.ajax({ url ...
  • qq_18792311
  • qq_18792311
  • 2016年12月23日 15:03
  • 617

几种常用Android Progress效果

  • 2016年05月19日 17:12
  • 1.23MB
  • 下载

Jquery progressbar通过Ajax请求获取后台进度演示

1.简介 本文主要演示Jquery progressbar的进度条功能。js通过ajax请求向后台实时获取当前的进度值。后台将进度值存储在cookie中,每次请求后,将进度条的值增2个。以此演示进度条...
  • NUPTboyZHB
  • NUPTboyZHB
  • 2013年09月13日 17:20
  • 10109

AJAX 利用 XHR2 Progress Event 實作下載進度列

AJAX 也有 Progress Bar 在 Web 開發環境下,我們常會利用 AJAX 技術提昇網頁反應速度與使用者體驗。這樣的作法在桌面環境的網路情況,通常不會有太大的問題,但是到了網路品質...
  • z69183787
  • z69183787
  • 2015年07月31日 20:30
  • 1215

bootstrap3的 progress 进度条

1、被修改的两个标签词: 2.3版                                                                                   ...
  • ling811
  • ling811
  • 2013年11月25日 11:05
  • 2801

ajax:改善用户体验之进度条

在最近的一个项目中,有一个上传功能:上传一个cvs文件,然后解析此文件并写入数据库由于经常需要传很大的文件,客户完成此功能往往需要40分钟,在这个过程中,页面也没有任何提示,用户体验非常不好?为何不用...
  • lcllcl987
  • lcllcl987
  • 2006年04月22日 16:10
  • 2719

Ajax-进度事件

进度事件定义了客户端服务器之间通信相关的事件,用以表示从接收响应数据到通信完成过程的不同阶段的进度情况。 有6个进度事件: loadstart:接收到响应数据的第一个字节时触发 progress:接...
  • rsylqc
  • rsylqc
  • 2016年10月02日 11:21
  • 2000

JQuery中$.ajax()方法参数详解

转载来自:http://blog.sina.com.cn/s/blog_4f925fc30100la36.html url: 要求为String类型的参数,(默认为当前页地址)发送请求...
  • daiqinge
  • daiqinge
  • 2016年11月22日 11:17
  • 424
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:AJAX(Progress)学习
举报原因:
原因补充:

(最多只允许输入30个字)