如何緩沖 Ajax 請求？

Question

我有一個簡單的 Ajax 函數，如下所示：

var x;
var myRequest = new Array();

function CreateXmlHttpReq(handler) {
    var xmlhttp = null;
    try {
        xmlhttp = new XMLHttpRequest();
    } catch (e) {
        try {
            xmlhttp = new ActiveXObject("Msxml2.XMLHTTP");
        } catch (e) {
            xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
        }
    }
    xmlhttp.onreadystatechange = handler;
    return xmlhttp;
}

function getResults() {
    var r = Math.random();
    var someVar = document.getElementById("myvar").value;
    var myUrl = "url/of/my/phpScript.php?";
    myUrl += "r=" + r;
    //encodeURIComponent() instead of escape() when i aspect normal text
    myUrl += "&someVar=" + escape(someVar);
    //startLoading just show an overlay with a small rotating gif
    startLoading();
    x++;
    myRequest[x] = CreateXmlHttpReq(function () {
        printResultHandler(x);
    });
    myRequest[x].open("GET", myUrl);
    myRequest[x].send(null);
}

//example handler
function printResultHandler(x) {
    if (myRequest[x].readyState == 4 && myRequest[x].status == 200) {
        //usually i use innerHTML for quick requests, the DOM for more complex req
        document.getElementById(div).innerHTML = myRequest[x].responseText;
        //this will hide the overlay showed ith startLoading()
        stopLoading();
    }
}

這工作正常。 我只是在返回流量很大（可以是 XML、HTML 或其他任何內容）時遇到一些問題，瀏覽器似乎會“睡着”一段時間。 我不喜歡將大量文本（XML、HTML）合二為一。 處理這個不好。

我想知道是否存在某種方法來緩沖該請求。 當請求完成並返回200狀態時，有沒有辦法逐個獲取 responseText（假設為 2048 字節或逐行）？ 我想是這樣的：

function printResultHandler(x) {
    if (myRequest[x].readyState == 4 && myRequest[x].status == 200) {
        //usually i use innerHTML for quick requests, the DOM for more complex req
        //document.getElementById(div).innerHTML = myRequest[x].responseText;
        var answer;
        while ((answer = readline(myRequest[x].responseText))) {
            //to something;
        }
        //this will hide the overlay showed ith startLoading()
        stopLoading();
    }
}

簡而言之，相當於 PHP 的readdir()或fread() 。

Answer 1

同意，緩沖請求並不是您真正可以做的事情。

您可以考慮通過一組 HTTP 請求錯開用戶對數據的請求，在每個 HTTP 請求返回時對其進行解析和處理。

例如，如果用戶希望請求記錄 1 到 1000，客戶端可以首先請求記錄 1 到 100，處理、解析和呈現它，然后請求記錄 101 到 200，依此類推。 前 100 條記錄會相對較快地顯示出來，過一小段時間后，接下來的 100 條記錄就會顯示出來。 只要在用戶設法處理前 100 條記錄之前顯示后 100 條記錄，就應該沒問題。 完成請求的總時間會更長，但 Web 應用程序的響應速度會更快，感知的任務完成時間會更短。

如果您不只是用數據更新元素的 innerHTML 屬性，您還應該考慮從 XML 切換到 JSON。

要向用戶顯示對 AJAX 請求的響應，必須首先將響應解析為數據結構，然后呈現。 令人驚訝的是，XML 和 JSON 的解析時間幾乎相同。 不同之處在於遍歷和讀取結果數據結構所需的時間。

用於遍歷和訪問已解析響應的 DOM 內數據的瀏覽器函數相對較慢。 瀏覽器 DOM API 方法掩蓋了 DOM 遍歷所涉及的復雜性，並使緩慢的過程看起來既美觀又簡單。

通過解析 JSON 格式的響應來訪問 JavaScript 對象中的數據要快得多。 對於相同的數據集，遍歷 JavaScript 對象比遍歷 DOM 樹快 2 到 3 倍。

在最近的測試中，我使用 10Mb 的源數據對 FireFox 3.1 beta 2 進行了測試，遍歷 XML 響應的 DOM 需要大約 30 秒。 對從相同的原始大數據集填充的 JavaScript 對象執行相同操作大約需要 15 秒。

Answer 2

不，沒有辦法緩沖請求。 如果您返回大量數據，然后嘗試將其一次性全部插入頁面，則解析所有數據總是需要很長時間。

您可能要考慮是否有另一種方法來獲得您想要的結果.. 是否有理由必須使用 AJAX 請求將如此大量的數據插入到頁面中？

Answer 3

您必須手動完成（也就是為自己編寫代碼）。

一個簡單的解決方案如下（C=client，S=server）

• C 發送請求
• S 准備整個輸出
• S 生成某種數據標識符密鑰（例如數據的 md5）
• S 將數據切成塊並保存（並確定塊數）
• S 返回數據標識符（可能還有塊數）
• C 從第一個塊迭代到最后一個，將數據鍵（和塊號）發送給服務器
• S 返回請求的塊
• C 顯示塊（或一個內容正在加載進度條）

需要注意的是，如果您不采用進度條方式而是進行即時處理，那么 S 必須將數據切成塊作為部分正確的代碼片段，C 可以處理這些代碼。