XMLHttpRequest の進行状況更新の取得

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

Bytes Upload:

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

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

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

実装例:

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

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();
}

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

結論:

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