ajaxレスポンスの読み込み状況をパーセンテージで表示するにはどうすればよいですか？

Question

プログレスバーを使ってロードしたajaxレスポンスのユーザー割合を表示したい。 これを達成する方法はありますか？ 今はイメージを表示しています。ここで

は、私のコードのサンプルです：

$('#loadingDiv').show(); 

$.ajax({ 
     type : 'Get', 
     url : myUrl, 
     success : function(response) { 
      $('#loadingDiv').hide(); 
      populateData(response); 
     }, 
     error: function(x, e) { 
        $('#loadingDiv').hide(); 
      if (x.status == 500 || x.status == 404) { 
        alert("no data found"); 
       } 
     } 
    }); 

HTMLコード：

<div id="loadingDiv"> 
    <img src="loading-img.png"/> 
</div> 

Answer 1

本物の割合を示すように2つの方法があります。簡単に...

- 1つのサーバーのサポートが必要な古い学校のネイティブJavaScriptまたはjQuery ajax、あなたに更新を与えることができる別のURL。そして、あなたはそのURLを一定の間隔で続けます。

二 - 新しいWebおよびHTML5規格で定義されても、AJAX 2として知られているXMLHTTPRequest2をサポートするHTML5ブラウザで近代的なネイティブネイティブのJavaScript、、、。

2人の方は、新しいウェブへようこそ！
HTML5機能の一部である接続性を高めるブラウザに、複数の機能が追加されました。

XMLHTTPRequest2は、AJAXのイベントをJavaScriptなどの進行状況の監視に役立てることができます。

var oReq = new XMLHttpRequest(); 

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

oReq.open(); 

は、その後、あなたが（あなたのケースで進展）の上に取り付けたハンドラを定義することができます：あなたは、実際の進行状況を監視することにより、本物の割合を表示することができます

function updateProgress (oEvent) { 
    if (oEvent.lengthComputable) { 
    var percentComplete = oEvent.loaded/oEvent.total; 
    // ... 
    } else { 
    // Unable to compute progress information since the total size is unknown 
    } 
} 

jQueryのに使用することができます

2番目のケースも同様です。結局のところ、jQueryはより少ないコードでより多くのことを支援するためのものです。

あなたはHTML5と新しいウェブソリューションに焦点を当てていることを願って、Mozilla DOC - Monitoring Progress in AJAXここから私はこの解決策をとってきました。

すべてのブラウザに、Web上のドキュメント（Mozillaのもののようなもの）が追加されました。さらに、それらのすべてがWeb Platformと呼ばれる共通のベンチャーと、他の有力なWebおよびインターネットの巨人ドキュメンテーション。それは進行中の作業なので、完了していません。

また、古いAJAXには、進捗状況を監視するためのネイティブ機能はありません。

旧式の方法では、進捗状況の更新を得るために別のURLを叩くことになる間隔関数を作成する必要があります。また、サーバーは進捗状況を更新し、そのURLからの応答として別のポートから利用できるように送信する必要があります。