获取 JQuery ajax 请求进度的最干净方法是什么？

javascript jquery ajax xmlhttprequest

2022-08-30 05:20:30

在普通的javascript中非常简单：只需要将回调附加到{XMLHTTPRequest}.onprogress

var xhr = new XMLHttpRequest();

xhr.onprogress = function(e){
    if (e.lengthComputable)
        var percent = (e.loaded / e.total) * 100;
};

xhr.open('GET', 'http://www...', true);
xhr.onreadystatechange = function() {
    ...
};
xhr.send(null);

但是我正在做一个ajax网站，使用JQuery（或）下载html数据，我想知道哪个是获取请求进度的最佳方法，以便用一个小进度条显示它，但奇怪的是，我在JQuery文档中没有找到任何有用的东西......$.get()$.ajax()

答案 1

像这样的东西（虽然只有HTML5）：$.ajax

$.ajax({
    xhr: function() {
        var xhr = new window.XMLHttpRequest();
        xhr.upload.addEventListener("progress", function(evt) {
            if (evt.lengthComputable) {
                var percentComplete = evt.loaded / evt.total;
                //Do something with upload progress here
            }
       }, false);

       xhr.addEventListener("progress", function(evt) {
           if (evt.lengthComputable) {
               var percentComplete = evt.loaded / evt.total;
               //Do something with download progress
           }
       }, false);

       return xhr;
    },
    type: 'POST',
    url: "/",
    data: {},
    success: function(data){
        //Do something on success
    }
});

答案 2

jQuery已经实现了承诺，所以最好使用这种技术，而不是将事件逻辑移动到参数。我做了一个jQuery插件，它增加了进度承诺，现在它很容易使用，就像其他承诺一样：options

$.ajax(url)
  .progress(function(){
    /* do some actions */
  })
  .progressUpload(function(){
    /* do something on uploading */
  });

在github上查看