AJAX(Progress)学习

最新推荐文章于 2024-08-22 09:38:01 发布
最新推荐文章于 2024-08-22 09:38:01 发布
阅读量2.9k 收藏 1
点赞数
分类专栏： asp.net 文章标签： ajax button function javascript triggers 脚本
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/fenghu89/article/details/1823546
版权
一．通过客户端脚本取消异步更新
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 的 progress事件,progress 相关事件 异步 ajax
weixin_34449682的博客
08-06 567
loadstart — Fires when the fi rst byte of the response has been received.progress — Fires repeatedly as a response is being received.error — Fires when there was an error attempting the request.abort —...
Ajax-进度事件
rsylqc的专栏
10-02 5094
进度事件定义了客户端服务器之间通信相关的事件，用以表示从接收响应数据到通信完成过程的不同阶段的进度情况。 有6个进度事件： loadstart：接收到响应数据的第一个字节时触发 progress：接收到响应期间持续不断触发 error：在请求发生错误时触发 abort：因为调用abort()方法而终止连接时触发 load：接收到完整响应数据时触发 loadend：通信完成或触发error，abor
Ajax Progress Bar
09-26
Ajax Progress Bar 进度条 简单
jQuery AJAX Progress
gitblog_00033的博客
03-17 468
jQuery AJAX Progress jquery-ajax-progressSimple patch that adds a 'progress' callback to jquery Ajax calls项目地址:https://gitcode.com/gh_mirrors/jq/jquery-ajax-progress 是一个轻量级的jQuery插件，可以让你轻松地在你的网页中显示AJ...
ajax文件进度,ajax 上传文件，监听进度（progress）
weixin_42313980的博客
08-05 419
点击上传async function main() {const l = console.loglet fileEle = document.querySelector('#a')fileEle.onchange = e => {let files = fileEle.filesif(files.length === 0) return false;let data = new FormDa...
基于PHP的AJAX upload progress meter for (AJAX上传文件PHP源码).zip
07-17
【标题】中的“基于PHP的AJAX upload progress meter”指的是一个使用PHP和AJAX技术实现的文件上传进度条功能。...如果你要实现这样的功能，你可以参考这个源码，学习如何结合PHP和AJAX来创建一个高效的文件上传系统。
Ajax常用学习案例
09-27
本文将通过分析提供的"Ajax常用学习案例"来深入探讨Ajax的关键知识点。 一、Ajax基础概念 1. XMLHttpRequest对象：Ajax的核心是XMLHttpRequest对象，它允许JavaScript在后台与服务器交换数据并更新部分网页内容。...
Ajax学习文档
03-10
7. **Progress事件和Timeout**：XHR对象还提供了progress事件来处理数据传输的进度，以及timeout属性和ontimeout事件来设置超时和处理超时情况。 8. **XMLHttpRequest Level 2**：在XMLHttpRequest Level 2中，增加...
升级到Angular Progress HTTP的新一代Ajax技术
最后，压缩包文件名称“angular-progress-http-master”暗示了这个项目可能是一个关于Angular进度条监控HTTP请求的示例或模板，可能是提供给开发者用作学习、复用或项目中的进度监控组件。 综上所述，该文件包的...
AJAX.NET学习资料
06-04
AJAX（Asynchronous JavaScript and XML）是一种在无需重新加载整个网页的情况下，能够更新...通过学习和掌握以上AJAX.NET的关键知识点，开发者可以构建出高效、交互性强的Web应用程序，提供给用户更加流畅的浏览体验。
AJAX-Progressbar:启用 AJAX 的循环进度条
06-23
AJAX-进度条 启用 AJAX 的循环进度条。 可以在以下位置找到此进度条的原始版本： 请注意以下事项： 允许您继续进度条。 调用 incrProgress(a) 函数平滑增加原始项目中缺少的进度状态。 不允许回滚。 需要 jquery 1.11。 如何使用： 它是一个两阶段的过程，首先计算完成的过程的百分比（可以通过启动一个 AJAX 方法来完成，该方法持续侦听服务器，甚至 setinterval 也可以！）。 其次，将计算出的百分比传递给 incrProgress(a) 函数。 回滚是不可能的。 演示 截屏
jquery.ajax.progress:允许将事件处理程序绑定到 XHR2 上传下载进度事件
06-18
jquery.ajax.progress 允许将事件处理程序绑定到 XHR2 上传/下载进度事件。 基于 nebirhos 脚本 ( ) 这些事件是： downloading和uploading downloading事件的示例代码： var jqXHR = $ . get ( 'www.somedomain.com/largefile.avi' , function ( response ) { /* do anything on finish */ } ) ; $ ( jqXHR ) . on ( 'downloading' , function ( proxyEvent , event ) { if ( event . lengthComputable ) { // You can do anything here console . log ( "Downl
jQuery progressbar通过Ajax请求实现后台进度实时功能
01-19
本文主要演示Jquery progressbar的进度条功能。js通过ajax请求向后台实时获取当前的进度值。后台将进度值存储在cookie中，每次请求后，将进度条的值增2个。以此演示进度条的实时显示功能。 前台index.jsp jsp代码如下 <%@ page language=java import=java.util.* pageEncoding=UTF-8%> <% String path = request.getContextPath(); String basePath = request.getScheme()+://+request.getServerNa
jQuery Ajax Progress 教程
最新发布
gitblog_00745的博客
08-22 854
jQuery Ajax Progress 教程 jquery-ajax-progressSimple patch that adds a 'progress' callback to jquery Ajax calls项目地址:https://gitcode.com/gh_mirrors/jq/jquery-ajax-progress 项目介绍 jQuery Ajax Progress 是一个开...
AJAX笔记之三:UpdateProgress
02-02 933
AJAX笔记之三:UpdateProgress UpdateProgress 的使用方法非常简单, 但是却非常有用. 以下先演示它的用法:. 向页面添加一个updatePanel, 并在里面放一个label 和一个button . .添加一个UpdateProgress 控件, 并把它的AssociatedUpdatePanelID 属性设置为以上updatePanel的名称. .切换到"
Ajax progress 进度条事件
qq_44917015的博客
04-19 492
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Do
jquery ajax php 进度,jQuery progressbar通过Ajax请求实现后台进度实时功能
weixin_35925298的博客
03-21 437
本文主要演示Jquery progressbar的进度条功能。js通过ajax请求向后台实时获取当前的进度值。后台将进度值存储在cookie中，每次请求后，将进度条的值增2个。以此演示进度条的实时显示功能。前台index.jspjsp代码如下String path = request.getContextPath();String basePath = request.getScheme()+":...
js 利用 ajax 加载 js ,显示加载进度 ,严格按照js的顺序先后加载到页面
wang521gang的专栏
04-28 651
js 利用 ajax 加载 js ,显示加载进度 ,严格按照js的顺序先后加载到页面 , 做手机端开发时，发现一个问题，有些浏览器，在网速比较慢的情况下，js文件没有加载完，后续的调用已经开始调用了，导致出错。后来使用此法，保证了任何时候都完全是按照js的先后顺序执行的。源码：/** * js 利用 ajax 加载 js ,显示加载进度 ,严格按照js的顺序先后加载到页面 * 原理：利用 aja...
$.ajax()方法使用 Ajax全局事件 进度条插件NProgress
procul的博客
06-26 569
$.ajax{{ }} 方法 基于jquery 参数： url:' ' 指定请求地址 datatype:' ' 指定请求是ajax请求还是 jsonp请求 jsonp:' ' 指定callback参数名称 jsonCallback:'' 指定函数名称 success:function (response){} ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值