利用JQUERY实现多个AJAX请求等待的实例


Posted in jQuery onDecember 14, 2017

前言通常,jQuery的函数ajax进行Ajax调用。函数ajax只能做一个Ajax调用。当Ajax调用成功时,执行回调函数。可选地,当Ajax调用返回错误时,调用另一个回调函数。

但是,该功能不能根据这些请求的结果进行多个Ajax请求和注册回调函数。

一种情况是,网页使多个Ajax请求在禁用用户交互时收集页面不同部分的数据。

该页面仅在页面获取所有数据之后才能进行用户交互。本文介绍了jQuery提供的一种基于多个Ajax请求来注册回调函数的方法。

这种方法是基于Deferred对象的概念。相关代码首先,在后台的两个ASP.NET Web API函数来接受服务器Ajax调用。

代码如下:

利用JQUERY实现多个AJAX请求等待的实例

后台接收

ajax请求代码

要进行单个Ajax调用,可以使用jQuery的ajax函数。正面是一个简单的例子:

利用JQUERY实现多个AJAX请求等待的实例

ajax调用示例成功和错误的回调函数正在等待单个Ajax调用。jQuery库提供了一种方法来使任何回调函数等待多个Ajax调用。此方法基于称为Deferred的对象。Deferred对象可以根据Deferrred对象是否解决或拒绝来注册回调函数。

以下是Deferred的示例

利用JQUERY实现多个AJAX请求等待的实例

Deferred示例注意Deferred对象可以链接。以下是Deferred对象链的示例。

利用JQUERY实现多个AJAX请求等待的实例

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请求等待的实例

首先,两个变量存储从两个jQuery Ajax调用返回的jqXHR对象。

然后将两个对象传递给函数when。返回的Promise对象when被链接到函数then。

函数then为Promise对象添加了处理程序。

then函数的第一个参数是一个成功函数,当Promise成功时调用它。

then函数的第二个参数是在Promise被拒绝时调用的失败函数。

失败函数检查每个Ajax调用的状态。如果Ajax调用未完成,它将中止。注意,由于页面已执行和关闭,失败函数仍然可以访问超出范围的变量j1和j2 。

这是因为JavaScript关闭。闭包是内部函数,即使外部函数关闭,也可以访问外部函数中的变量。换句话说,内部函数可以保持首先定义的环境。

以上这篇利用JQUERY实现多个AJAX请求等待的实例就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

jQuery 相关文章推荐
QRCode.js:基于JQuery的生成二维码JS库的使用
Jun 23 jQuery
JS+jQuery实现注册信息的验证功能
Sep 26 jQuery
jQuery实现的页面遮罩层功能示例【测试可用】
Oct 14 jQuery
jQuery幻灯片插件owlcarousel参数说明中文文档
Feb 27 jQuery
jQuery实现表单动态添加数据并提交的方法
Jul 19 jQuery
jQuery UI实现动画效果代码分享
Aug 19 jQuery
在vue项目中使用Jquery-contextmenu插件的步骤讲解
Jan 27 jQuery
jQuery实现的鼠标拖动画矩形框示例【可兼容IE8】
May 17 jQuery
jQuery实现的解析本地 XML 文档操作示例
Apr 30 jQuery
jQuery弹框插件使用方法详解
May 26 jQuery
Jquery使用each函数实现遍历及数组处理
Jul 14 jQuery
html5以及jQuery实现本地图片上传前的预览代码实例讲解
Mar 01 jQuery
jquery获取transform里的值实现方法
Dec 12 #jQuery
jquery手机触屏滑动拼音字母城市选择器的实例代码
Dec 11 #jQuery
jQuery实现简单的下拉菜单导航功能示例
Dec 07 #jQuery
jquery学习笔记之无new构建详解
Dec 07 #jQuery
判断jQuery是否加载完成,没完成继续判断的解决方法
Dec 06 #jQuery
基于jQuery Ajax实现下拉框无刷新联动
Dec 06 #jQuery
jquery如何实现点击空白处隐藏元素
Dec 05 #jQuery
You might like
php设计模式 Composite (组合模式)
2011/06/26 PHP
php中利用str_pad函数生成数字递增形式的产品编号
2013/09/30 PHP
免费的ip数据库淘宝IP地址库简介和PHP调用实例
2014/04/08 PHP
PHP中使用localhost连接Mysql不成功的解决方法
2014/08/20 PHP
php计划任务之验证是否有多个进程调用同一个job的方法
2015/12/07 PHP
jQuery 处理网页内容的实现代码
2010/02/15 Javascript
jquery实现手风琴效果实例代码
2013/11/15 Javascript
jquery dialog open后,服务器端控件失效的快速解决方法
2013/12/19 Javascript
实现网页页面跳转的几种方法(meta标签、js实现、php实现)
2014/05/20 Javascript
JS实现根据当前文字选择返回被选中的文字
2014/05/21 Javascript
取得元素的左和上偏移量的方法
2014/09/17 Javascript
浅析2种JavaScript继承方式
2015/12/04 Javascript
用canvas 实现个图片三角化(LOW POLY)效果
2016/02/18 Javascript
JavaScript数据类型转换的注意事项
2016/07/31 Javascript
Web前端框架bootstrap实战【第一次接触使用】
2016/12/28 Javascript
Angular2入门--架构总览
2017/03/29 Javascript
运用jQuery写的验证表单(实例讲解)
2017/07/06 jQuery
PHPStorm中如何对nodejs项目进行单元测试详解
2019/02/28 NodeJs
Vue.js中provide/inject实现响应式数据更新的方法示例
2019/10/16 Javascript
node+vue实现文件上传功能
2020/05/28 Javascript
[04:07]显微镜下的DOTA2第八期——英雄复活动作
2014/06/24 DOTA
python中通过selenium简单操作及元素定位知识点总结
2019/09/10 Python
python3.7 利用函数os pandas利用excel对文件名进行归类
2019/09/29 Python
css3学习系列之移动属性详解
2017/07/04 HTML / CSS
为智能设备设计个性化保护套网站:caseable
2017/01/05 全球购物
Tommy Hilfiger美国官网:美国高端休闲领导品牌
2019/01/14 全球购物
CK加拿大官网:Calvin Klein加拿大
2020/03/14 全球购物
如何掌握自荐信格式呢
2013/11/19 职场文书
银行见习期自我鉴定
2014/01/29 职场文书
2014年教师节寄语
2014/08/11 职场文书
法人授权委托书样本
2014/09/19 职场文书
财务会计实训报告
2014/11/05 职场文书
2015年林业工作总结
2015/05/14 职场文书
2016年教师师德师风心得体会
2016/01/12 职场文书
2019预备党员转正申请书模板2篇!
2019/08/07 职场文书
记一次Mysql不走日期字段索引的原因小结
2021/10/24 MySQL