如何使用jquery監控ajax請求的進度響應

Question

如何使用jquery監控ajax請求的進度響應

我調用了一個在服務器上執行多次查找的 API。 一次調用可能會導致 5-10 次查找。 每次完成查找時，API 都會在 GET 響應中附加一個字符串。 當所有查找完成后，連接關閉。

我希望有一個在進度時觸發的回調，並且最好在每次完成查找時找到解析服務器進度響應（訪問數據）的方法。

我的問題是從未調用進度回調。

到目前為止，這是我的代碼。 我試圖修補 xmlHttpRequest 對象並擴展 jquery 的 ajax 方法。

(function addXhrProgressEvent($) {
    var originalXhr = $.ajaxSettings.xhr;
    $.ajaxSetup({
        xhr : function() {
            var req = originalXhr(), that = this;
            if (req) {
                if ( typeof req.addEventListener == "function" && that.progress !== undefined) {
                    req.addEventListener("progress", function(evt) {
                        that.progress(evt);
                    }, false);
                }
                if ( typeof req.upload == "object" && that.progressUpload !== undefined) {
                    req.upload.addEventListener("progress", function(evt) {
                        that.progressUpload(evt);
                    }, false);
                }
            }
            return req;
        }
    });
})(jQuery); 

$('#update').on('click', function(e) {
    e.preventDefault();

    var json = $.ajax({
        headers : {
            'Authorization' : "Basic " + btoa("abced:becd")
        },
        url : "http://123.123.123.123:5487/api/v1/check/" + $(this).attr('data-key'),
        type : "GET",
        crossDomain : true,
        dataType : "text",
        async : false,
        progress : function(evt) {
            /*this does not fire*/
            alert('callback fired!');
            /*this does not fire*/
            if (evt.lengthComputable) {
                console.log("Loaded " + parseInt((evt.loaded / evt.total * 100), 10) + "%");
            } else {
                console.log("Length not computable.");
            }
        },
        success : function(data, textStatus, jqXHR) {

        },
        error : function(jqXHR, textStatus, errorThrown) {

        }
    });

});

});

這是服務器的響應

['task 1 completed']

\n
\n
\n

['task 3 completed']


\n
\n
\n

['task 4 completed']


...

請求頭

Accept  text/plain, */*; q=0.01
Accept-Encoding gzip, deflate
Accept-Language de,en-US;q=0.7,en;q=0.3
Authorization   Basic 12123456020600662232112311==
Host    123.123.123.123:1234
Origin  http://123.123.123.132
Referer http://123.123.123.123/index.php/db/SSRelaunch
User-Agent  Mozilla/5.0 (Windows NT 6.1; WOW64; rv:30.0) Gecko/20100101 Firefox/30.0

響應頭

Access-Control-Allow-Head...    X-Requested-With, Content-Type, Authorization
Access-Control-Allow-Meth...    GET,POST,PUT,OPTIONS
Access-Control-Allow-Orig...    *
Content-Length  100000
Content-Type    text/plain
Date    Mon, 28 Jul 2014 18:06:27 GMT
Server  BaseHTTP/0.3 Python/2.7.3

Answer 1

jQuery ajax API 中沒有內置進度函數，但您可以添加一個事件偵聽器來處理信息。

查看此問題的答案，了解如何操作：

獲取 JQuery ajax 請求進度的最干凈方法是什么？