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.");
        }
    }

});

Wizardry! Thanks :)

this is great, thanks!

Have you tested this with Jquery 1.9. I cannot get it to work. Are both of these blocks of code supposed to belong in $.ready?

Hi @rbrigby - I just tested with jQuery 1.9.1 and it works fine. jQuery needs to be loaded. Also update the url, type and dataType attributes as per your test file.

You could also use xhrFields

$.ajax({
  url: '/foobar',
  xhrFields: {
    onprogress: function(e) {
        if (evt.lengthComputable) {
            console.log("Loaded " + Number( (e.loaded / e.total * 100)) + "%");
        }
        else {
            console.log("Length not computable.");
        }
    }
  }
});

+@shinuza

evt should be e (and there's no need for Number here):

$.ajax({
    url: '/foobar',
    xhrFields: {
        onprogress: function (e) {
            if (e.lengthComputable) {
                console.log('Loaded '+ (e.loaded / e.total * 100) + '%');
            } else {
                console.log('Length not computable.');
            }
        }
    }
});

For progress events specific to uploading, maybe following change is needed on line #7, #8 and #9

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

I want to do this for progress bar.How can I do this.Cna you write codes?

how can I preload percentage html page with ajax and jquery?

hi,i test your code ,but i find that the code "console.log("Loaded " + parseInt( (evt.loaded / evt.total * 100), 10) + "%");" just only log one time,it just print out "100%" only.how can i do?

@susamcsx your file is to small!

Agree with susamcsx.
It works very fyn in mozzila, but in chrome, it instantly reaches to 100% no matter what file size is
if file is very large, even at that time it reached to 100 instantly.
Please help me to get out this situation, i am almost stuck now with problem from last 3 hours

added support for the global ajax events

(function addXhrProgressEvent($) {
    var originalXhr = $.ajaxSettings.xhr;

    $.ajaxSetup({
        progress: $.noop,
        xhr: function() {
            var xhr = originalXhr(), that = this;
            if (xhr) {
                if (typeof xhr.addEventListener == "function") {
                    xhr.addEventListener("progress", function(event) {
                        that.progress(event);

                        if (that.global) {
                            var event = $.Event('ajaxProgress', event);
                            event.type = 'ajaxProgress';
                            $(document).trigger(event, [xhr]);
                        }
                    },false);
                }
            }
            return xhr;
        }
    });
})(jQuery);

the problem is that it can be more than one request at a time, so the only one possibility is try to use xhr.responseURL to indentify the requests

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 !