使用JQUERY如何實作多個AJAX請求

下面小編就為大家分享一篇利用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關閉。閉包是內部函數，即使外部函數關閉，也可以存取外部函數中的變數。換句話說，內部函數可以保持首先定義的環境。

上面是我整理給大家的，希望今後對大家有幫助。

相關文章：

使用webpack如何實作檔案打包

#

詳細介紹ES6中的代理模式（Proxy）

建構webpack的詳細介紹

在Vue中詳細介紹$attrs屬性

#

以上是使用JQUERY如何實作多個AJAX請求的詳細內容。更多資訊請關注PHP中文網其他相關文章！