0

XHRオブジェクトの「progress」イベントを使用してダウンロードの進行状況を取得したいと思います。

MDNのサンプルコードは次のとおりです

var req = new XMLHttpRequest();

req.addEventListener("progress", updateProgress, false);
req.addEventListener("load", transferComplete, false);
req.addEventListener("error", transferFailed, false);
req.addEventListener("abort", transferCanceled, false);

req.open();

...

// progress on transfers from the server to the client (downloads)
function updateProgress(evt) {
  if (evt.lengthComputable) {
    var percentComplete = evt.loaded / evt.total;
    ...
  } else {
    // Unable to compute progress information since the total size is unknown
  }
}

function transferComplete(evt) {
  alert("The transfer is complete.");
}

function transferFailed(evt) {
  alert("An error occurred while transferring the file.");
}

function transferCanceled(evt) {
  alert("The transfer has been canceled by the user.");
}

同様のコードを記述しましlengthComputableたが、progressイベントのフィールドがfalseであることが判明しました。loadedフィールドは有限値ですが、ゼロtotalに設定されています。

上記のコード例のコメントから、意味のあるダウンロードの進行状況を計算するために、ブラウザーがHTTP応答で十分な情報を取得していないことがわかります。

これを機能させるための応答を書く正しい方法は何ですか？私のテストで見た応答にはとがTransfer-encoding: chunkedありContent-Length: 8ます。TornadoWebサーバーから生成しています。

4

1 に答える 1

3

チャンク転送エンコーディングでは、応答の全長はサーバーによって示されないため、事前にクライアントに認識されません。

あなたは2つのことを試すことができます。

  • を使用した通常のアプローチを優先して、チャンク転送エンコーディングを無効にしContent-Lengthます。これは、ProgressEvents仕様に必要なものです。しかし、トルネードでこれが可能かどうか/どのように可能かはわかりません。

  • または、のようなカスタム応答ヘッダーに全長を含めますX-Total-Length。次に、次のようなコードを使用してパーセンテージを決定します。

    function updateProgress(evt) {
  var total = evt.lengthComputable ?
              evt.total : parseInt(req.getResponseHeader('X-Total-Length'));
  if (total) {
    var percentComplete = evt.loaded / total;
    // ...
  }
}
于 2012-06-27T08:32:13.947 に答える