XMLHttpRequest の進(jìn)行狀況の監(jiān)視: 総合ガイド

標(biāo)準(zhǔn)の XMLHttpRequest (XHR) API には進(jìn)行狀況追跡のサポートが組み込まれていないため、大きなファイル中に進(jìn)行狀況バーを表示する作業(yè)が妨げられます。アップロードします。ただし、多くのブラウザは、進(jìn)行狀況の監(jiān)視を可能にする非標(biāo)準(zhǔn)の拡張機(jī)能を提供しています。

アップロードされたバイト數(shù)

アップロードされたバイト數(shù)の進(jìn)行狀況を監(jiān)視するには、xhr.upload.onprogress イベントを利用します。 。ブラウザは、アップロードされるファイルのサイズとすでに送信されたデータ量の両方を認(rèn)識しているため、アップロードの進(jìn)行狀況を判斷できます。

ダウンロードされたバイト數(shù)

ブラウザーは転送されるデータの合計(jì)サイズを事前に認(rèn)識していないため、ダウンロードされるバイト數(shù)の進(jìn)行狀況 (xhr.responseText を使用する場合) はより複雑になります。解決策の 1 つは、サーバー スクリプトに Content-Length ヘッダーを設(shè)定して、予想される合計(jì)バイト サイズを指定することです。

たとえば、サーバー スクリプトが 5 秒の ZIP ファイルを読み取る場合、ヘッダーを次のように設(shè)定できます。 :

<code class="php">$filesize = filesize('test.zip');
header("Content-Length: " . $filesize); // Set header length
readfile('test.zip');
exit 0;</code>

ヘッダーを設(shè)定することにより、ブラウザは応答の全長を決定し、それに応じて受信バイトを監(jiān)視できます。

イベント監(jiān)視

アップロードとダウンロードの両方の進(jìn)行狀況を監(jiān)視するには、次のイベント リスナーを使用します。

<code class="javascript">// Event listener for upload progress
xhr.upload.onprogress = function(evt) {
  if (evt.lengthComputable) {
    var uploadPercentage = (evt.loaded / evt.total) * 100;
    // Update progress bar or display percentage
  }
};

// Event listener for download progress
xhr.onprogress = function(evt) {
  if (evt.lengthComputable) {
    var downloadPercentage = (evt.loaded / evt.total) * 100;
    // Update progress bar or display percentage
  }
};</code>

例

この例では、次を使用してファイルのダウンロード中の進(jìn)行狀況を監(jiān)視します。 jQuery UI のプログレス バー:

<code class="javascript">function updateProgress(evt) {
  if (evt.lengthComputable) {
    var percentComplete = (evt.loaded / evt.total) * 100;
    $('#progressbar').progressbar("option", "value", percentComplete);
  }
}

function sendRequest() {
  var req = new XMLHttpRequest();
  $('#progressbar').progressbar();
  req.onprogress = updateProgress;
  req.onloadstart = function() {
    updateProgress({ loaded: 0, total: 0 });
  };
  req.open('GET', 'test.php', true);
  req.send();
}

// Sending the request
sendRequest();</code>

これらの手法を組み込むことで、XMLHttpRequest 操作の進(jìn)行狀況を効果的に監(jiān)視でき、大規(guī)模なファイル転送中のよりユーザー フレンドリーなエクスペリエンスが可能になります。

以上がXMLHttpRequest 操作、特に大きなファイルのアップロードとダウンロードの進(jìn)行狀況を追跡するにはどうすればよいですか?の詳細(xì)內(nèi)容です。詳細(xì)については、PHP 中國語 Web サイトの他の関連記事を參照してください。