add XHR2 progress events to jQuery.ajax

jquery.ajax.progress.js

(function addXhrProgressEvent($) {
    var originalXhr = $.ajaxSettings.xhr;
    $.ajaxSetup({
        progress: function() { console.log("standard progress callback"); },
        xhr: function() {
            var req = originalXhr(), that = this;
            if (req) {
                if (typeof req.addEventListener == "function") {
                    req.addEventListener("progress", function(evt) {
                        that.progress(evt);
                    },false);
                }
            }
            return req;
        }
    });
})(jQuery);


// usage:
// note, if testing locally, size of file needs to be large enough
// to allow time for events to fire

$.ajax({
    url: "./json.js",
    type: "GET",
    dataType: "json",
    complete: function() { console.log("Completed."); },
    progress: function(evt) {
        if (evt.lengthComputable) {
            console.log("Loaded " + parseInt( (evt.loaded / evt.total * 100), 10) + "%");
        }
        else {
            console.log("Length not computable.");
        }
    }

});

Hi,
Really useful patch. Thanks!

But how can I detect if this patch has already been applied in another js script on a page?
eg: I might have two plugins which included this patch. The second time this is included, it seems to break it.

Cheers!

Muito Bom!

I made a plugin, that adds support of progress promise

Please how use it ?

Hi,

What does it mean? " Length not computable."
How will it work in jquery-3.1.1?

Thanks

Length not computable
http://stackoverflow.com/questions/22502943/jquery-ajax-progress-via-xhr/43519513#43519513

Not working for me on cpanel server :-(

I have tried with exactly what u have given. However, this worked in localhost !