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套接字框架，该框架允许您实时推送内容（进度更新）和/或实现remote procedure call到连接的客户端。

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

使用jquery ajax的多个操作

1 个答案: