利用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 相关文章推荐
jQuery Collapse1.1.0折叠插件简单使用
Aug 28 jQuery
jquery ajaxfileupload异步上传插件
Nov 21 jQuery
jQuery动态添加元素无法触发绑定事件的解决方法分析
Jan 02 jQuery
jQuery实现的鼠标响应缓冲动画效果示例
Feb 13 jQuery
jQuery实现鼠标移到某个对象时弹出显示层功能
Aug 23 jQuery
Jquery的autocomplete插件用法及参数讲解
Mar 12 jQuery
jQuery实现的鼠标拖动画矩形框示例【可兼容IE8】
May 17 jQuery
jquery-ui 进度条功能示例【测试可用】
Jul 25 jQuery
jQuery中DOM操作原则实例分析
Aug 01 jQuery
jquery使用echarts实现有向图可视化功能示例
Nov 25 jQuery
jquery实现简易验证插件封装
Sep 13 jQuery
jQuery列表动态增加和删除的实现方法
Nov 05 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
phpmyadmin导入(import)文件限制的解决办法
2009/12/11 PHP
php生成短域名函数
2015/03/23 PHP
Thinkphp连表查询及数据导出方法示例
2016/10/15 PHP
PHP中功能强大却很少使用的函数实例小结
2016/11/10 PHP
php获取flash尺寸详细数据的方法
2016/11/12 PHP
解决php用mysql方式连接数据库出现Deprecated报错问题
2019/12/25 PHP
新闻内页-JS分页
2006/06/07 Javascript
js 数组实现一个类似ruby的迭代器
2009/10/27 Javascript
简单实用的全选反选按钮例子
2013/10/18 Javascript
跟我学Node.js(四)---Node.js的模块载入方式与机制
2014/06/04 Javascript
浅谈js函数中的实例对象、类对象、局部变量(局部函数)
2016/11/20 Javascript
node.js中express中间件body-parser的介绍与用法详解
2017/05/23 Javascript
详解jquery插件jquery.viewport.js学习使用方法
2017/09/08 jQuery
vue-week-picker实现支持按周切换的日历
2019/06/26 Javascript
vue 接口请求地址前缀本地开发和线上开发设置方式
2020/08/13 Javascript
pygame学习笔记(4):声音控制
2015/04/15 Python
使用Python的Treq on Twisted来进行HTTP压力测试
2015/04/16 Python
深入理解python中的atexit模块
2017/03/07 Python
python 3.7.0 安装配置方法图文教程
2018/08/27 Python
python+os根据文件名自动生成文本
2019/03/21 Python
python pytest进阶之xunit fixture详解
2019/06/27 Python
HTML5实现直播间评论滚动效果的代码
2020/05/27 HTML / CSS
SKECHERS官方旗舰店:美国舒适运动休闲品牌
2017/12/22 全球购物
美国折扣宠物药房:Total Pet Supply
2018/05/27 全球购物
SteelSeries赛睿官网:游戏外设和配件的领先制造商(耳机、键盘、鼠标和鼠标垫)
2018/06/17 全球购物
Under Armour安德玛意大利官网:美国高端运动科技品牌
2020/01/16 全球购物
土木工程个人自荐信范文
2013/11/30 职场文书
2014端午节活动策划方案
2014/01/27 职场文书
工作决心书范文
2014/03/11 职场文书
竞选文艺委员演讲稿
2014/04/28 职场文书
媒体宣传策划方案
2014/05/25 职场文书
云冈石窟导游词
2015/02/04 职场文书
小学教学工作总结2015
2015/05/13 职场文书
高中班长竞选稿
2015/11/20 职场文书
漫画「古见同学有交流障碍症」第25卷封面公开
2022/03/21 日漫
Mysql 数据库中的 redo log 和 binlog 写入策略
2022/04/26 MySQL