使用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 +"%");
}

但问题在于如何同时执行操作并更新进度条呢？因为在AJAX请求的 success: 部分后，直接显示 100% 的进度是没有意义的。还有其他可行的方法吗？

- user1400915

---

你在服务器端正在执行什么操作？如果你正在上传文件，那么可以使用 $.ajaxSettings.xhr().upload(); 来获取上传百分比。 - Satinder singh

我想在我的项目中做同样的事情。但是由于它是一个ajax调用，你无法真正获得它的进度。你可以制作一个假的进度条，但那不是实际的进度。 - AkshayJ

我正在将其制作为通用组件，不一定是上传功能。 - user1400915

你可以使用progressbar。 - MyTwoCents

请查看以下网址：http://malsup.com/jquery/form/#file-upload，以及这个示例：http://phppot.com/jquery/jquery-progress-bar-for-php-ajax-file-upload/。请注意`uploadProgress`和它的`percentComplete`。 - MortenMoulder

在同时获取多个Ajax结果时，第一个返回的结果不一定是第一个发送的Ajax请求，而是最先完成的请求。 - Serhat MERCAN

Answer 1

假设操作是在服务器端进行，我知道两种方法。

轮询

这将使用不同的ajax进行。

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

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

WebSockets

另一种方法是使用一个WebSocket框架，它将允许您实时地向连接的客户端“推送”内容（进度更新），或者实现一个远程过程调用。

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

- AmmarCSE