利用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请求等待的实例就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持我们。

赞 (0)

相关推荐

  • jquery实现加载等待效果示例

    复制代码 代码如下: var dates = this.options.form.getWidgetByName("dates").getValue(); $.ajax({ url: "http://127.0.0.1:9009/Brilliantzz/service/snproduct.do", data:dates, beforeSend:function() { var h = document.body.clientHeight; $("<d

  • 使用jQuery中的when实现多个AJAX请求对应单个回调的例子分享

    我知道这些函数都是异步执行(asyncronously)并且会延迟一段时间返回,所以我想知道是否有一种方式,使我可以使用单个回调,并行地加载它们,就像JS加载器 curljs 所做的那样. 很幸运! 通过jQuery.when, 我可以并发地加载两个请求,只执行一次回调! jQuery 脚本正如我提到的,下面是加载脚本和一个JSON资源的用例: 复制代码 代码如下: $.when( $.getScript('/media/js/wiki-min.js?build=21eb633'),  $.ge

  • Jquery 一次处理多个ajax请求的代码

    复制代码 代码如下: $(document).ready(function () { $('#getsetgo').click(function () { $.when($.ajax("page1.php"), $.ajax("page2.php")).done(function(a1, a2){ $('#id1').html(a1[0]); $('#id2').html(a2[0]); }); }); }); jquery 1.5发布后,其中新增加方法jQuery

  • jQuery使用deferreds串行多个ajax请求

    使用JQuery对多个ajax请求串行执行. HTML代码: <a href="#">Click me!</a> <div></div> JS: function GetSomeDeferredStuff() { var deferreds = []; var i = 1; for (i = 1; i <= 10; i++) { var count = i; deferreds.push( $.post('/echo/html/',

  • 利用JQUERY实现多个AJAX请求等待的实例

    利用JQUERY实现多个AJAX请求等待的实例

    前言通常,jQuery的函数ajax进行Ajax调用.函数ajax只能做一个Ajax调用.当Ajax调用成功时,执行回调函数.可选地,当Ajax调用返回错误时,调用另一个回调函数. 但是,该功能不能根据这些请求的结果进行多个Ajax请求和注册回调函数. 一种情况是,网页使多个Ajax请求在禁用用户交互时收集页面不同部分的数据. 该页面仅在页面获取所有数据之后才能进行用户交互.本文介绍了jQuery提供的一种基于多个Ajax请求来注册回调函数的方法. 这种方法是基于Deferred对象的概念.相关

  • 实例详解jQuery Mockjax 插件模拟 Ajax 请求

    1. 原理 jquery-mockjax是用于mock 前台ajax向后台请求的返回数据. 原理很简单 在你js代码要发送ajax请求的地方断点一下,然后比较在[引入jquery-mockjax] 和 [没有引入jquery-mockjax]的情况下$.ajax.toString()的值情况. 很明显,引入jquery-mockjax时,这个mock库会对jquery提供的ajax函数做替换.这样就很容易能mock起来. 在实际的开发过程中,前端后台协商好了统一的接口,就各自开始自己的任务了.这

  • 使用jquery+iframe做一个ajax上传效果(实例)

    html页面 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" lang="zh-CN"> <head> <title>利用j

  • javaweb中ajax请求后台servlet(实例)

    废话不多说,直接上代码 public class DZFP_jdbc extends HttpServlet{ private static final long serialVersionUID = 1L; public static Connection conn; public static ResultSet rs = null ; public static PreparedStatement ps = null ; private static String url = "jdbc:

  • MUi框架ajax请求WebService接口实例

    实例如下所示: mui.init(); mui.plusReady(function() { document.getElementById('login').addEventListener('tap',function() { var UserName=document.getElementById("account").value; var Userpassword= hex_md5(document .getElementById("password").v

  • jquery ajax 请求小技巧实例分析

    本文实例讲述了jquery ajax 请求小技巧.分享给大家供大家参考,具体如下: jquery   是一个非常好用的js框架,它为我们提供了很多工具.启动异步请求就是很好用的一个工具 官方推荐的ajax 请求格式 $.ajax({ url:"http://xxxxxxxxxxxxxxxxx/",//你的域名 dataType:"json", //对服务器返回的结果进行该数据格式处理 我这里写了json 也可以红xml.text.html 等格式 type:&quo

  • 浅谈Koa2框架利用CORS完成跨域ajax请求

    实现跨域ajax请求的方式有很多,其中一个是利用CORS,而这个方法关键是在服务器端进行配置. 本文仅对能够完成正常跨域ajax响应的,最基本的配置进行说明(深层次的配置我也不会). CORS将请求分为简单请求和非简单请求,可以简单的认为,简单请求就是没有加上额外请求头部的get和post请求,并且如果是post请求,请求格式不能是application/json(因为我对这一块理解不深如果错误希望能有人指出错误并提出修改意见).而其余的,put.post请求,Content-Type为appl

  • .NET的Ajax请求数据提交实例

    本文实例讲述了.NET的Ajax请求数据提交实现方法.分享给大家供大家参考.具体如下: 复制代码 代码如下: <%@ Page Language="C#" Inherits="System.Web.Mvc.ViewPage<dynamic>" %>    <head runat="server">      <title>ajax请求</title>      <link type

  • 解决拦截器对ajax请求的拦截实例详解

    解决拦截器对ajax请求的的拦截 拦截器配置: public boolean preHandle(HttpServletRequest request, HttpServletResponse response,Object obj) throws Exception { //获取判定登陆的session是否存在 String token = (String) request.getSession().getAttribute("token"); String postId = (St

  • JQuery打造PHP的AJAX表单提交实例

    如果你对JQuery的基本语法还不是很熟悉,请搜索本站的教程资源.如果你对PHPMailer用法不熟悉,请查看本站的另一篇文章<使用PHPMailer类库发送电子邮件>. 第一步,创建一个表单HTML页面 这里,我们只展示主要的表单部分HTML结构代码: 复制代码 代码如下: <div id="contact_form"> <form name="contact" method="post" action="

随机推荐