利用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 相关文章推荐
JS jQuery使用正则表达式去空字符的简单实现代码
May 20 jQuery
jQuery实现返回顶部按钮和scroll滚动功能[带动画效果]
Jul 05 jQuery
jQuery Validate插件ajax方式验证输入值的实例
Dec 21 jQuery
jquery 输入框查找关键字并提亮颜色的实例代码
Jan 23 jQuery
jQuery实现鼠标响应式淘宝动画效果示例
Feb 13 jQuery
JQuery获取可视区尺寸和文档尺寸及制作悬浮菜单示例
May 14 jQuery
JavaScript表格隔行变色和Tab标签页特效示例【附jQuery版】
Jul 11 jQuery
jquery validate 实现动态增加/删除验证规则操作示例
Oct 28 jQuery
jQuery实现倒计时功能完整示例
Jun 01 jQuery
jQuery实现评论模块
Aug 19 jQuery
IDEA配置jQuery, $符号不再显示黄色波浪线的问题
Oct 09 jQuery
jQuery+ajax实现文件上传功能
Dec 22 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,不用COM,生成excel文件
2006/10/09 PHP
如何在PHP中进行身份认证
2006/10/09 PHP
PHP实现多服务器session共享之NFS共享的方法
2007/03/16 PHP
php中获取远程客户端的真实ip地址的方法
2011/08/03 PHP
解析php中获取url与物理路径的总结
2013/06/21 PHP
Yii2中YiiBase自动加载类、引用文件方法分析(autoload)
2016/07/25 PHP
Yii2中多表关联查询hasOne hasMany的方法
2017/02/15 PHP
Thinkphp5框架使用validate实现验证功能的方法
2019/08/27 PHP
JavaScript DOM学习第六章 表单实例
2010/02/19 Javascript
自己整理的一个javascript日期处理函数
2010/10/16 Javascript
Javascript技巧之不要用for in语句对数组进行遍历
2010/10/20 Javascript
Javascript公共脚本库系列(一): 弹出层脚本
2011/02/24 Javascript
window.onload和$(function(){})的区别介绍
2013/10/30 Javascript
jquery 操作两个select实现值之间的互相传递
2014/03/07 Javascript
Iframe实现跨浏览器自适应高度解决方法
2014/09/02 Javascript
jQuery实现点击小图片淡入淡出显示大图片特效
2015/09/09 Javascript
JS实现网页标题栏显示当前时间和日期的完整代码
2015/11/02 Javascript
javascript特殊文本输入框网页特效
2016/09/13 Javascript
微信小程序 picker 组件详解及简单实例
2017/01/10 Javascript
JS判断指定dom元素是否在屏幕内的方法实例
2017/01/23 Javascript
vue中v-for通过动态绑定class实现触发效果
2018/12/06 Javascript
layui表格 返回的数据状态异常的解决方法
2019/09/10 Javascript
单线程JavaScript实现异步过程详解
2020/05/19 Javascript
[06:10]6.81新信使新套装!给你一个炫酷的DOTA2
2014/05/06 DOTA
python实现统计代码行数的方法
2015/05/22 Python
Python中数字以及算数运算符的相关使用
2015/10/12 Python
Django框架模板注入操作示例【变量传递到模板】
2018/12/19 Python
python实现操作文件(文件夹)
2019/10/31 Python
简单介绍django提供的加密算法
2019/12/18 Python
Python转换itertools.chain对象为数组的方法
2020/02/07 Python
微软马来西亚官方网站:Microsoft马来西亚
2019/11/22 全球购物
大专毕业生自我评价分享
2013/11/10 职场文书
2015年试用期自我评价范文
2015/03/10 职场文书
总经理司机岗位职责
2015/04/10 职场文书
迎新晚会主持词开场白
2015/05/28 职场文书
「约定的梦幻岛」作画发布诺曼生日新绘
2022/03/21 日漫