首頁 >web前端 >js教程 >使用JQUERY如何實作多個AJAX請求

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

亚连
亚连原創
2018-06-20 17:40:503114瀏覽

下面小編就為大家分享一篇利用JQUERY實現多個AJAX請求等待的實例,具有很好的參考價值,希望對大家有幫助。一起跟著小編過來看看吧

前言通常,jQuery的函數ajax進行Ajax呼叫。函數ajax只能做一個Ajax呼叫。當Ajax呼叫成功時,執行回呼函數。可選地,當Ajax呼叫傳回錯誤時,呼叫另一個回呼函數。

但是,此功能不能根據這些請求的結果進行多個Ajax請求和註冊回呼函數。

一種情況是,網頁讓多個Ajax請求在停用使用者互動時收集頁面不同部分的資料。

該頁面僅在頁面取得所有資料之後才能進行使用者互動。本文介紹了jQuery提供的一種基於多個Ajax請求來註冊回呼函數的方法。

這種方法是基於Deferred物件的概念。相關程式碼首先,在背景的兩個ASP.NET Web API函數來接受伺服器Ajax呼叫。

程式碼如下:

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

# 後台接收

ajax請求程式碼

要進行單一Ajax調用,可以使用jQuery的ajax函數。正面是一個簡單的例子:

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

ajax呼叫範例成功和錯誤的回呼函數正在等待單一Ajax呼叫。 jQuery函式庫提供了一種方法來使任何回呼函數等待多個Ajax呼叫。此方法基於稱為Deferred的物件。 Deferred物件可以根據Deferrred物件是否解決或拒絕來註冊回呼函數。

以下是Deferred的範例

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

#Deferred範例注意Deferred物件可以連結。以下是Deferred物件鏈的範例。

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

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請求

#首先,兩個變數儲存從兩個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中文網其他相關文章!

陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn