jQuery实现多个ajax请求等待
通常,jQuery的函数ajax进行Ajax调用。函数ajax只能做一个Ajax调用。当Ajax调用成功时,执行回调函数。可选地,当Ajax调用返回错误时,调用另一个回调函数。但是,该功能不能根据这些请求的结果进行多个Ajax请求和注册回调函数。一种情况是,网页使多个Ajax请求在禁用用户交互时收集页面不同部分的数据。该页面仅在页面获取所有数据之后才能进行用户交互。本文介绍了jQuery提供的一种基于多个Ajax请求来注册回调函数的方法。这种方法是基于Deferred对象的概念。
首先,在后台的两个ASP.NET Web API函数来接受服务器Ajax调用。代码如下:
后台接收ajax请求代码
要进行单个Ajax调用,可以使用jQuery的ajax函数。正面是一个简单的例子:
ajax调用示例
成功和错误的回调函数正在等待单个Ajax调用。jQuery库提供了一种方法来使任何回调函数等待多个Ajax调用。此方法基于称为Deferred的对象。Deferred对象可以根据Deferrred对象是否解决或拒绝来注册回调函数。以下是Deferred的示例。
Deferred示例
注意Deferred对象可以链接。以下是Deferred对象链的示例。
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调用返回的jqXHR对象。然后将两个对象传递给函数when。返回的Promise对象when被链接到函数then。函数then为Promise对象添加了处理程序。then函数的第一个参数是一个成功函数,当Promise成功时调用它。then函数的第二个参数是在Promise被拒绝时调用的失败函数。失败函数检查每个Ajax调用的状态。如果Ajax调用未完成,它将中止。注意,由于页面已执行和关闭,失败函数仍然可以访问超出范围的变量j1和j2 。这是因为JavaScript关闭。闭包是内部函数,即使外部函数关闭,也可以访问外部函数中的变量。换句话说,内部函数可以保持首先定义的环境。
jQuery实现多个ajax请求等待的更多相关文章
- 利用JQUERY实现多个AJAX请求等待
利用JQUERY实现多个AJAX请求等待 li {list-style-type:decimal;}.wiz-editor-body ol.wiz-list-level2 > li {list- ...
- 使用 jQuery Mockjax 插件模拟 Ajax 请求
在实际的开发过程中,前端后台协商好了统一的接口,就各自开始自己的任务了.这时候我有这么一个 Ajax 请求需要从后台获取数据: $.ajax({ url: '/products/' }).done(f ...
- jQuery delegate方法实现Ajax请求绑定事件不丢失
给元素绑定click事件后 ,遇到一个问题:当执行一些ajax请求,再次调用此页面,里面的这个click事件就失效了 比如说:我的分页是一个ajax请求 但我点下一页时 后生成的元素a就没有了clic ...
- MVC4 AspNet MVC下的Ajax / 使用JQuery做相关的Ajax请求
源码参考:链接:http://pan.baidu.com/s/1pKhHHMj 密码:mkr4 1:新建-->项目-->Web-->ASP.NET MVC 4 Web 应用程序.命 ...
- Django(十二)视图--利用jquery从后台发送ajax请求并处理、ajax登录案例
一.Ajax基本概念 [参考]:https://www.runoob.com/jquery/jquery-ajax-intro.html 异步的javascript.在不全部加载某一个页面部的情况下, ...
- 使用jQuery发送POST,Ajax请求返回JSON格式数据
问题: 使用jQuery POST提交数据到PHP文件, PHP返回的json_encode后的数组数据,但jQuery接收到的数据不能解析为JSON对象,而是字符串{"code" ...
- 多个ajax请求下等待条显示和隐藏的简单处理
处理为遇到ajax请求就显示等待条,直到所有的ajax请求执行完毕才关闭等待条.比较简单,源码如下(基于jQuery) //基于jQuery //从第一个ajax请求发出开始显示等待条?直到一系列aj ...
- JQuery使用deferreds串行多个ajax请求
使用JQuery对多个ajax请求串行执行. HTML代码: <a href="#">Click me!</a> <div></div&g ...
- jQuery禁止Ajax请求缓存
一 现象 get请求在有些浏览器中会缓存.浏览器不会发送请求,而是使用上次请求获取到的结果. post请求不会缓存.每次都会发送请求. 二 解决 jQuery提供了禁止Ajax请求缓存的方法: $.a ...
随机推荐
- 搭建jsp渗透测试环境
java运行环境下载地址:http://www.oracle.com/technetwork/java/javase/downloads/jre8-downloads-2133155.html fir ...
- 简单web测试流程(转载)
转载自 http://blog.csdn.net/qq_35885203 1.界面操作模式打开jmeter 进入jmeter安装目录的bin目录下,双击“jmeter.bat”文件即可打开jmeter ...
- java搭建web从0-1(第一步:创建web工程)
intellij idea版本:2017 1.新建一个web工程 使用工具intellij ideal,注意:只有Ultimate版本的可以新建web工程,社区版本的不支持新建web工程 File ...
- HTML图片热区map area的用法(转)
<area>标记主要用于图像地图,通过该标记可以在图像地图中设定作用区域(又称为热点),这样当用户的鼠标移到指定的作用区域点击时,会自动链接到预先设定好的页面.其基本语法结构如下: 1 & ...
- docker save 批量导出脚本
[root@vultr home]# cat docker_sove.sh docker images > images.txtawk '{print $1}' images.txt > ...
- es快照定时备份脚本
#!/bin/bashdata1=`date "+%Y%m%d"`data2="http://0.0.0.0:9200/_snapshot/my_backup/snaps ...
- pta l2-7(家庭房产)
题目链接:https://pintia.cn/problem-sets/994805046380707840/problems/994805068539215872 题意:给定n个人的信息,包括其编号 ...
- String int 相互转换
String->int: int i = Integer.parseInt(s) int->String: String s = Integer.toString(i)
- spring mybatis springmvc整合
使用SSM(Spring.SpringMVC和Mybatis)已经有三个多月了,项目在技术上已经没有什么难点了,基于现有的技术就可以实现想要的功能,当然肯定有很多可以改进的地方.之前没有记录SSM整合 ...
- 在CentOS7.4上手动编译安装Mysql-5.7.20
实验环境:CentOS 7.4 mysql软件: mysql-boost-5.7.20.tar.gz 1.安装编译工具 yum -y install \ncurses \ncurses-devel \ ...