古风小说,官场小说排行榜

主頁 > 知識庫 > 讓ajax更加友好的實現(xiàn)方法(實時顯示后臺處理進度。)

讓ajax更加友好的實現(xiàn)方法(實時顯示后臺處理進度。)

ajax應(yīng)用越來越多，大部分ajax處理都是在前臺顯示1個"loading...",然后把數(shù)據(jù)提交給服務(wù)器進行處理，處理完畢后顯示"處理完畢"。我們能否讓ajax更加友好點，實時顯示服務(wù)器處理的進度了？這在一些長時間的請求中尤其重要，比如上傳文件、發(fā)送郵件、批量處理數(shù)據(jù)。答案當(dāng)然是可以的，不然就不會寫這個了，對吧，^_^。

存在的問題：
要解決實現(xiàn)上面的功能，需要解決下面幾個問題：

1. 服務(wù)器如何在處理一部分數(shù)據(jù)后傳遞部分response到瀏覽器。
2、瀏覽器如何能處理服務(wù)器傳遞過來部分數(shù)據(jù)，并保持http連接直到處理完全完畢。

要解決第1個問題，使用flush讓response分塊進行呈現(xiàn)就可以了，具體請參考我另一遍隨筆"flush讓頁面分塊,逐步呈現(xiàn)";
第2個問題，則需要用到XMLHttpRequest的readyState狀態(tài)，w3c對 readyState 定義如下幾個值：
UNSENT = 0; // 沒有發(fā)送請求
OPENED = 1; // 已經(jīng)打開http連接
HEADERS_RECEIVED = 2; // 接收到response header
LOADING = 3; // 真正接收response body
DONE = 4; // 請求接收完畢
相信狀態(tài)4大家是天天在用，而我們這里需要用到就是狀態(tài)3。
實例：
廢話少說，代碼實例比什么文字解釋都管用。我們這里假設(shè)服務(wù)器的1個處理需要6秒種，每秒種處理1條記錄，總共處理6條記錄，我們需要服務(wù)器每處理完1條數(shù)據(jù)，客戶端則顯示處理進度(包括文字和進度條)。
服務(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ù)處理時間為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è)置進度條 
var width = parseInt(tmpText)/6*300; 
bg.style.width = width+"px"; 
} 
} 
if(xhr.readyState == 4){ 
// 請求執(zhí)行完畢 
t.innerHTML = "執(zhí)行完畢"; 
bg.style.width = "300px"; 
} 
} 
xhr.send(null); 
} 
/script> 
/body> 
/html> 

運行效果圖:

缺點：

看到這里或許你已經(jīng)蠢蠢欲動，想自己動手試試了。但是注意上面的方法雖好，但也有個缺點，就是瀏覽器的支持問題。目前IE所有版本的瀏覽器都不支持 xhr.readyState == 3狀態(tài)，IE瀏覽器不支持在response響應(yīng)完畢前讀取responseText屬性。具體可查看MSDN : XMLHttpRequest Object

基于Webkit的瀏覽器支持的不是很好，需要設(shè)置Content-Type：application/x-javascript才行(經(jīng)測試發(fā)現(xiàn)Content-Type:text/html在有些情況下正常，有些情況下又不正常，而用application/x-javascript都正常)。

看到了缺點后是否又打擊了你的積極性了，其實針對IE，我們不需要做太多處理，IE不支持，就不會顯示進度，就變成跟傳統(tǒng)的ajax請求一樣，一直顯示1個loading直到請求完畢。我們只需要加1個簡單的判斷，判斷如果是ie則不執(zhí)行xhr.readyState > 2中的代碼，如果不加判斷，IE下會報JS錯誤.

DEMO:

demo服務(wù)器不太好，而且在國外，隨時可能會點擊不了,而且有時候運行效果不是很好，大家知曉下，最好是把代碼copy到本地進行測試.
請使用firefox或chrome查看demo,ie查看的效果跟一般的ajax沒什么不一樣.
http://213.186.44.204:8080/ChunkTest/index.html
轉(zhuǎn)載請注明出處:http://www.cnblogs.com/BearsTaR/。禁止商用!

您可能感興趣的文章:

AJAX和JSP實現(xiàn)的基于WEB的文件上傳的進度控制代碼
AJAX 進度條實現(xiàn)代碼
ajax+php打造進度條 readyState各狀態(tài)
ajax+php打造進度條代碼[readyState各狀態(tài)說明]
ajax提交加載進度條示例代碼
一個簡單的ajax上傳進度顯示示例
php+ajax實現(xiàn)帶進度條的大數(shù)據(jù)排隊導(dǎo)出思路以及源碼
jquery+php+ajax顯示上傳進度的多圖片上傳并生成縮略圖代碼
jsp+ajax發(fā)送GET請求的方法
jquery+ajax實現(xiàn)跨域請求的方法
asp.net+ajax的Post請求實例
服務(wù)端配置實現(xiàn)AJAX跨域請求
解決ajax跨域請求數(shù)據(jù)cookie丟失問題
django通過ajax發(fā)起請求返回JSON格式數(shù)據(jù)的方法
Ajax在請求過程中顯示進度的簡單實現(xiàn)

標(biāo)簽：阿拉善盟儋州鷹潭益陽延邊張掖銅陵

巨人網(wǎng)絡(luò)通訊聲明：本文標(biāo)題《讓ajax更加友好的實現(xiàn)方法(實時顯示后臺處理進度。)》，本文關(guān)鍵詞讓,ajax,更加,友,好的,實現(xiàn),；如發(fā)現(xiàn)本文內(nèi)容存在版權(quán)問題，煩請?zhí)峁┫嚓P(guān)信息告之我們，我們將及時溝通與處理。本站內(nèi)容系統(tǒng)采集于網(wǎng)絡(luò)，涉及言論、版權(quán)與本站無關(guān)。