2015-06-01 3 views
12

Я хочу выполнить операцию и одновременно показать прогресс в HTML5 и JavaScript. Так как я использую IE 8, то <progress> элемент не поддерживается, подход, который я думал, использует метод JQuery AJAX, как это:несколько операций с использованием 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

Какие действия вы делаете на стороне сервера? если вы загружаете какой-либо файл, то с помощью '$ .ajaxSettings.xhr(). upload();' вы можете получить процент uplaoding –

+0

Я хотел сделать то же самое в своем проекте. Но это невозможно, так как это вызов ajax и вы не можете добиться этого в истинном смысле. Вы можете сделать фальшивку (иллюзию) панели прогресса, но это не настоящий прогресс :( – AkshayJ

+0

Я делаю это как общий компонент, не обязательно загружающий – user1400915

ответ

3

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

опрос

Это будет иметь место с другим AJAX

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

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

WebSockets

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

Две такие структуры являются SignalR и socket.io

Смежные вопросы