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