如何使用ajax 实现实时进度条

Question

如何使用ajax 实现实时进度条

Answer 1

• 用户AJAX提交操作，服务端生成一个任务ID，输出

• 服务端计算当前任务一共分几步

• ajax 轮询一个JSON接口获取当前执行到了第几步

• 算百分比

• 完毕

Answer 2

看了看楼上几位说的基本都是XMLHttpRequest这个对象的那个onprogress事件里面获取进度。

这个进度只是表示上传进度！！！

其实，我之前还遇到过需要知道一个相对较长的后端任务的进度的问题。
如果任务特别长，http连接可能断掉，那么就需要创建任务ID，使用ajax轮训进度。

如果任务没有那么长，但是服务器又不能立即返回，那么可以简单的更改一下响应超时时间，然后服务端使用chunked，一点点的把进度返回回来。浏览器会收多少，解析多少的。

Answer 3

干嘛不做一个假的呢？反正服务器端处理完成之后你前端显示100%

Answer 4

好吧，我最近才完成的一个就是这种任务。主要看你的进度以何为划分了。

HTML我是用了bootstrap自带的进度条插件，我的工作是不停的用ajax上传文件，等待服务器端处理后返回，所以我这里显示浏览器端文件上传的进度（文件数、字节数，文件切片等自己看）。

如果你想一次ajax请求后等待服务器端执行，要求服务器端返回执行进度，可以约定好，服务器端先返回header中指定长度，每执行一定进度后，返回一个字节，这样浏览器端通过event就可以获知进度。具体还是参考我之前的问题吧

Answer 5

原生的XMLHttpRequest目前已经有许多浏览器支持Progress Events了，可以参考

如果还要支持想是IE之类的浏览器，最好看看兼不兼容

Answer 6

如果你需要真实的，就ajax轮询服务器。 如果只是装个样子，就固定一个时间好了，等服务器加载完成然后100%就可以了

Answer 7

貌似只有上传文件时, 才可以获取到进度, 直接post或者get文本数据, 是不行的...

Answer 8

HTML5有个onprogress方法，我们之前做测速时候就是用这个方法。比如下载文件时候，可以使用这个来计算当前的下载速度。