利用JQUERY實(shí)現(xiàn)多個(gè)AJAX請(qǐng)求等待的實(shí)例
前言通常,jQuery的函數(shù)ajax進(jìn)行Ajax調(diào)用。函數(shù)ajax只能做一個(gè)Ajax調(diào)用。當(dāng)Ajax調(diào)用成功時(shí),執(zhí)行回調(diào)函數(shù)??蛇x地,當(dāng)Ajax調(diào)用返回錯(cuò)誤時(shí),調(diào)用另一個(gè)回調(diào)函數(shù)。
但是,該功能不能根據(jù)這些請(qǐng)求的結(jié)果進(jìn)行多個(gè)Ajax請(qǐng)求和注冊(cè)回調(diào)函數(shù)。
一種情況是,網(wǎng)頁(yè)使多個(gè)Ajax請(qǐng)求在禁用用戶交互時(shí)收集頁(yè)面不同部分的數(shù)據(jù)。
該頁(yè)面僅在頁(yè)面獲取所有數(shù)據(jù)之后才能進(jìn)行用戶交互。本文介紹了jQuery提供的一種基于多個(gè)Ajax請(qǐng)求來注冊(cè)回調(diào)函數(shù)的方法。
這種方法是基于Deferred對(duì)象的概念。相關(guān)代碼首先,在后臺(tái)的兩個(gè)ASP.NET Web API函數(shù)來接受服務(wù)器Ajax調(diào)用。
代碼如下:
后臺(tái)接收
ajax請(qǐng)求代碼
要進(jìn)行單個(gè)Ajax調(diào)用,可以使用jQuery的ajax函數(shù)。正面是一個(gè)簡(jiǎn)單的例子:
ajax調(diào)用示例成功和錯(cuò)誤的回調(diào)函數(shù)正在等待單個(gè)Ajax調(diào)用。jQuery庫(kù)提供了一種方法來使任何回調(diào)函數(shù)等待多個(gè)Ajax調(diào)用。此方法基于稱為Deferred的對(duì)象。Deferred對(duì)象可以根據(jù)Deferrred對(duì)象是否解決或拒絕來注冊(cè)回調(diào)函數(shù)。
以下是Deferred的示例
Deferred示例注意Deferred對(duì)象可以鏈接。以下是Deferred對(duì)象鏈的示例。
Deferred對(duì)象有一個(gè)方法叫做promise。它返回一個(gè)Promise對(duì)象。Promise對(duì)象暴露了Deferred方法的一個(gè)子集,以防止其狀態(tài)被更改。
這意味著防止Deferred對(duì)象被手動(dòng)解析或拒絕。
Promise對(duì)象公開以下Deferred方法:then,done,fail,always,pipe,progress,state,和 promise。
它不會(huì)公開以下Deferred方法:resolve,reject,notify,resolveWith,rejectWith 和 notifyWith。promise對(duì)象可以被視為一個(gè)Deferred對(duì)象,該對(duì)象無法手動(dòng)更改該狀態(tài)。
jQuery 的ajax函數(shù)返回一個(gè)jqXHR對(duì)象。
這個(gè)jqXHR對(duì)象有兩個(gè)重要的事實(shí)。
首先,一個(gè)jqXHR對(duì)象是XMLHTTPRequest對(duì)象的超集。
例如,一個(gè)jqXHR對(duì)象可以通過引用它的readyState屬性來查詢XMLHTTPRequest的狀態(tài)。
如果其readyState為4,則Ajax請(qǐng)求完成。
其次,一個(gè)jqXHR對(duì)象實(shí)現(xiàn)了Promise接口,并公開了所有的Promise方法。
基本上,一個(gè)jqXHR 對(duì)象可以被當(dāng)作一個(gè)Promise對(duì)象。
例如,done方法可以用作jqXHR對(duì)象的成功回調(diào)函數(shù)。
jQuery庫(kù)提供了一個(gè)被稱為when的函數(shù),接受多個(gè)Deferred對(duì)象并返回一個(gè)Promise對(duì)象的函數(shù)。
當(dāng)所有Deferred對(duì)象被解析時(shí),返回的Promise對(duì)象將被解析。當(dāng)任何Deferred對(duì)象被拒絕時(shí),它將被拒絕。
傳遞給函數(shù)的Deferred對(duì)象when可以是Deferred對(duì)象,Promise對(duì)象或jqXHR對(duì)象。
以下是等待多個(gè)Ajax請(qǐng)求的代碼示例
首先,兩個(gè)變量存儲(chǔ)從兩個(gè)jQuery Ajax調(diào)用返回的jqXHR對(duì)象。
然后將兩個(gè)對(duì)象傳遞給函數(shù)when。返回的Promise對(duì)象when被鏈接到函數(shù)then。
函數(shù)then為Promise對(duì)象添加了處理程序。
then函數(shù)的第一個(gè)參數(shù)是一個(gè)成功函數(shù),當(dāng)Promise成功時(shí)調(diào)用它。
then函數(shù)的第二個(gè)參數(shù)是在Promise被拒絕時(shí)調(diào)用的失敗函數(shù)。
失敗函數(shù)檢查每個(gè)Ajax調(diào)用的狀態(tài)。如果Ajax調(diào)用未完成,它將中止。注意,由于頁(yè)面已執(zhí)行和關(guān)閉,失敗函數(shù)仍然可以訪問超出范圍的變量j1和j2 。
這是因?yàn)镴avaScript關(guān)閉。閉包是內(nèi)部函數(shù),即使外部函數(shù)關(guān)閉,也可以訪問外部函數(shù)中的變量。換句話說,內(nèi)部函數(shù)可以保持首先定義的環(huán)境。
以上這篇利用JQUERY實(shí)現(xiàn)多個(gè)AJAX請(qǐng)求等待的實(shí)例就是小編分享給大家的全部?jī)?nèi)容了,希望能給大家一個(gè)參考,也希望大家多多支持腳本之家。
相關(guān)文章
jQuery統(tǒng)計(jì)指定子元素?cái)?shù)量的方法
這篇文章主要介紹了jQuery統(tǒng)計(jì)指定子元素?cái)?shù)量的方法,涉及jQuery可以通過>訪問子標(biāo)簽的技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-03-03
jQuery彈出下拉列表插件(實(shí)現(xiàn)kindeditor的@功能)
這篇文章主要介紹了jQuery彈出下拉列表插件(實(shí)現(xiàn)kindeditor的@功能)的相關(guān)資料,非常不錯(cuò),具有參考借鑒價(jià)值,需要的朋友可以參考下2016-08-08
jQuery 打造動(dòng)態(tài)漸變按鈕 詳細(xì)圖文教程
這是寫給web設(shè)計(jì)者和前端開發(fā)者的教程,我們將演示如何使用Photoshop創(chuàng)建按鈕的sprite圖,然后是如何使用jQurey打造動(dòng)態(tài)漸變效果。2010-04-04
jQuery加密密碼到cookie的實(shí)現(xiàn)代碼
本文通過實(shí)例代碼給大家分享了jquery 加密密碼到cookie的實(shí)現(xiàn)方法,非常不錯(cuò),具有參考借鑒價(jià)值,需要的朋友參考下吧2017-04-04
jQuery實(shí)現(xiàn)鼠標(biāo)經(jīng)過彈出提示信息的地圖熱點(diǎn)效果
這篇文章主要介紹了jQuery實(shí)現(xiàn)鼠標(biāo)經(jīng)過彈出提示信息的地圖熱點(diǎn)效果,涉及jquery鼠標(biāo)事件及頁(yè)面元素樣式的動(dòng)態(tài)操作技巧,非常具有實(shí)用價(jià)值,需要的朋友可以參考下2015-08-08

