JQuery download progress

HTML

<script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
Downloaded percent: <div id="percentDownload"></div><br />
Downloaded bytes: <div id="downloadSize"></div><br />
Size bytes: <div id="allSize"></div><br />
<button onclick="download();">Download</button>

JavaScript

function download() {
    $.ajax({
        url: 'http://md.speedtest.rcn.net/ModemTest50M',
        type: "GET",
        data: {},
        progress: function(evt) {
            if (evt.lengthComputable) {
                var percentComplete = 100 * evt.loaded / evt.total;
                $("#percentDownload").html(percentComplete);
                $("#downloadSize").html(evt.loaded);
                $("#allSize").html(evt.total);
            };
        },
        complete: function(jqXhr, textStatus) {
            //
        }
    });
};

// https://github.com/englercj/jquery-ajax-progress
(function($, window, undefined) {
    //is onprogress supported by browser?
    var hasOnProgress = ("onprogress" in $.ajaxSettings.xhr());
    //If not supported, do nothing
    if (!hasOnProgress) {
        return;
    };
    //patch ajax settings to call a progress callback
    var oldXHR = $.ajaxSettings.xhr;
    $.ajaxSettings.xhr = function() {
        var xhr = oldXHR();
        if(xhr instanceof window.XMLHttpRequest) {
            xhr.addEventListener('progress', this.progress, false);
        };
        if(xhr.upload) {
            xhr.upload.addEventListener('progress', this.progress, false);
        };
        return xhr;
    };
})(jQuery, window);