首页 新闻 赞助 找找看

谷歌和360急速模式 下的XMLHttpRequest 的onprogress事件失效

0
悬赏园豆:30 [待解决问题]

场景描述
上传excel后遍历处理每一行的数据。想在页面上展示进度条,提示目前已经处理到第几条了。
使用XMLHttpRequest2来发送请求,在程序服务器端设置HttpServletResponse的响应内容的长度为sheet的中的行数,然后每处理完一行数据使用getWriter().write()方法往前台发送一个字符,然后使用flushBuffer()刷新,按理来说会触发XMLHttpRequest2onprogress事件。

但是实际测试下来在firefox上是会触发onprogress事件,会在控制台上 打印进度数据;但是在360浏览器(急速模式) 和谷歌浏览器上就只有请求结束的时候才会触发一次,此时的event.loaded直接等于event.total了。

这个是和浏览器的内核有关吗?

关键代码

js

var xhr=new XMLHttpRequest();
        var form =new FormData();
        form.append("file",$file) ;
        xhr.open('POST','.....(请求路由)',true);
        xhr.onprogress=function(event){
            if (event.lengthComputable) {
                var pro = event.loaded/event.total;
                console.log(pro);
                //progress.css('width', pro*100 + '%');
            }
        };
        xhr.onreadystatechange=function(){
            console.log("状态码:"+xhr.readyState);
        };
        xhr.send(form);

java

        ....(获取行数)
        response.setContentLength(length);//设置往客户端传输数据长度为总行数
        response.setContentType("text/plain");
        response.setHeader("Connection","Keep-Alive");
        ....(遍历每一行)
        
        response.getWriter().write(".");//往客户端传输一个长度的字符
        response.flushBuffer();
        //按理来说到这一步就会触发onprogress事件了
        
        ....(全部遍历结束后)
        response.getWriter().close();

参考列表

js能否在一个http长请求中多次进行数据交互?

大戟士骑兵的主页 大戟士骑兵 | 菜鸟二级 | 园豆:372
提问于:2019-11-28 15:04
< >
分享
所有回答(1)
0


看文档,好像设置进度条要在open之前,你改变下顺序试试

花轻语 | 园豆:86 (初学一级) | 2019-11-28 16:16

我把onprogress事件放在open之前也不行...

支持(0) 反对(0) 大戟士骑兵 | 园豆:372 (菜鸟二级) | 2019-11-29 13:53
清除回答草稿
   您需要登录以后才能回答,未注册用户请先注册