讓ajax更加友好的實現方法(即時顯示幕後處理進度。)_AJAX相關

來源:互聯網
上載者:User
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  
轉載請註明出處:http://www.cnblogs.com/BearsTaR/。 禁止商用!
相關文章

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.