使用 jquery ajax 的多个操作答案

【问题标题】：multiple operations using jquery ajax使用 jquery ajax 的多个操作
【发布时间】：2015-08-14 16:43:07
【问题描述】：

我想执行一个操作并同时显示 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%进度是没有意义的。有没有其他方法可以解决这个问题？

【问题讨论】：

你在服务器端做什么？如果您要上传任何文件，则使用$.ajaxSettings.xhr().upload(); 可以获得上传百分比
我想在我的项目中做同样的事情。但这是不可能的，因为它是一个 ajax 调用，你无法真正获得它的进展。你可以制作一个假的（错觉）进度条，但那不是实际进度：（
我将其作为通用组件，不一定要上传
你可以使用progressbar
malsup.com/jquery/form/#file-upload 例如：phppot.com/jquery/jquery-progress-bar-for-php-ajax-file-upload - 查看uploadProgress 及其percentComplete。

标签： javascript jquery ajax html

【解决方案1】：

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

轮询

这将使用不同的 ajax 进行

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

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

WebSockets

另一种方法是使用 web-socket 框架，它允许您实时推送内容（进度更新）和/或实现remote procedure call 到连接的客户端。

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

【讨论】：