什么是管理多個ajax請求的正確方法？

Question

我們都已經在AJAX教程中看到了一些示例，這些示例發送了一些數據。 它們全部（或多或少）看起來像：

var http = createRequestObject(); // shared between printResult() and doAjax()

function createRequestObject() { /* if FF/Safari/Chrome/IE ... */ ... }

function printResult() 
{ 
    if (http.readyState == 4) { ... } 
}

function doAjax() {
    var request = 'SomeURL';
    http.open('post', request);
    http.onreadystatechange = printResult;
    data = ...; // fill in the data
    http.send(data);
}

// trigger doAjax() from HTML code, by pressing some button

這是我不完全了解的情況：如果快速按幾次按鈕該怎么辦？ doAjax（）是否應該以某種方式重新初始化http對象？ 如果對象被重新初始化，那么已經在播出的請求又會如何呢？

PS：主持人：這個問題可能與社區維基有關。 如此處所述（ https://meta.stackexchange.com/questions/67581/community-wiki-checkbox-missing-in-action）-如果我理解正確-請適當地標記此問題。

Answer 1

由於AJAX具有異步特性，因此每次單擊按鈕都會引發一個異步事件，該事件將在FROM / TO服務器中獲取/發布一些數據。 您提供了一個回調，因此它將在服務器完成數據處理后被觸發多次。

默認情況下，這是正常行為，您不應重新初始化http對象。 如果要呈現多個發送操作，則必須手動執行此操作（例如，在進行首次呼叫時禁用按鈕）。

我還建議使用jQuery $ .ajax，因為它封裝了許多這些詳細信息。

Answer 2

確保當今存在無數的圖書館，它們執行得體的工作，應在生產環境中使用。 但是，我的問題是關於引擎蓋下的細節。 所以在這里，我發現了類似lamda-calculus的方式，每個請求都有專用的請求對象。 這些對象顯然將傳遞給回調函數，當響應到達時調用該回調函數：

function printResult(http) {
  if (http.readyState == 4) { ... } 
  ...
}

function doAjax() {
    var http = createRequestObject();       
    var request = 'SomeURL';

    http.open('get', request);      
    http.onreadystatechange = function() { printResult(http); };
    http.send(null);
    return false; 
} 

在Chrome和IE9下成功測試。

Answer 3

我使用了每頁請求隊列來處理這種情況（以抑制重復的請求並確保請求的順序），但是可能會有更標准化的解決方案。

由於默認情況下未提供此功能，因此您需要在頁面（或鏈接腳本）中的JavaScript中實現它。 單擊按鈕將向隊列添加請求，而不是啟動Ajax請求。 如果隊列為空，請執行Ajax請求，並使用回調刪除隊列中的條目並執行下一個條目（如果有）。

另請參閱： 如何使用jQuery實現ajax請求隊列