how to monitor progress response of ajax request with jquery

Question

How to monitor progress response of ajax request with jquery

I call an API that performs several lookups on the server. One call can result in 5-10 lookups. Each time a lookup is completed, the API appends a string to the GET response. When all lookups are completed, the connection is closed.

I'd like to have a callback that is triggered upon progress and preferrably find aa way of parsing the servers progress response (accessing the data) upon each completed lookup.

My problem is that the progress callback is never called.

This is my code so far. I tried to patch the xmlHttpRequest Object and extend jquery's ajax method.

(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) {

        }
    });

});

});

This is the server's response

['task 1 completed']

\n
\n
\n

['task 3 completed']


\n
\n
\n

['task 4 completed']


...

Request Header

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

Response Header

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

There is not a progress function built into the jQuery ajax API, but you can add an event listener to handle the information.

Check out the answer for this question on how to do it:

What is the cleanest way to get the progress of JQuery ajax request?