1. 程式人生 > >ajax實現前後臺數據同步,實現類似進度條功能。

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];
               }