用jQuery实现多个ajax请求等待

前言

普通,jQuery的函数ajax进行Ajax调用。函数ajax只能开一个Ajax调用。当Ajax调用成功时,执行回调函数。可选地,当Ajax调用返回错误时,调用另一个回调函数。但是,该意义未可知因这些请求的结果开展多个Ajax请求与挂号回调函数。一种状态是,网页使多只Ajax请求于夺用户交互时征集页面不同部分的数码。该页面就于页面获得有数据后才能够进行用户交互。本文介绍了jQuery提供的相同种基于多独Ajax请求来报回调函数的法门。这种办法是依据Deferred对象的定义。

连带代码

第一,在后台的星星点点个ASP.NET Web API函数来领服务器Ajax调用。代码如下:

Ajax 1

后台接受ajax请求代码

若进行单个Ajax调用,可以用jQuery的ajax函数。正面是一个简练的例证:

Ajax 2

ajax调用示例

遂与左的回调函数正在等候单个Ajax调用。jQuery库提供了同种办法来如另回调函数等待多独Ajax调用。此道基于称为Deferred的目标。Deferred对象足以依据Deferrred对象是不是解决要拒绝来报回调函数。以下是Deferred的言传身教。Ajax 3

Deferred示例

留神Deferred对象足以链接。以下是Deferred对象链的示范。

Ajax 4

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对象的成功回调函数Ajax。jQuery库提供了一个吃称when的函数,接受多单Deferred对象并回一个Promise对象的函数。当有Deferred对象为分析时,返回的Promise对象将给解析。当其他Deferred对象被拒绝时,它用被拒。传递给函数的Deferred对象when可以是Deferred对象,Promise对象要jqXHR对象。以下是等多单Ajax请求的代码示例:

Ajax 5

先是,两个变量存储于有限单jQuery
Ajax调用返回的jqXHR对象。然后用鲜独对象传递让函数when。返回的Promise对象when被链接到函数then。函数then为Promise对象上加了处理程序。then函数的第一只参数是一个成功函数,当Promise成功时调用它。then函数的老二个参数是在Promise被驳回时调用的失败函数。失败函数检查每个Ajax调用的状态。如果Ajax调用非到位,它将暂停。注意,由于页面已经履行和倒闭,失败函数仍然可以看超出范围的变量j1跟j2
。这是以JavaScript关闭。闭包是内函数,即使外部函数关闭,也堪拜外部函数中的变量。换句话说,内部函数可以维持首先定义的环境。

 

web前端/H5/javascript学习群:250777811

迎接大家关心我之微信号公众号,公众号名称:web前端EDU。扫下面的亚维码或者藏下面的老二维码关注吧(长论下的第二维码图片、并选择识别图中的亚维码)

 

Ajax 6

相关文章