通常,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. PHPActiveRecord 学习三

    #事务处理 注意事务 数据库要用InnoDB引擎 $c1 = User::connection(); try { //开启事务 $c1->transaction(); //sql语句 $sql ...

  2. 【Django】ModuleNotFoundError: No module named 'books_ordersschool'

    Unhandled exception in thread started by <function check_errors.<locals>.wrapper at 0x00000 ...

  3. Python之逻辑回归模型来预测

    建立一个逻辑回归模型来预测一个学生是否被录取. import numpy as np import pandas as pd import matplotlib.pyplot as plt impor ...

  4. 第二章 向量(c)无序向量

  5. APIcloud制作APP 微信支付与支付宝支付

    首先要在云端绑定相应模块如alipay和wxpay其次编写代码. 配置区域 var cfg = { webName:'',//APP名字 payDebug:true, isUseWxPay:true, ...

  6. ZOJ 1610 Count the Color(线段树区间更新)

    描述Painting some colored segments on a line, some previously painted segments may be covered by some ...

  7. Pyqt5的事例讲解

    1.第一个gui程序 import sys from PyQt5.QtWidgets import QApplication from PyQt5.QtWidgets import QMainWind ...

  8. Maven学习笔记(十二)-maven打包之resource配置

    版权声明:本文为博主原创文章,未经博主允许不得转载. https://blog.csdn.net/u011781521/article/details/79052725 一.简介 构建Maven项目的 ...

  9. JAVA8 ARRAY、LIST操作 汇【5】)- JAVA8 LAMBDA LIST统计(求和、最大、最小、平均)

    public class Apple { private Integer id; private String name; private BigDecimal money; private Inte ...

  10. javascript第一天知识点

    JS的数据类型: 数字  number 字符串 string 布尔 boolean 空值 null 未定义的 undefined 数组 Array 对象 Object 通过typeof() 可以查看对 ...