Как мониторить процент загрузки при использовании AJAX?

Question

[zkrvndm]

Здравствуйте, загружаю html-файл посредством jQuery.ajax() - метод использую POST. Подскажите, не предоставляет ли jQuery из под коробки инструментов для отслеживания процента загрузки документа?

Хочу индикацию прикрутить, а то нехорошо будет, если пользователи будут думать, что страница зависла и кликать все подряд.

Comments

[MOZGbeat]

Боже, чел, спасибо, что ты есть

[zkrvndm]

MOZGbeat, не за что) но ты конечно даешь отрыл мой вопрос спустя столько лет)

Answer 1

[Владлен Хеллсайт]

https://stackoverflow.com/questions/19126994/what-...

$.ajax({
    xhr: function() {
       var xhr = new window.XMLHttpRequest();

       xhr.addEventListener("progress", function(evt) {
           if (evt.lengthComputable) {
               var percentComplete = evt.loaded / evt.total;
               //Do something with download progress
           }
       }, false);

       return xhr;
    },
    type: 'POST',
    url: "/",
    data: {},
    success: function(data){
        //Do something on success
    }
});

Comments

[zkrvndm]

Не пойму, почему там два обработчика прогресса. Не подскажите в чем дело? Заранее спасибо.

[Владлен Хеллсайт]

Надим Закиров, всё просто, начинающийся с xhr.upload отвечает за загрузку на сервер, а второй непосредственно за скачивание.

[zkrvndm]

Владлен Хеллсайт, понял. Большое спасибо)

Answer 2

[zkrvndm]

Неожиданно много человек подписалось) Распишу результаты экспериментов. Код предложенный Владлен Хеллсайт у меня не сработал, хрен знает в чем дело, но глубоко копать не стал, так как мне на глаза попался вот такой jQuery-плагин как раз добавляющий нужный функционал. Для использования подключаем jq-ajax-progress.js у себя на сайте, а дальше используем его функционал следующим образом:

jQuery.ajax({
	type: 'POST',
	url: '/',
	data: { get : 'table' },
	cache: false,
	success: function(result) {
		console.log(result);
	},
	error: function(result) {
		console.log('Ошибка!');
	},
	progress: function(e) {
		procent = (e.loaded * 100 / e.total).toFixed();
		console.log(procent); // Процент приема файла
	}
});

Думаю всем понятно, что в e.loaded лежит кол-во загруженных байт, а e.total размер файла.

Если вдруг у вас не работает, гляньте значение e.total - хоть это и размер файла, но лично у меня он почему был равен нулю, в итоге расчеты процента загрузки были неверными, даже пробовал в php-скрипте (что отдает файл) прописать заголовок header с размером файла в байтах, но не помогло. Пришлось делать обходной манер: сначала отдельным запросом запрашивать с сервера размер файла, а потом загружать сам файл и уже зная его размер вычислять процент, по мере загрузки.