使用jquery ajax的多个操作

Question

我想执行一个操作,同时显示HTML5和JavaScript的进度.由于我使用的是IE 8,因此<progress>不支持该元素,我想到的方法是使用这样的jQuery AJAX方法:

<div class="progress-bar" role="progressbar" id="id" aria-valuemin="0" aria-valuemax="100">
    <span class="sr-only">Complete</span>
</div>

$(document).ready(function(){
    $("button").click(function(){
         $.ajax({
            url: "Perform a server side operation", 
            success: function(result){
                ProgressBarUpdate(20);
            }
        });
    });
});

var ProgressBarUpdate = function(value) {
    value = value + 10;
    $("#id").css("width", value +"%");
}

但这里的问题是如何同时执行操作和更新进度条？因为在接受success:部分AJAX请求后,直接显示100%进度没有意义.有没有其他方法可用于此？

Answer 1

假设操作发生在服务器端，我知道有两种方法。

轮询

这将通过不同的 ajax 进行

setInterval(function(){
   $.ajax("checkprogress.url", function(data){
       $('.progress-bar').val(data);
}, 1000);

基本上，您将每隔一段时间轮询一次服务器端服务/脚本/代码，响应将包含当前进度。然后您将更新进度条。

WebSockets

另一种方法是使用 Web 套接字框架，该框架允许您实时推送内容（进度更新）和/或对连接的客户端实施 远程过程调用。

两个这样的框架是SignalR和socket.io