ajax應(yīng)用越來(lái)越多，大部分ajax處理都是在前臺(tái)顯示1個(gè)"loading...",然后把數(shù)據(jù)提交給服務(wù)器進(jìn)行處理，處理完畢后顯示"處理完畢"。我們能否讓ajax更加友好點(diǎn)，實(shí)時(shí)顯示服務(wù)器處理的進(jìn)度了？這在一些長(zhǎng)時(shí)間的請(qǐng)求中尤其重要，比如上傳文件、發(fā)送郵件、批量處理數(shù)據(jù)。答案當(dāng)然是可以的，不然就不會(huì)寫這個(gè)了，對(duì)吧，^_^。
存在的問(wèn)題：
要解決實(shí)現(xiàn)上面的功能，需要解決下面幾個(gè)問(wèn)題：
1. 服務(wù)器如何在處理一部分?jǐn)?shù)據(jù)后傳遞部分response到瀏覽器。
2、瀏覽器如何能處理服務(wù)器傳遞過(guò)來(lái)部分?jǐn)?shù)據(jù)，并保持http連接直到處理完全完畢。
要解決第1個(gè)問(wèn)題，使用flush讓response分塊進(jìn)行呈現(xiàn)就可以了，具體請(qǐng)參考我另一遍隨筆"flush讓頁(yè)面分塊,逐步呈現(xiàn)";
第2個(gè)問(wèn)題，則需要用到XMLHttpRequest的readyState狀態(tài)，w3c對(duì) readyState 定義如下幾個(gè)值：
UNSENT = 0; // 沒(méi)有發(fā)送請(qǐng)求
OPENED = 1; // 已經(jīng)打開(kāi)http連接
HEADERS_RECEIVED = 2; // 接收到response header
LOADING = 3; // 真正接收response body
DONE = 4; // 請(qǐng)求接收完畢
相信狀態(tài)4大家是天天在用，而我們這里需要用到就是狀態(tài)3。
實(shí)例：
廢話少說(shuō)，代碼實(shí)例比什么文字解釋都管用。我們這里假設(shè)服務(wù)器的1個(gè)處理需要6秒種，每秒種處理1條記錄，總共處理6條記錄，我們需要服務(wù)器每處理完1條數(shù)據(jù)，客戶端則顯示處理進(jìn)度(包括文字和進(jìn)度條)。
服務(wù)器端代碼(下面JSP代碼)：
復(fù)制代碼 代碼如下:
%
// 下面設(shè)置Content-Type:application/x-javascript 是為了適應(yīng)Webkit的瀏覽器(chrome,safari)
response.setHeader("Content-Type","application/x-javascript");
int count = 6; // 處理6條數(shù)據(jù)
for(int i=0;icount;i++){
// 處理完畢一條，輸出結(jié)果到客戶端
out.println(i+1);
out.flush();
// 這里假設(shè)每條數(shù)據(jù)處理時(shí)間為1秒
Thread.currentThread().sleep(1000);
}
%>
html代碼:
復(fù)制代碼 代碼如下:
!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()">提交數(shù)據(jù)/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 ){
// 設(shè)置文本
t.innerHTML = tmpText + "/6";
// 設(shè)置進(jìn)度條
var width = parseInt(tmpText)/6*300;
bg.style.width = width+"px";
}
}
if(xhr.readyState == 4){
// 請(qǐng)求執(zhí)行完畢
t.innerHTML = "執(zhí)行完畢";
bg.style.width = "300px";
}
}
xhr.send(null);
}
/script>
/body>
/html>
運(yùn)行效果圖:
缺點(diǎn)：
看到這里或許你已經(jīng)蠢蠢欲動(dòng)，想自己動(dòng)手試試了。但是注意上面的方法雖好，但也有個(gè)缺點(diǎn)，就是瀏覽器的支持問(wèn)題。目前IE所有版本的瀏覽器都不支持 xhr.readyState == 3狀態(tài)，IE瀏覽器不支持在response響應(yīng)完畢前讀取responseText屬性。 具體可查看MSDN : XMLHttpRequest Object
基于Webkit的瀏覽器支持的不是很好，需要設(shè)置Content-Type：application/x-javascript才行(經(jīng)測(cè)試發(fā)現(xiàn)Content-Type:text/html在有些情況下正常，有些情況下又不正常，而用application/x-javascript都正常)。
看到了缺點(diǎn)后是否又打擊了你的積極性了，其實(shí)針對(duì)IE，我們不需要做太多處理，IE不支持，就不會(huì)顯示進(jìn)度，就變成跟傳統(tǒng)的ajax請(qǐng)求一樣，一直顯示1個(gè)loading直到請(qǐng)求完畢。我們只需要加1個(gè)簡(jiǎn)單的判斷，判斷如果是ie則不執(zhí)行xhr.readyState > 2中的代碼，如果不加判斷，IE下會(huì)報(bào)JS錯(cuò)誤.
DEMO:
demo服務(wù)器不太好，而且在國(guó)外，隨時(shí)可能會(huì)點(diǎn)擊不了,而且有時(shí)候運(yùn)行效果不是很好，大家知曉下，最好是把代碼copy到本地進(jìn)行測(cè)試.
請(qǐng)使用firefox或chrome查看demo,ie查看的效果跟一般的ajax沒(méi)什么不一樣.
http://213.186.44.204:8080/ChunkTest/index.html
轉(zhuǎn)載請(qǐng)注明出處:http://www.cnblogs.com/BearsTaR/。 禁止商用!
您可能感興趣的文章:- AJAX和JSP實(shí)現(xiàn)的基于WEB的文件上傳的進(jìn)度控制代碼
- AJAX 進(jìn)度條實(shí)現(xiàn)代碼
- ajax+php打造進(jìn)度條 readyState各狀態(tài)
- ajax+php打造進(jìn)度條代碼[readyState各狀態(tài)說(shuō)明]
- ajax提交加載進(jìn)度條示例代碼
- 一個(gè)簡(jiǎn)單的ajax上傳進(jìn)度顯示示例
- php+ajax實(shí)現(xiàn)帶進(jìn)度條的大數(shù)據(jù)排隊(duì)導(dǎo)出思路以及源碼
- jquery+php+ajax顯示上傳進(jìn)度的多圖片上傳并生成縮略圖代碼
- jsp+ajax發(fā)送GET請(qǐng)求的方法
- jquery+ajax實(shí)現(xiàn)跨域請(qǐng)求的方法
- asp.net+ajax的Post請(qǐng)求實(shí)例
- 服務(wù)端配置實(shí)現(xiàn)AJAX跨域請(qǐng)求
- 解決ajax跨域請(qǐng)求數(shù)據(jù)cookie丟失問(wèn)題
- django通過(guò)ajax發(fā)起請(qǐng)求返回JSON格式數(shù)據(jù)的方法
- Ajax在請(qǐng)求過(guò)程中顯示進(jìn)度的簡(jiǎn)單實(shí)現(xiàn)
