XMLHttpRequest でデータ転送の進行状況を追跡するにはどうすればよいですか?

XMLHttpRequest の進行状況の監視

XMLHttpRequest を使用すると、Web アプリケーションでデータを非同期に送受信できます。 XMLHttpRequest の進行状況、特にアップロードおよびダウンロードされたバイト数を追跡​​することはできますか?

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

アップロードされたバイト数の進行状況を取得するのは比較的簡単です。 xhr.upload.onprogress イベントを利用します。ブラウザは、アップロードされたデータ サイズとファイルの合計サイズを比較することによって進行状況を計算します。

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

ブラウザは通常、ダウンロードされたバイト数の進行状況を監視するのがより困難です。応答の合計サイズはわかりません。回避策としては、サーバー側スクリプトで Content-Length ヘッダーを設定して、合計応答サイズを示す必要があります。これにより、ブラウザでダウンロードの進行状況を計算できるようになります。

例

既知のサイズの zip ファイルを読み取って送信するサーバー スクリプトを考えてみましょう:

<?php
$filesize = filesize('test.zip');
header("Content-Length: " . $filesize);
readfile('test.zip');
?>

以下の JavaScript コードは、Content-Length ヘッダーを使用してダウンロードの進行状況を監視できます。

<code class="javascript">function updateProgress(evt) {
   if (evt.lengthComputable) {
      // evt.loaded: Bytes received by the browser
      // evt.total: Total bytes specified in the 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) 
        {  
             //run any callback here
        }  
    };  
    req.send(); 
}</code>

このソリューションにより、更新のためにサーバーにポーリングする必要がある大きなファイルであってもダウンロードの進行状況を監視できます。理想的ではありません。

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