利用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实现图片轮播效果
May 08 jQuery
详解如何在 vue 项目里正确地引用 jquery 和 jquery-ui的插件
Jun 01 jQuery
jQuery复合事件结合toggle()方法的用法示例
Jun 10 jQuery
zTree jQuery 树插件的使用(实例讲解)
Sep 25 jQuery
jQuery实现验证表单密码一致性及正则表达式验证邮箱、手机号的方法
Dec 05 jQuery
jQuery实现点击DIV同时点击CheckBox,并为DIV上背景色的实例
Dec 18 jQuery
详解jQuery中的easyui
Sep 02 jQuery
jQuery点击页面其他部分隐藏下拉菜单功能
Nov 27 jQuery
Jquery实现无缝向上循环滚动列表的特效
Feb 13 jQuery
jquery实现动态改变css样式的方法分析
May 27 jQuery
jquery插件开发模式实例详解
Jul 20 jQuery
jQuery实现的图片点击放大缩小功能案例
Jan 02 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设计模式 Singleton(单例模式)
2011/06/26 PHP
window.open的功能全解析
2006/10/10 Javascript
自定义的一个简单时尚js下拉选择框
2013/11/20 Javascript
javascript调试之DOM断点调试法使用技巧分享
2014/04/15 Javascript
js实现表单多按钮提交action的处理方法
2015/10/24 Javascript
javascript实现右侧弹出“分享到”窗口效果
2016/02/01 Javascript
jquery 动态增加,减少input表单的简单方法(必看)
2016/10/12 Javascript
JavaScript实现Fly Bird小游戏
2016/12/15 Javascript
JS实现仿PS的调色板效果完整实例
2016/12/21 Javascript
微信小程序 参数传递实例代码
2017/03/20 Javascript
jQuery插件Echarts实现的渐变色柱状图
2017/03/23 jQuery
vue学习笔记之vue1.0和vue2.0的区别介绍
2017/05/17 Javascript
详解vue 单页应用(spa)前端路由实现原理
2018/04/04 Javascript
微信小程序实现红包雨功能
2018/07/11 Javascript
angularjs中判断ng-repeat是否迭代完的实例
2018/09/12 Javascript
简化版的vue-router实现思路详解
2018/10/19 Javascript
D3.js 实现带伸缩时间轴拓扑图的示例代码
2020/01/20 Javascript
vue+render+jsx实现可编辑动态多级表头table的实例代码
2020/04/01 Javascript
Openlayers学习之地图比例尺控件
2020/09/28 Javascript
[01:33]真香警告!DOTA2勇士令状不朽珍藏Ⅱ饰品欣赏
2018/06/26 DOTA
Python 随机生成中文验证码的实例代码
2013/03/20 Python
linux系统使用python监控apache服务器进程脚本分享
2014/01/15 Python
浅析Python中的join()方法的使用
2015/05/19 Python
Python读写配置文件的方法
2015/06/03 Python
使用Python的turtle模块画图的方法
2017/11/15 Python
Django框架教程之正则表达式URL误区详解
2018/01/28 Python
linux查找当前python解释器的位置方法
2019/02/20 Python
解决Python找不到ssl模块问题 No module named _ssl的方法
2019/04/29 Python
Python编写带选项的命令行程序方法
2019/08/13 Python
Python实现打印实心和空心菱形
2019/11/23 Python
Pytorch之contiguous的用法
2019/12/31 Python
数据库专业英语
2012/11/30 面试题
机械设计及其自动化专业推荐信
2013/10/31 职场文书
智能电子应届生求职信
2013/11/10 职场文书
Netflix《海贼王》真人版剧集多张片场照曝光
2022/04/04 日漫
mysql使用 not int 子查询隐含陷阱
2022/04/12 MySQL