ajax應用越來越多，大部分ajax處理都是在前台顯示1個"loading...",然後把資料提交給伺服器進行處理，處理完畢後顯示"處理完畢"。我們能否讓ajax更加友好點，即時顯示伺服器處理的進度了？這在一些長時間的請求中尤其重要，比如上傳檔案、發送郵件、批量處理資料。答案當然是可以的，不然就不會寫這個了，對吧，^_^。
ajax應用越來越多，大部分ajax處理都是在前台顯示1個"loading...",然後把資料提交給伺服器進行處理，處理完畢後顯示"處理完畢"。我們能否讓ajax更加友好點，即時顯示伺服器處理的進度了？這在一些長時間的請求中尤其重要，比如上傳檔案、發送郵件、批量處理資料。答案當然是可以的，不然就不會寫這個了，對吧，^_^。
存在的問題：
要解決實現上面的功能，需要解決下面幾個問題：
1. 伺服器如何在處理一部分資料後傳遞部分response到瀏覽器。
2、瀏覽器如何能處理伺服器傳遞過來部分資料，並保持http串連直到處理完全完畢。
要解決第1個問題，使用flush讓response分塊進行呈現就可以了，具體請參考我另一遍隨筆"flush讓頁面分塊,逐步呈現";
第2個問題，則需要用到XMLHttpRequest的readyState狀態，w3c對 readyState 定義如下幾個值：
UNSENT = 0;// 沒有發送請求
OPENED = 1; // 已經開啟http串連
HEADERS_RECEIVED = 2; // 接收到response header
LOADING = 3; // 真正接收response body
DONE = 4; // 請求接收完畢
相信狀態4大家是天天在用，而我們這裡需要用到就是狀態3。
執行個體：
廢話少說，代碼執行個體比什麼文字解釋都管用。我們這裡假設伺服器的1個處理需要6秒種，每秒種處理1條記錄，總共處理6條記錄，我們需要伺服器每處理完1條資料，用戶端則顯示處理進度(包括文字和進度條)。
伺服器端代碼(下面JSP代碼)：
<% // 下面設定Content-Type:application/x-javascript 是為了適應Webkit的瀏覽器(chrome,safari) response.setHeader("Content-Type","application/x-javascript"); int count = 6;//處理6條資料 for(int i=0;i<count;i++){ // 處理完畢一條，輸出結果到用戶端 out.println(i+1); out.flush(); // 這裡假設每條資料處理時間為1秒 Thread.currentThread().sleep(1000); } %>
html代碼:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><style>#divProgress{width:300px;height:24px;position:relative;}#divProgress div{position:absolute;left:0;top:0;height:24px;}#progressBg{background-color:#B9F8F9;z-index:10;}#progressText{z-index:15;text-align:center;width:100%;}</style></head><body> <div id="divProgress"> <div id="progressBg"></div> <div id="progressText"></div> </div> <br /> <button onclick="send()">提交資料</button> <script> var t = document.getElementById("progressText"); var bg = document.getElementById("progressBg");function send(){t.innerHTML = "loading...";bg.style.width = "0px";var xhr = new window.XMLHttpRequest();if(!window.XMLHttpRequest){try {xhr = new window.ActiveXObject("Microsoft.XMLHTTP");} catch(e) {}}xhr.open("post","http://localhost:801/ChunkTest/chunk.jsp?count=6");var oldSize=0;xhr.onreadystatechange = function(){if(xhr.readyState > 2){ var tmpText = xhr.responseText.substring(oldSize); oldSize = xhr.responseText.length; if(tmpText.length > 0 ){ // 設定文本 t.innerHTML = tmpText + "/6"; // 設定進度條 var width = parseInt(tmpText)/6*300; bg.style.width = width+"px";}}if(xhr.readyState == 4){ // 請求執行完畢t.innerHTML = "執行完畢";bg.style.width = "300px";}}xhr.send(null); }</script></body></html>
運行:
缺點：
看到這裡或許你已經蠢蠢欲動，想自己動手試試了。但是注意上面的方法雖好，但也有個缺點，就是瀏覽器的支援問題。目前IE所有版本的瀏覽器都不支援 xhr.readyState == 3狀態，IE瀏覽器不支援在response響應完畢前讀取responseText屬性。 具體可查看MSDN : XMLHttpRequest Object
基於Webkit的瀏覽器支援的不是很好，需要設定Content-Type：application/x-javascript才行(經測試發現Content-Type:text/html在有些情況下正常，有些情況下又不正常，而用application/x-javascript都正常)。
看到了缺點後是否又打擊了你的積極性了，其實針對IE，我們不需要做太多處理，IE不支援，就不會顯示進度，就變成跟傳統的ajax請求一樣，一直顯示1個loading直到請求完畢。我們只需要加1個簡單的判斷，判斷如果是ie則不執行xhr.readyState > 2中的代碼，如果不加判斷，IE下會報JS錯誤.
DEMO:
demo伺服器不太好，而且在國外，隨時可能會點擊不了,而且有時候運行效果不是很好，大家知曉下，最好是把代碼copy到本地進行測試.
請使用firefox或chrome查看demo,ie查看的效果跟一般的ajax沒什麼不一樣.
http://213.186.44.204:8080/ChunkTest/index.html
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
