如何以ajax響應的百分比顯示加載狀態？

我想顯示用進度條加載的ajax響應的用戶百分比。有沒有辦法實現它？現在我只顯示一張圖片。如何以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>

來源

2013-05-22 Premshankar Tiwari

有點[研究]（http://stackoverflow.com/questions/10559264/possible-to-calculate-how-much-data-been-loaded-with-ajax） –

有展現真正的百分比兩種方式。簡而言之...

一個 - 舊學校原生JavaScript或jQuery ajax，你需要服務器支持，以及一個不同的URL，它可以給你更新。而且你一直在間隔點擊該URL。

兩個 - HTML5瀏覽器中的現代原生JavaScript，支持XMLHTTPRequest2，也被稱爲AJAX 2，由新的Web和HTML5標準定義。

如果兩個，歡迎來到新網站！
多種功能已添加到瀏覽器中，以增強連接性 - 屬於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的可以用在第二種情況也是如此。畢竟，jQuery是用更少的代碼來幫助你，更多的是做！希望您專注於HTML5和新的Web解決方案，我會指出您從我採取此解決方案的地方獲得的Mozilla DOC - Monitoring Progress in AJAX。

每個瀏覽器現在都有一個網頁文檔（如上面的Mozilla文檔），此外，他們都爲一個名爲Web Platform的常見合作伙伴以及其他有影響力的Web和Internet巨頭做出了貢獻 - 用於共同更新的Web文檔。這是一項正在進行的工作，因此不完整。

另外，在舊的AJAX中沒有本地功能，監視進度。

在老派的方式，你將不得不創建一個間隔函數，將繼續擊中一個單獨的URL來獲取進度更新。您的服務器還必須更新進度並將其作爲來自不同端口的URL的響應發送。

來源

2013-05-23 14:13:41

不知道'XMLHTTPRequest2' ，驚人。 –

這對我不起作用，因爲我有一個非常小的文件來檢索（只有幾個BYTES）;但我的腳本需要相當長的時間來執行;我想這是由於服務器延遲...但我怎麼能區分一個緩慢的服務器卡住的腳本？在開始檢索之前，我會打印一個「請稍候...」的消息，但對於10個字節的輸出，「請稍候」消息的持續時間不會超過10秒，而不會引起用戶對「鎖定的東西」的懷疑。查看http://stackoverflow.com/questions/35482101/how-to-use-jquery-to-use-online-translation-apis/35485375#35485375 – jumpjack

這對javascript來說很好，但我怎樣才能在jQuery中使用它？ –

如何以ajax響應的百分比顯示加載狀態？

回答

相關問題