jQuery ajax通过xhr进度 [英] JQuery ajax progress via xhr

问题描述

我试图捕获Ajax请求的进度。我正在关注此链接中的文章 http：//www.dave-bond。 com / blog / 2010/01 / JQuery-ajax-progress-HMTL5 / 。

它没有按预期工作。只要我了解它，带有id progressCounter 的Div 应该包含％的内容，但在我的情况下没有任何反应。任何帮助？

在我看来，像 if（evt.lengthComputable）{不在 XHR

JSFIDDLE： http://jsfiddle.net/bababalcksheep/r86gM/

$ b HTML：

 < div id =progressCounter>< / div>< br> 
< div id =loading>正在载入< / div>< br> 
< div id =data>< / div> 
  

JS：

  var progressElem = $（'＃progressCounter'）; 
 var URL =https://api.github.com/users/mralexgray/repos; 
 $（＃loading）。hide（）; 
 //在#progressCounter中写入内容，稍后将更改为百分比
 progressElem.text（URL）; 
 $ b $ .ajax（{
类型：'GET'，
 dataType：'json'，
 url：URL，
 cache：false，
错误：函数（xhr，ajaxOptions，thrownError）{
 alert（xhr.responseText）; 
 alert（thrownError）; 
}，
 xhr：function（）{ 
 var xhr = new window.XMLHttpRequest（）; 
 //下载进度
 xhr.addEventListener（progress，function（evt）{
 if（evt.lengthComputable）{ 
 var percentComplete = evt.loaded / evt.total; 
 progressElem.html（Math.round（percentComplete * 100）+％）; 
} 
}，false） ; 
 return xhr; 
}，
 beforeSend：function（）{
 $（'＃loading'）。show（）; 
}，
完成：function（）{
 $（＃loading）。hide（）; 
}，
成功：函数（json）{
 $（＃data） .html（data receieved）; 
} 
}）; 
  

解决方案

ProgressEvent.lengthComputable

ProgressEvent.lengthComputable只读属性是一个布尔
标志，指示ProgressEvent所关注的资源是否具有可计算的
长度。如果没有，ProgressEvent.total
属性没有显着的价值。

所以在你的情况下，如果你调试了一下，你会发现 evt.lengthComputable = false; ，所以你不能跟踪进度;

  xhr.addEventListener（progress，function（evt）{
 console.log（evt.lengthComputable）; // false 
 if（evt.lengthComputable）{
 var percentComplete = evt.loaded / evt.total; 
 progressElem.html（Math.round（percentComplete * 100）+％）; 
} 
}，false）; 
  

DEMO

---

FYI

如果 lengthComputable 在 XMLHttpRequestProgressEvent 中为false，这意味着服务器永远不会发送 Content-Length标题在回应中。

I am trying to capture ajax request`s progress. I am following article from this link http://www.dave-bond.com/blog/2010/01/JQuery-ajax-progress-HMTL5/.

It is not working as expected. Div with id progressCounter should have something in it with % as far as i understand it but nothing happens in my case. Any Help ?

It seems to me like if (evt.lengthComputable) { is not working in XHR

JSFIDDLE: http://jsfiddle.net/bababalcksheep/r86gM/

HTML:

<div id="progressCounter"></div><br>
<div id="loading">Loading</div><br>
<div id="data"></div>

JS:

var progressElem = $('#progressCounter');
var URL = "https://api.github.com/users/mralexgray/repos";
$("#loading").hide();
// write something in #progressCounter , later will be changed to percentage
progressElem.text(URL);

$.ajax({
    type: 'GET',
    dataType: 'json',
    url: URL,
    cache: false,
    error: function (xhr, ajaxOptions, thrownError) {
        alert(xhr.responseText);
        alert(thrownError);
    },
    xhr: function () {
        var xhr = new window.XMLHttpRequest();
        //Download progress
        xhr.addEventListener("progress", function (evt) {
            if (evt.lengthComputable) {
                var percentComplete = evt.loaded / evt.total;
                progressElem.html(Math.round(percentComplete * 100) + "%");
            }
        }, false);
        return xhr;
    },
    beforeSend: function () {
        $('#loading').show();
    },
    complete: function () {
        $("#loading").hide();
    },
    success: function (json) {
        $("#data").html("data receieved");
    }
});

解决方案

ProgressEvent.lengthComputable

The ProgressEvent.lengthComputable read-only property is a Boolean flag indicating if the resource concerned by the ProgressEvent has a length that can be calculated. If not, the ProgressEvent.total property has no significant value.

So in your case if you debug a little , you will find evt.lengthComputable = false; so you can not trace the progress;

    xhr.addEventListener("progress", function (evt) {
        console.log(evt.lengthComputable); // false
        if (evt.lengthComputable) {
            var percentComplete = evt.loaded / evt.total;
            progressElem.html(Math.round(percentComplete * 100) + "%");
        }
    }, false);

DEMO

---

FYI

If lengthComputable is false within the XMLHttpRequestProgressEvent, that means the server never sent a Content-Length header in the response.

这篇关于jQuery ajax通过xhr进度的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！