Можно рассчитать, сколько данных было загружено с помощью AJAX?

Question

Я был занят некоторым кодом AJAX. Я хочу рассчитать, сколько данных было загружено, и я хочу отображать его с процентами.

Вся моя предварительно загруженная информация находится внутри «обратной связи». Могу ли я рассчитать, сколько данных он содержит (в байтах), и могу ли я также просмотреть прогресс? Например, когда он загружен: 10kb, 20kb, 30kb т.д.

Мой код:

function calc(page) 
    { 
    $('#pageLoad h2').animate({ marginTop : '0px'}, 200); 
     $.ajax(
     { 
      url:   './pages/page.php', 
      type:   'POST', 
      data:   'page='+page, 
      success:  function(feedback) 
      { 
       $('#content').html(feedback); 
      }        

     }); 
    }; 

Извините за мой бедный английский.

Answer 1

Это есть возможно. XHR имеют progress event. Единственная проблема заключается в доступе к объекту XHR - к сожалению, beforeSend получает только объект jqXHR, а не основной объект XHR. Он также недоступен как свойство обертки. Однако вы можете подключить в процесс создания объекта XHR, добавив следующий параметр $.ajax():

xhr: function() { 
    var xhr = $.ajaxSettings.xhr(); // call the original function 
    xhr.addEventListener('progress', function (e) { 
     if (e.lengthComputable) { 
      var percentComplete = e.loaded/e.total; 
      // Do something with download progress 
     } 
    }, false); 
    return xhr; 
} 

---

Вот мое первоначальное решение. С jQuery очень сложно сочетать, поскольку вы не можете легко подключиться к обработчику onreadystatechange и не можете безопасно заменить его после того, как он был установлен:

Необходимо добавить пользовательский обработчик onreadystatechange. Когда readyState объекта XHR станет 2 (* HEADERS_RECEIVED *), вы можете получить доступ к заголовку Content-Length, чтобы получить общий размер, а затем дождаться, когда событие будет срабатывать с xhr.readyState == 3 ( LOADING).

Затем вы можете рассчитать прогресс, посмотрев на xhr.responseText.length.
Однако это будет срабатывать только один раз. Поэтому вам нужно запустить таймер (используя setInterval()), который будет проверять состояние готовности и ответ, например. каждые 100 мсек. Как только запрос завершится, вы снова остановите интервал, используя clearInterval().