Web ブラウザで XMLHttpRequest の進行状況の更新を追跡するにはどうすればよいですか?

XMLHttpRequest の進行状況更新の取得

Web ブラウザは、クライアント/サーバー間データ交換用の XMLHttpRequest (XHR) オブジェクトを提供します。標準の XHR API には固有の進行状況追跡機能がありませんが、データ転送の進行状況を監視する方法はあります。

アップロードされたバイト数:

XHR は xhr.upload を公開します。データアップロードの進行状況を監視するための onprogress イベント。ブラウザは合計データ サイズとアップロード量の両方を追跡するため、正確な進行状況情報を提供できます。

ダウンロードされたバイト数:

ダウンロードの進行状況を追跡することは、より困難です。ブラウザは、サーバーから送信されるデータのサイズを、データが到着するまで知りません。解決策の 1 つは、サーバー スクリプトに Content-Length ヘッダーを設定して、送信されるデータの合計サイズを示すことです。このヘッダーを配置すると、ブラウザはダウンロードの進行状況を正確に監視できます。

実装例:

次のコード例は、jQuery UI を使用したファイル アップロードの進行状況の追跡を示しています。進行状況バーを表示するには:

<code class="javascript">function updateProgress(evt) {
  if (evt.lengthComputable) {
    // evt.loaded: bytes received
    // evt.total: total bytes (from the Content-Length header)
    var percentComplete = (evt.loaded / evt.total) * 100;
    $('#progressbar').progressbar('option', 'value', percentComplete);
  }
}

function sendreq(evt) {
  var req = new XMLHttpRequest();
  $('#progressbar').progressbar();
  req.onprogress = updateProgress;
  req.open('GET', 'test.php', true);
  req.onreadystatechange = function (aEvt) {
    if (req.readyState == 4) {
      // Handle the response here
    }
  };
  req.send();
}</code>

サーバー側スクリプトで Content-Length ヘッダーを設定すると、データのアップロードとダウンロードの両方の進行状況を正確に追跡できます。

結論:

標準の XHR API には進行状況追跡機能が組み込まれていませんが、上記の手法を使用すると、開発者は Web アプリケーションでのデータ転送の進行状況を監視できます。適切な Content-Length ヘッダーを設定し、JavaScript イベント ハンドラーを利用することで、開発者はユーザーにリアルタイムの進行状況の更新を提供する直感的で使いやすいインターフェイスを作成できます。

以上がWeb ブラウザで XMLHttpRequest の進行状況の更新を追跡するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。