私はAjaxリクエストの進行状況をキャプチャしようとしています。このリンクから記事をフォローしていますhttp://www.dave-bond.com/blog/2010/01/JQuery-ajax-progress-HMTL5/。
期待通りに動作しません。部門ID付き進捗カウンター私の理解では、% に何かが含まれているはずですが、私のケースでは何も起こりません。何か助けはありますか?
if (evt.lengthComputable) {私にはうまく機能していないように思えます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");
}
});
ベストアンサー1
ProgressEvent.length計算可能
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);
デモ
ご参考までに
lengthComputable内で が false の場合XMLHttpRequestProgressEvent、サーバーはContent-Length header応答で を送信しなかったことを意味します。