Несколько операций с использованием jquery ajax

Я хочу выполнить операцию и одновременно показать прогресс в 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% не имеет смысла. Есть ли какой-либо другой подход для этого?

Ответы

Ответ 1

Предполагая, что операция происходит на стороне сервера, я знаю два подхода.

опрос

Это будет происходить с другим ajax

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

В принципе, вы будете опросить серверный сервис / script/code каждый интервал, и ответ будет содержать текущий прогресс. Затем вы обновите индикатор выполнения.

WebSockets

Другой подход заключается в использовании инфраструктуры веб-сокета, которая позволит вам нажимать контент (обновления выполнения) и/или реализовать удаленный вызов процедуры для подключения клиентов в режиме реального времени.

Две такие структуры: SignalR и socket.io