讓ajax更加友好的實現方法(實時顯示後台處理進度。)
編輯：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
轉載請注明出處:http://www.cnblogs.com/BearsTaR/。 禁止商用!
存在的問題：
要解決實現上面的功能，需要解決下面幾個問題：
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/。 禁止商用!
小編推薦
熱門推薦