jQuery实现多个ajax请求等待
通常,jQuery的函数ajax进行Ajax调用。函数ajax只能做一个Ajax调用。当Ajax调用成功时,执行回调函数。可选地,当Ajax调用返回错误时,调用另一个回调函数。但是,该功能不能根据这些请求的结果进行多个Ajax请求和注册回调函数。一种情况是,网页使多个Ajax请求在禁用用户交互时收集页面不同部分的数据。该页面仅在页面获取所有数据之后才能进行用户交互。本文介绍了jQuery提供的一种基于多个Ajax请求来注册回调函数的方法。这种方法是基于Deferred对象的概念。
首先,在后台的两个ASP.NET Web API函数来接受服务器Ajax调用。代码如下:
后台接收ajax请求代码
要进行单个Ajax调用,可以使用jQuery的ajax函数。正面是一个简单的例子:
ajax调用示例
成功和错误的回调函数正在等待单个Ajax调用。jQuery库提供了一种方法来使任何回调函数等待多个Ajax调用。此方法基于称为Deferred的对象。Deferred对象可以根据Deferrred对象是否解决或拒绝来注册回调函数。以下是Deferred的示例。
Deferred示例
注意Deferred对象可以链接。以下是Deferred对象链的示例。
Deferred对象有一个方法叫做promise。它返回一个Promise对象。Promise对象暴露了Deferred方法的一个子集,以防止其状态被更改。这意味着防止Deferred对象被手动解析或拒绝。Promise对象公开以下Deferred方法:then,done,fail,always,pipe,progress,state,和 promise。它不会公开以下Deferred方法:resolve,reject,notify,resolveWith,rejectWith 和 notifyWith。promise对象可以被视为一个Deferred对象,该对象无法手动更改该状态。jQuery 的ajax函数返回一个jqXHR对象。这个jqXHR对象有两个重要的事实。
首先,一个jqXHR对象是XMLHTTPRequest对象的超集。例如,一个jqXHR对象可以通过引用它的readyState属性来查询XMLHTTPRequest的状态。如果其readyState为4,则Ajax请求完成。
其次,一个jqXHR对象实现了Promise接口,并公开了所有的Promise方法。基本上,一个jqXHR 对象可以被当作一个Promise对象。例如,done方法可以用作jqXHR对象的成功回调函数。jQuery库提供了一个被称为when的函数,接受多个Deferred对象并返回一个Promise对象的函数。当所有Deferred对象被解析时,返回的Promise对象将被解析。当任何Deferred对象被拒绝时,它将被拒绝。传递给函数的Deferred对象when可以是Deferred对象,Promise对象或jqXHR对象。以下是等待多个Ajax请求的代码示例:
首先,两个变量存储从两个jQuery Ajax调用返回的jqXHR对象。然后将两个对象传递给函数when。返回的Promise对象when被链接到函数then。函数then为Promise对象添加了处理程序。then函数的第一个参数是一个成功函数,当Promise成功时调用它。then函数的第二个参数是在Promise被拒绝时调用的失败函数。失败函数检查每个Ajax调用的状态。如果Ajax调用未完成,它将中止。注意,由于页面已执行和关闭,失败函数仍然可以访问超出范围的变量j1和j2 。这是因为JavaScript关闭。闭包是内部函数,即使外部函数关闭,也可以访问外部函数中的变量。换句话说,内部函数可以保持首先定义的环境。
jQuery实现多个ajax请求等待的更多相关文章
- 利用JQUERY实现多个AJAX请求等待
利用JQUERY实现多个AJAX请求等待 li {list-style-type:decimal;}.wiz-editor-body ol.wiz-list-level2 > li {list- ...
- 使用 jQuery Mockjax 插件模拟 Ajax 请求
在实际的开发过程中,前端后台协商好了统一的接口,就各自开始自己的任务了.这时候我有这么一个 Ajax 请求需要从后台获取数据: $.ajax({ url: '/products/' }).done(f ...
- jQuery delegate方法实现Ajax请求绑定事件不丢失
给元素绑定click事件后 ,遇到一个问题:当执行一些ajax请求,再次调用此页面,里面的这个click事件就失效了 比如说:我的分页是一个ajax请求 但我点下一页时 后生成的元素a就没有了clic ...
- MVC4 AspNet MVC下的Ajax / 使用JQuery做相关的Ajax请求
源码参考:链接:http://pan.baidu.com/s/1pKhHHMj 密码:mkr4 1:新建-->项目-->Web-->ASP.NET MVC 4 Web 应用程序.命 ...
- Django(十二)视图--利用jquery从后台发送ajax请求并处理、ajax登录案例
一.Ajax基本概念 [参考]:https://www.runoob.com/jquery/jquery-ajax-intro.html 异步的javascript.在不全部加载某一个页面部的情况下, ...
- 使用jQuery发送POST,Ajax请求返回JSON格式数据
问题: 使用jQuery POST提交数据到PHP文件, PHP返回的json_encode后的数组数据,但jQuery接收到的数据不能解析为JSON对象,而是字符串{"code" ...
- 多个ajax请求下等待条显示和隐藏的简单处理
处理为遇到ajax请求就显示等待条,直到所有的ajax请求执行完毕才关闭等待条.比较简单,源码如下(基于jQuery) //基于jQuery //从第一个ajax请求发出开始显示等待条?直到一系列aj ...
- JQuery使用deferreds串行多个ajax请求
使用JQuery对多个ajax请求串行执行. HTML代码: <a href="#">Click me!</a> <div></div&g ...
- jQuery禁止Ajax请求缓存
一 现象 get请求在有些浏览器中会缓存.浏览器不会发送请求,而是使用上次请求获取到的结果. post请求不会缓存.每次都会发送请求. 二 解决 jQuery提供了禁止Ajax请求缓存的方法: $.a ...
随机推荐
- CSSの変数を使う
この文章はhttps://developer.mozilla.org/ja/docs/Web/CSS/Using_CSS_variablesを参考します. これは実験段階の機能です.この機能は複数のブ ...
- Java String和StringBuffer和StringBuilder
最近在牛课网上做了几道字符串操作的题目,好久没有做题了,之前用的也是大一时C语言做的,对Java字符串操作不太了解,所以深入了解一下String类的相关用法 String构造方法 String() 空 ...
- python全栈开发 生成器 :生成器函数,推导式及生成器表达式
python 全栈开发 1.生成器函数 2.推导式 3.生成器表达式 一.生成器函数 1.生成器: 生成器的本质就是迭代器 (1)生成器的特点和迭代器一样.取值方式和迭代器一样(__next__(), ...
- thymeleaf 获取sessionid
参考https://www.thymeleaf.org/doc/tutorials/3.0/usingthymeleaf.html ${#session.id}
- window中磁盘空间不足但是找不到使用空间的文件
今天看到 电脑的 d盘 空间爆红,空间满了,去找了找没有找到具体是哪个文件占用的空间.一个一个文件的查看属性,都没有找到.文件都不大,几百个g的空间就没了.莫名其妙!!! 自己开启了备份还原,存储的 ...
- MySQL千万级数据分区存储及查询优化
作为传统的关系型数据库,MySQL因其体积小.速度快.总体拥有成本低受到中小企业的热捧,但是对于大数据量(百万级以上)的操作显得有些力不从心,这里我结合之前开发的一个web系统来介绍一下MySQL数据 ...
- http://www.bugku.com:Bugku——SQL注入1(http://103.238.227.13:10087/)
Bugku——SQL注入1(http://103.238.227.13:10087/) 过滤了几乎所有的关键字,尝试绕过无果之后发现,下面有个xss过滤代码.经搜索得该函数会去掉所有的html标签,所 ...
- 写一写关于python开发面试的常遇到的问题以及解答吧,持续更新——看心情
1,什么是python中的魔术方法? 魔术方法是重载运算符的昵称,形式是__init__类似这样的前后双下滑线组成的,常用的__init__,__new__,__call__,__str__,__ge ...
- 六.Spring与RabbitMQ集成--HelloWorld
spring对RabbitMQ做了很好的集成,我们称之为spring AMQP,其官方文档写得十分详尽,文档地址:https://docs.spring.io/spring-amqp/referenc ...
- Xcode9 打包ipa(导出ipa测试包)时总是意外退出
今天用xcode9,打包ipa总是意外退出. 正处在测试阶段,所以打的也是测试包 ,路径是:Product -> Archive -> Export -> Save for Ad H ...