JSFiddle - React, Tailwind, and code Playground

by Antony Joyson

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
xhr onprogress speed test or some progress

JavaScript

$.ajax({
  xhr: function()
  {
    var xhr = new window.XMLHttpRequest();
    //Upload progress
    xhr.upload.addEventListener("progress", function(evt){
      if (evt.lengthComputable) {
        var percentComplete = evt.loaded / evt.total;
        //Do something with upload progress
        console.log(percentComplete);
      }
    }, false);
    //Download progress
    xhr.addEventListener("progress", function(evt){
      if (evt.lengthComputable) {
        var percentComplete = evt.loaded / evt.total;
        //Do something with download progress
        console.log(percentComplete);
      }
    }, false);
    return xhr;
  },
  type: 'POST',
  url: "http://www.w3schools.com/jquery/demo_test_post.asp",
  data: {name: "Donald Duck",
          city: "Duckburg"},
  success: function(data){
    //Do something success-ish
  }
});

/*******new customised method***********/
(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.");
        }
    }

});