通常,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. JTAG-测试数据寄存器

    1.问题:JTAG中的数据寄存器的结构 JTAG标准规定了两个必须的数据寄存器: 1.旁通寄存器 2.边界扫描寄存器(已经在可测性设计-扫描通路中介绍了) 可选的的寄存器有: 1.器件标示寄存器(32 ...

  2. PHP连接数据库(mysql)

    前端链接后台,数据库几乎必不可少.所以本文总结了PHP链接数据库的常用方法步骤. 首先 链接数据库:mysqli_connect参数①主机地址 ②mysql用户名③nysql密码④选择连接的数据库⑤端 ...

  3. ASCII码翻译方法可直接使用谷歌

    ASCII码翻译方法可直接使用谷歌. 如: key{you are right} 将此段ASCII码输入谷歌搜索栏,直接翻译结果:    

  4. ECMAScript2017之async function

    An async function can contain an await expression that pauses the execution of the async function an ...

  5. linux命令学习之:sed

    sed:Stream Editor文本流编辑,sed是一个“非交互式的”面向字符流的编辑器.能同时处理多个文件多行的内容,可以不对原文件改动,把整个文件输入到屏幕,可以把只匹配到模式的内容输入到屏幕上 ...

  6. Volley框架原理

    Volley有如下优点: 1. 自动调度网络请求 2. 多并发请求 (源于开了多个线程)3. 本地Cache自动缓存网络请求结果 4. 支持设置请求优先级 5. 支持取消单个请求或者取消所有请求 6. ...

  7. JQuery UI之Autocomplete(3)属性与事件

    1.Autocomplete的属性 首先引入css和js文件,以及对应的HTML代码如下: <link href="../css/jquery-ui.css" rel=&qu ...

  8. listView 滑动时 滑到一半自动滑动到对应的位置

    package com.bi.demo; import android.support.v7.app.AppCompatActivity; import android.os.Bundle; impo ...

  9. CMakeLists.txt的写法

    [1]ADD_LIBRARY: Add a library to the project using the specified source files.要求CMake根据指定的源文件生成库文件 . ...

  10. go语言中的接口interface

    package main; import "fmt" //接口interface //接口是一个或多个方法签名的集合 //只要某个类型拥有该接口的所有方法签名,即算实现该接口. / ...