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:11
  • 2491

html5 ajax文件上传的进度条实现

html5 ajax文件上传的进度条实现 html5_2.html #parent{width:550px; height:10px; border:2px s...
  • LanSeTianKong12
  • LanSeTianKong12
  • 2016-08-09 09:53:02
  • 2974

AJAX(Progress)学习

一.通过客户端脚本取消异步更新1.创建一个Web页面并切换到设计视图。2.在工具箱中双击ScriptManager、UpdatePanel、UpdateProgress控件添加到页面中。添加后页面如下...
  • fenghu89
  • fenghu89
  • 2007-10-13 21:13:00
  • 1636

Jquery <em>progress</em>bar通过<em>Ajax</em>请求获取后台进度演示

举报的资源分: 3 *类型: *详细原因: 取  消 提  交 Jquery <em>progress</em>bar通过<em>Ajax</em>请求获取后台进度演示 3积分 立即下载 ...
  • 2018年04月13日 00:00

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

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

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

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

<em>Ajax</em>请求过程中显示“进度”的简单实现

<em>Ajax</em>在Web应用中使用得越来越频繁。在进行<em>Ajax</em>调用过程中一般都具有这样的做法:...<em>Ajax</em>在请求数据时显示等待进度条 Jquery <em>progress</em>bar通过<em>Ajax</em>请求获取后台进度演示...
  • 2018年04月14日 00:00

<em>progress</em> bar

<em>progress</em> bar is designed by myself and it is different 综合评分:0 收藏...<em>Ajax</em> <em>Progress</em> Bar 立即下载 上传者: gislxing 时间: 2013-09-26 综合评分...
  • 2018年04月13日 00:00

AJAX File upload Progress

AJAX File upload ProgressExample of how to use the newest version is available in another post.Updat...
  • nxmxbbd
  • nxmxbbd
  • 2006-03-19 00:17:00
  • 4428

updateprogress 实现层遮罩效果

转自:http://www.cnblogs.com/losingrose/articles/952490.html 遮罩层与基础ajax控件已经封装在一个用户控件,使用方便。使用的页面的代码如下:  ...
  • wang4978
  • wang4978
  • 2009-09-28 11:15:00
  • 2080
收藏助手
不良信息举报
您举报文章:AJAX(Progress)学习
举报原因:
原因补充:

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