获取JQuery ajax请求进展的最简洁方法是什么？

Question

获取JQuery ajax请求进展的最简洁方法是什么？在普通的javascript中非常简单：只需将回调附加到 {XMLHTTPRequest}.onprogressvar 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);但我这样做，下载HTML数据使用jQuery（一个Ajax网站$.get()或$.ajax()），我想知道这是获得为了一点点进度条来显示它的请求的进展的最佳方式，但奇怪的是，我不是在JQuery文档中找到任何有用的东西......

Answer 1

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

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

Answer 2

jQuery已经实现了promises，因此最好使用这种技术，而不是将事件逻辑移动到options参数。我制作了一个jQuery插件，增加了进步承诺，现在它像其他承诺一样易于使用：

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

在github上查看

Answer 3

jQuery有一个AjaxSetup()函数，允许您注册全局ajax处理程序，例如beforeSend和complete所有ajax调用，以及允许您访问xhr对象以执行您要查找的进度