Как показать статус загрузки в процентах для ответа ajax?

Я хочу показать процент пользователя от ответа ajax, загруженного с помощью панели прогресса. Есть ли способ достичь этого? Прямо сейчас я показываю только изображение.

Вот мой пример кода:

$('#loadingDiv').show();

$.ajax({
        type : 'Get',
        url : myUrl,
        success : function(response) {
            $('#loadingDiv').hide();
            populateData(response);
        },
        error: function(x, e) {
                    $('#loadingDiv').hide();
            if (x.status == 500 || x.status == 404) {
                    alert("no data found");
                }
        }
    });

Код HTML:

<div id="loadingDiv">
     <img src="loading-img.png"/>
</div>

Ответы

Ответ 1

Есть два способа показать реальный процент. Кратко...

Один - старый родной JavaScript или jQuery ajax, для которого вам нужна поддержка сервера, другой URL-адрес, который может дать вам обновления. И вы продолжаете удалять этот URL-адрес с интервалом.

Два - современный собственный родной JavaScript в браузерах HTML5, поддерживающий XMLHTTPRequest2, также известный как AJAX 2, определенный новыми стандартами Web и HTML5.

Если два, добро пожаловать в новую сеть!
Несколько браузеров добавлены несколько функций, которые расширяют возможности подключения - часть возможностей HTML5.

XMLHTTPRequest2 позволяет событиям в AJAX помогать отслеживать прогресс, а также многое другое, от самого JavaScript. Вы можете показать реальный процент, отслеживая фактический прогресс:

var oReq = new XMLHttpRequest();

oReq.addEventListener("progress", updateProgress, false);
oReq.addEventListener("load", transferComplete, false);
oReq.addEventListener("error", transferFailed, false);
oReq.addEventListener("abort", transferCanceled, false);

oReq.open();

Затем вы можете определить обработчики, указанные выше ( progress в вашем случае):

function updateProgress (oEvent) {
  if (oEvent.lengthComputable) {
    var percentComplete = oEvent.loaded / oEvent.total;
    // ...
  } else {
    // Unable to compute progress information since the total size is unknown
  }
}

jQuery можно использовать и во втором случае. В конце концов, jQuery помогает вам с меньшим количеством кода, больше делает!

Надеясь, что вы сосредоточитесь на HTML5 и новом веб-решении, я бы указал вам на Mozilla DOC - Мониторинг прогресса в AJAX, откуда я принял это решение.

У каждого браузера теперь есть документация для Интернета (например, выше, из Mozilla), и, кроме того, все они вносят свой вклад в общее предприятие под названием Веб-платформа вместе с другими влиятельными веб-и интернет-гигантами - для общей обновленной веб-документации. Это незавершенное производство, поэтому не завершено.

Кроме того, в старой AJAX нет встроенной функции для отслеживания прогресса.

В старой школе вам нужно будет создать функцию интервалов, которая будет удерживать отдельный URL, чтобы получить обновление хода. Ваш сервер также должен обновить прогресс и отправить его в качестве ответа от этого URL-адреса, доступного из другого порта.