利用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实现动态生成表格并为行绑定单击变色动作的方法
Apr 17 jQuery
jQuery常用选择器详解
Jul 17 jQuery
jQuery条件分页 代替离线查询(附代码)
Aug 17 jQuery
基于jQuery的左滑出现删除按钮的示例
Aug 29 jQuery
使用jQuery 操作table 完成单元格合并的实例
Dec 27 jQuery
浅谈ajax在jquery中的请求和servlet中的响应
Jan 22 jQuery
jQuery基于Ajax实现读取XML数据功能示例
May 31 jQuery
JS拖动选择table里的单元格完整实例【基于jQuery】
May 28 jQuery
jQuery事件模型默认行为执行顺序及trigger()与 triggerHandler()比较实例分析
Apr 30 jQuery
jQuery弹框插件使用方法详解
May 26 jQuery
jQuery实现二级导航菜单的示例
Sep 30 jQuery
jquery简易手风琴插件的封装
Oct 13 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
Oracle 常见问题解答
2006/10/09 PHP
php实现简单的语法高亮函数实例分析
2015/04/27 PHP
百度工程师讲PHP函数的实现原理及性能分析(三)
2015/05/13 PHP
深入解析PHP中SESSION反序列化机制
2017/03/01 PHP
php进程daemon化的正确实现方法
2018/09/06 PHP
jQuery 工具函数学习资料
2010/04/29 Javascript
jquery中对表单的基本操作代码
2010/07/29 Javascript
jquery中:input和input的区别分析
2011/07/13 Javascript
js使用函数绑定技术改变事件处理程序的作用域
2011/12/26 Javascript
在javaScript中关于submit和button的区别介绍
2013/10/20 Javascript
js控制TR的显示隐藏
2016/03/04 Javascript
基于bootstrap插件实现autocomplete自动完成表单
2016/05/07 Javascript
JS常用字符串方法(推荐)
2021/01/15 Javascript
在windows上用nodejs搭建静态文件服务器的简单方法
2016/08/11 NodeJs
JS实现兼容火狐及IE iframe onload属性的遮罩层隐藏及显示效果
2016/08/23 Javascript
js 博客内容进度插件详解
2017/02/19 Javascript
jQuery实现注册会员时密码强度提示信息功能示例
2017/09/05 jQuery
Nodejs调用WebService的示例代码
2017/09/29 NodeJs
windows下更新npm和node的方法
2017/11/30 Javascript
vue elementUI使用tabs与导航栏联动
2019/06/21 Javascript
微信小程序学习总结(四)事件与冒泡实例分析
2020/06/04 Javascript
Nodejs 数组的队列以及forEach的应用详解
2021/02/25 NodeJs
[36:13]Mineski vs iG 2018国际邀请赛小组赛BO2 第一场 8.16
2018/08/17 DOTA
Linux中Python 环境软件包安装步骤
2016/03/31 Python
Python中的is和==比较两个对象的两种方法
2017/09/06 Python
探索HTML5本地存储功能运用技巧
2016/03/02 HTML / CSS
五分钟学会HTML5的WebSocket协议
2019/11/22 HTML / CSS
Marc Jacobs彩妆官网:Marc Jacobs Beauty
2017/07/03 全球购物
英文版销售经理个人求职信
2013/11/20 职场文书
幼儿园教师教学反思
2014/02/06 职场文书
婚礼主持词开场白
2014/03/13 职场文书
校庆接待方案
2014/03/18 职场文书
市场部岗位职责
2015/02/12 职场文书
郭明义电影观后感
2015/06/08 职场文书
Python中request的基本使用解决乱码问题
2022/04/12 Python
Golang并发工具Singleflight
2022/05/06 Golang