利用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插件FusionCharts绘制的3D双柱状图效果示例【附demo源码】
Apr 20 jQuery
各种选择框jQuery的选中方法(实例讲解)
Jun 27 jQuery
自定义类似于jQuery UI Selectable 的Vue指令v-selectable
Aug 23 jQuery
jQuery 开发之EasyUI 添加数据的实例
Sep 26 jQuery
用jquery获取select标签中选中的option值及文本的示例
Jan 25 jQuery
jQuery实现通过方向键控制div块上下左右移动的方法【测试可用】
Apr 26 jQuery
jQuery实现模糊查询的方法分析
May 10 jQuery
JQuery通过后台获取数据遍历到前台的方法
Aug 13 jQuery
jQuery选择器之基本过滤选择器用法实例分析
Feb 19 jQuery
JQuery属性操作与循环用法示例
May 15 jQuery
详解jQuery中的prop()使用方法
Jan 05 jQuery
jquery插件实现悬浮的菜单
Apr 24 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
德劲1107的电路分析与打磨
2021/03/02 无线电
PHP __autoload()方法真的影响性能吗?
2012/03/30 PHP
使用 PHPMAILER 发送邮件实例应用
2012/11/07 PHP
PHP编程风格规范分享
2014/01/15 PHP
php生成QRcode实例
2014/09/22 PHP
详解WordPress开发中的get_post与get_posts函数使用
2016/01/04 PHP
php函数式编程简单示例
2019/08/08 PHP
PHP ElasticSearch做搜索实例讲解
2020/02/05 PHP
Javascript学习笔记7 原型链的原理
2010/01/11 Javascript
JavaScript的类型简单说明
2010/09/03 Javascript
jQuery ul标签下拉菜单演示代码
2010/12/11 Javascript
基于jquery的has()方法以及与find()方法以及filter()方法的区别详解
2013/04/26 Javascript
JS、CSS加载中的小问题探讨
2013/11/26 Javascript
JS保留两位小数,多位小数的示例代码
2014/01/07 Javascript
用js读、写、删除Cookie代码续篇
2014/12/03 Javascript
JavaScript中reduce()方法的使用详解
2015/06/09 Javascript
多个js毫秒倒计时同时进行效果
2016/01/05 Javascript
基于jQuery仿淘宝产品图片放大镜特效
2020/10/19 Javascript
AngularJS实现在ng-Options加上index的解决方法
2016/11/03 Javascript
JS实现全屏的四种写法
2016/12/30 Javascript
JavaScript实现修改伪类样式
2017/11/27 Javascript
使用vuex缓存数据并优化自己的vuex-cache
2018/05/30 Javascript
vue-router 源码实现前端路由的两种方式
2018/07/02 Javascript
简述JS浏览器的三种弹窗
2018/07/15 Javascript
深入理解Vue router的部分高级用法
2018/08/15 Javascript
详解Vue iview IE浏览器不兼容报错(Iview Bable polyfill)
2019/01/07 Javascript
JS实现鼠标按下拖拽效果
2020/07/23 Javascript
Vue使用路由钩子拦截器beforeEach和afterEach监听路由
2020/11/16 Javascript
PyCharm配置mongo插件的方法
2018/11/30 Python
团员的自我评价
2013/12/01 职场文书
大学生演讲稿
2014/04/25 职场文书
离婚协议书范本2014
2014/10/27 职场文书
乡镇科协工作总结2015
2015/05/19 职场文书
罗马假日观后感
2015/06/08 职场文书
2016年中秋节慰问信
2015/12/01 职场文书
小学班主任培训心得体会
2016/01/07 职场文书