ajax实现前后台数据同步，实现类似进度条功能。

最新推荐文章于 2024-08-21 08:15:00 发布

开车的老司机

最新推荐文章于 2024-08-21 08:15:00 发布

阅读量4.2k

点赞数

文章标签： javaweb ajax 进度条

本文链接：https://blog.csdn.net/m0_37581384/article/details/84248928

版权

本文介绍了一种使用Ajax实现后台数据同步并在前端显示进度条的方法。通过设置Ajax请求，后台循环更新数据并通过response输出，前端通过onreadystatechange事件获取并处理响应，动态更新进度条内容。在最初的实现中，误用了Thread.sleep()，后来修正为在前端对响应文本进行分割处理，以避免对后台线程的影响。

摘要由CSDN通过智能技术生成

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);