通常,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请求等待的更多相关文章

  1. 利用JQUERY实现多个AJAX请求等待

    利用JQUERY实现多个AJAX请求等待 li {list-style-type:decimal;}.wiz-editor-body ol.wiz-list-level2 > li {list- ...

  2. 使用 jQuery Mockjax 插件模拟 Ajax 请求

    在实际的开发过程中,前端后台协商好了统一的接口,就各自开始自己的任务了.这时候我有这么一个 Ajax 请求需要从后台获取数据: $.ajax({ url: '/products/' }).done(f ...

  3. jQuery delegate方法实现Ajax请求绑定事件不丢失

    给元素绑定click事件后 ,遇到一个问题:当执行一些ajax请求,再次调用此页面,里面的这个click事件就失效了 比如说:我的分页是一个ajax请求 但我点下一页时 后生成的元素a就没有了clic ...

  4. MVC4 AspNet MVC下的Ajax / 使用JQuery做相关的Ajax请求

    源码参考:链接:http://pan.baidu.com/s/1pKhHHMj  密码:mkr4 1:新建-->项目-->Web-->ASP.NET MVC 4 Web 应用程序.命 ...

  5. Django(十二)视图--利用jquery从后台发送ajax请求并处理、ajax登录案例

    一.Ajax基本概念 [参考]:https://www.runoob.com/jquery/jquery-ajax-intro.html 异步的javascript.在不全部加载某一个页面部的情况下, ...

  6. 使用jQuery发送POST,Ajax请求返回JSON格式数据

    问题: 使用jQuery POST提交数据到PHP文件, PHP返回的json_encode后的数组数据,但jQuery接收到的数据不能解析为JSON对象,而是字符串{"code" ...

  7. 多个ajax请求下等待条显示和隐藏的简单处理

    处理为遇到ajax请求就显示等待条,直到所有的ajax请求执行完毕才关闭等待条.比较简单,源码如下(基于jQuery) //基于jQuery //从第一个ajax请求发出开始显示等待条?直到一系列aj ...

  8. JQuery使用deferreds串行多个ajax请求

    使用JQuery对多个ajax请求串行执行. HTML代码: <a href="#">Click me!</a> <div></div&g ...

  9. jQuery禁止Ajax请求缓存

    一 现象 get请求在有些浏览器中会缓存.浏览器不会发送请求,而是使用上次请求获取到的结果. post请求不会缓存.每次都会发送请求. 二 解决 jQuery提供了禁止Ajax请求缓存的方法: $.a ...

随机推荐

  1. 安装scrapy框架

    前提安装好python.setuptools. 1.安装Python 安装完了记得配置环境,将python目录和python目录下的Scripts目录添加到系统环境变量的Path里.在cmd中输入py ...

  2. java面试题:jvm

    jvm内存区域 Q:jvm内存怎么划分的? 答: 方法区(线程共享):各个线程共享的一个区域,用于存储虚拟机加载的类信息.常量.静态变量.即时编译器编译后的代码等数据.虽然 Java 虚拟机规范把方法 ...

  3. 分布式监控系统Zabbix-3.0.3-完整安装记录

    由于采用sendmail发送邮件,常常会被认为是垃圾邮件被拒,所以不推荐这种方式!这里,针对zabbix报警信息的发送,可以采用下面两种方式中的任意一种:1)利用sendEmail程序来发送报警邮件. ...

  4. centos 6 KVM 网卡桥接配置

    一. 网卡桥接前准备 1.软件支持: # rpm -qa bridge-utils # yum install bridge-utils       确保软件包已安装 2. 关闭NetworkMana ...

  5. httpclient使用用例

    import java.io.BufferedReader;import java.io.IOException;import java.io.InputStreamReader;import jav ...

  6. SPSS SAS 是什么?

    SPSS(Statistical Product and Service Solutions),“统计产品与服务解决方案”软件.最初软件全称为“社会科学统计软件包”(SolutionsStatisti ...

  7. Exceptions

    [定义] error: external, like out of memory exception: internal, like file not found 父类都是throwable 逻辑有错 ...

  8. 关于AndroidStudio的打包数字签名以及多渠道发布

    AndroidStudio右侧Gradle里边的build(工程下的)是可以生成未签名的debug和release的apk包生成前可以先clean一下工程 app下的build.gradle里边的 l ...

  9. ALV界面显示

    PERFORM ADD.   IS_LAYOUT_LVC-CWIDTH_OPT = 'X'.   IS_LAYOUT_LVC-SEL_MODE = 'A'. CALL FUNCTION 'REUSE_ ...

  10. istio-jaeger-python调用链配置

    虽然,istio ingress controller已经生成了jaeger 记录所需要的信息,但是多个分布式之间没法清晰记录相互之间的依赖关系.所以相关的项目还需要加入特殊配置. 如:python- ...