Обновить индикатор выполнения с помощью секунд запроса ajax

В основном, я выполняю запрос AJAX для внешней системы входа, как я могу обновить индикатор выполнения в зависимости от длины запроса?

Например, запрос занимает от 1.30s до 1.40s для завершения, как я могу обновить индикатор выполнения на основе определенных интервалов, например обновить его на 10% каждый 10 мс или что-то еще, здесь макет HTML для индикатора выполнения

<div class="progress progress-striped active">
    <div class="progress-bar"  role="progressbar" aria-valuenow="65" aria-valuemin="0" aria-valuemax="100" style="width: 65%">
        <span class="sr-only">65% Complete</span>
    </div>
</div>

Длина индикатора выполнения определяется с помощью атрибута width: 65%

Идея состоит в том, чтобы в принципе заставить ее выглядеть так, как будто она обновляется на основе запроса, поэтому, когда запрос завершен, процентная панель заполнена

Ответ 1

Я думаю, что этот пост совершенно ясен http://www.dave-bond.com/blog/2010/01/JQuery-ajax-progress-HMTL5/

Публикация этого для будущей справки (если блог будет удален):

$.ajax({
     xhr: function(){
       var xhr = new window.XMLHttpRequest();
       //Upload progress
       xhr.upload.addEventListener("progress", function(evt){
       if (evt.lengthComputable) {
         var percentComplete = evt.loaded / evt.total;
         //Do something with upload progress
         console.log(percentComplete);
         }
       }, false);
     //Download progress
       xhr.addEventListener("progress", function(evt){
         if (evt.lengthComputable) {
           var percentComplete = evt.loaded / evt.total;
         //Do something with download progress
           console.log(percentComplete);
         }
       }, false);
       return xhr;
     },
     type: 'POST',
     url: "/",
     data: {},
     success: function(data){
    //Do something success-ish
    }
 });

Ответ 2

Вы можете использовать плагин формы jquery и использовать этот метод uploadProgress следующим образом:

$('#register-form').on('submit', function(e) {
    e.preventDefault();

    $(this).ajaxSubmit({
        url: url,
        uploadProgress: function (event, position, total, percentComplete){
            $('.progress-bar').width(percentComplete + '%');
            $('.progress-bar > p').html(percentComplete);
        },
        success: function (response, statusText, xhr, $form) {
            // TODO: You'll need to do some custom logic here to handle a successful
            // form post, and when the form is invalid with validation errors.
        },
        error: function(a, b, c) {
            // NOTE: This callback is *not* called when the form is invalid.
            // It is called when the browser is unable to initiate or complete the ajax submit.
            // You will need to handle validation errors in the 'success' callback.
            console.log(a, b, c);
        }
    });
});