前言

通常，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關閉。閉包是內部函式，即使外部函式關閉，也可以訪問外部函式中的變數。換句話說，內部函式可以保持首先定義的環境。