利用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 dataTable 后台加载数据并分页实例代码
Jun 07 jQuery
JQuery和html+css实现带小圆点和左右按钮的轮播图实例
Jul 22 jQuery
jQuery实现腾讯信用界面(自制刻度尺)样式
Aug 15 jQuery
jQuery实现注册会员时密码强度提示信息功能示例
Sep 05 jQuery
jquery鼠标悬停导航下划线滑出效果
Sep 29 jQuery
浅谈jquery中ajax跨域提交的时候会有2次请求的问题
Nov 10 jQuery
jQuery实现的简单获取索引功能示例
Jun 04 jQuery
jQuery实现下拉菜单动态添加数据点击滑出收起其他功能
Jun 14 jQuery
jQuery实现模拟搜索引擎的智能提示功能简单示例
Jan 27 jQuery
jQuery设置下拉框显示与隐藏效果的方法分析
Sep 15 jQuery
JQuery事件委托(适用于给动态生成的脚本元素添加事件)
Feb 01 jQuery
jQuery实现移动端扭蛋机抽奖
Nov 08 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
DC最新动画电影:《战争之子》为何内容偏激,毁了一个不错的漫画
2020/04/09 欧美动漫
PHP的开发框架的现状和展望
2007/03/16 PHP
ThinkPHP V2.2说明文档没有说明的那些事实例小结
2015/07/01 PHP
php微信公众平台开发之微信群发信息
2016/09/13 PHP
php实现简易计算器
2020/08/28 PHP
javascript检查日期格式的函数[比较全]
2008/10/17 Javascript
jquery 读取页面load get post ajax 四种方式代码写法
2011/04/02 Javascript
动态获取复选框checkbox选中个数的jquery代码
2013/06/25 Javascript
JSON传递bool类型数据的处理方式介绍
2013/09/18 Javascript
获取鼠标在div中的相对位置的实现代码
2013/12/30 Javascript
javascript中声明函数的方法及调用函数的返回值
2014/07/22 Javascript
jQuery DOM删除节点操作指南
2015/03/03 Javascript
JS实现横向拉伸动感伸缩菜单效果代码
2015/09/04 Javascript
JavaScript基础知识点归纳(推荐)
2016/07/09 Javascript
KnockoutJS 3.X API 第四章之数据控制流component绑定
2016/10/10 Javascript
weex slider实现滑动底部导航功能
2017/08/28 Javascript
JS实现运动缓冲效果的封装函数示例
2018/02/18 Javascript
详解Vue template 如何支持多个根结点
2020/02/10 Javascript
深入解读VUE中的异步渲染的实现
2020/06/19 Javascript
vue页面引入three.js实现3d动画场景操作
2020/08/10 Javascript
Python内置函数的用法实例教程
2014/09/08 Python
Python找出最小的K个数实例代码
2018/01/04 Python
对numpy 数组和矩阵的乘法的进一步理解
2018/04/04 Python
对Python中的@classmethod用法详解
2018/04/21 Python
Python3爬虫之urllib携带cookie爬取网页的方法
2018/12/28 Python
django之对FileField字段的upload_to的设定方法
2019/07/28 Python
Python使用itcaht库实现微信自动收发消息功能
2020/07/13 Python
Vero Moda西班牙官方购物网站:丹麦BESTSELLER旗下知名女装品牌
2018/04/27 全球购物
深圳茁壮笔试题
2015/05/28 面试题
学生实习推荐信范文
2013/11/26 职场文书
考博专家推荐信
2014/05/10 职场文书
领导干部整治奢华浪费之风思想汇报
2014/10/07 职场文书
优秀教师单行材料
2014/12/16 职场文书
2015年个人自我剖析材料
2014/12/29 职场文书
公司出纳岗位职责
2015/03/31 职场文书
小学运动会加油词
2015/07/18 职场文书