ajax實現前後臺數據同步,實現類似進度條功能。
ajax小白,不知道怎麼實現進度條功能,今天終於懂了皮毛並簡單實現。
後臺是一個迴圈,會多次向前臺傳值,但前臺ajax只能連線一次。我實現的功能不需要使用json,所以只是傳的文字。我有一個最大的錯誤的認知是,我以為response傳過來的是一個個文字,然而並不是,它是一個流,一條一條的文字都會粘在這個流上,所以必須通過設定執行緒時間來確保獲得每個文字的時間。看簡略程式碼。
後臺:
response.setContentType("text/html;charset=utf-8");
PrintWriter out=response.getWriter();
for(int i =0;i<list.size() ;i++){
out.println("此次同步涉及資料共"+list.size()+"條,正在更新第"+(i+1)+"條,請稍等...");
out.flush(); //不要關閉
Thread.currentThread().sleep(1000);
}
前臺ajax:
function progressBar(){
createXMLxBatchSynHttpRequest();
var url = "/tech/fee.do?method=progress;
xmlBatchSynHttp.open("GET", url, true);
var showProgress = document.getElementById("showProgress");
var oldSize = 0; //對流進行裁剪,每次展示想要展示的部分
xmlBatchSynHttp.onreadystatechange = function batchFeeSynchronizationCallback(){
if(xmlBatchSynHttp.readyState > 2) {
var result = xmlBatchSynHttp.responseText.substring(oldSize);
oldSize = xmlBatchSynHttp.responseText.length;
showProgress.innerHTML = result;
}
if (xmlBatchSynHttp.readyState == 4) {
if (xmlBatchSynHttp.status == 200) {
alert("批量同步成功");
}else{
alert("批量同步失敗");
}
}
};
xmlBatchSynHttp.send(null);
}
12-20修改:當時被批了,人為干預後臺執行緒執行時間,簡直傻到家。去掉sleep,在前臺進行分割,具體程式碼如下
var words = new Array();
words = result.split('...');
if(result!='undefined'&&result!=''){
showProgress.innerHTML = words[0];
}