利用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和ajax代替iframe的方法(详解)
Apr 12 jQuery
jQuery插件FusionCharts绘制的2D条状图效果【附demo源码】
May 13 jQuery
jQuery UI Draggable + Sortable 结合使用(实例讲解)
Sep 07 jQuery
jQuery实现简单日期格式化功能示例
Sep 19 jQuery
判断jQuery是否加载完成,没完成继续判断的解决方法
Dec 06 jQuery
jQuery+ajax实现动态添加表格tr td功能示例
Apr 23 jQuery
jQuery length 和 size()区别总结
Apr 26 jQuery
jQuery AJAX与jQuery事件的分析讲解
Feb 18 jQuery
Jquery的autocomplete插件用法及参数讲解
Mar 12 jQuery
jQuery位置选择器用法实例分析
Jun 28 jQuery
jquery向后台提交数组的代码分析
Feb 20 jQuery
jquery+ajax实现异步上传文件显示进度条
Aug 17 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语法(4)
2006/10/09 PHP
PHP 编程安全性小结
2010/01/08 PHP
PHP使用CURL实现多线程抓取网页
2015/04/30 PHP
php常用图片处理类
2016/03/16 PHP
SSO单点登录的PHP实现方法(Laravel框架)
2016/03/23 PHP
搭建PhpStorm+PhpStudy开发环境的超详细教程
2020/09/17 PHP
Jquery Validate 正则表达式实用验证代码大全
2013/08/23 Javascript
Javascript中的arguments与重载介绍
2015/03/15 Javascript
jQuery快速实现商品数量加减的方法
2017/02/06 Javascript
Windows下使用Nodejs运行js的方法
2017/09/02 NodeJs
three.js中文文档学习之创建场景
2017/11/20 Javascript
ligerUI---ListBox(列表框可移动的实例)
2017/11/28 Javascript
jQuery进阶实践之利用最优雅的方式如何写ajax请求
2017/12/20 jQuery
jquery 实现拖动文件上传加载进度条功能
2018/03/18 jQuery
搭建vue开发环境
2018/07/19 Javascript
VUE 全局变量的几种实现方式
2018/08/22 Javascript
CryptoJS中AES实现前后端通用加解密技术
2018/12/18 Javascript
js+h5 canvas实现图片验证码
2020/10/11 Javascript
python黑魔法之编码转换
2016/01/25 Python
教你用Type Hint提高Python程序开发效率
2016/08/08 Python
python编程实现归并排序
2017/04/14 Python
python 使用get_argument获取url query参数
2017/04/28 Python
Python制作词云的方法
2018/01/03 Python
Python简单实现两个任意字符串乘积的方法示例
2018/04/12 Python
python实现俄罗斯方块
2018/06/26 Python
Django ORM 常用字段与不常用字段汇总
2019/08/09 Python
详解Tensorflow不同版本要求与CUDA及CUDNN版本对应关系
2020/08/04 Python
一款基于css3麻将筛子3D翻转特效的实例教程
2014/12/31 HTML / CSS
四年大学自我鉴定
2014/02/17 职场文书
退休教师欢送会主持词
2014/03/31 职场文书
身边的榜样活动方案
2014/08/20 职场文书
婚庆公司计划书
2014/09/15 职场文书
2014年保险公司工作总结
2014/11/22 职场文书
本溪水洞导游词
2015/02/11 职场文书
2015年学校办公室工作总结
2015/05/26 职场文书
再次探讨go实现无限 buffer 的 channel方法
2021/06/13 Golang