Как получить прогресс из XMLHttpRequest
Можно ли получить ход выполнения запроса XMLHttpRequest (загружено байт, загружено байт)?
Это было бы полезно, чтобы показать индикатор выполнения, когда пользователь загружает большой файл. Стандартный API, похоже, не поддерживает его, но, может быть, есть какое-то нестандартное расширение в любом из браузеров? В конце концов, это довольно очевидная возможность, поскольку клиент знает, сколько байт было загружено / загружено.
примечание: мне известна альтернатива "опросить сервер о прогрессе" (это то, чем я сейчас занимаюсь). основная проблема с этим (кроме сложного серверного кода) заключается в том, что, как правило, при загрузке большого файла подключение пользователя полностью скрывается, поскольку большинство интернет-провайдеров предлагают плохой восходящий поток. Поэтому делать дополнительные запросы не так быстро, как я надеялся. Я надеялся, что найдется способ (возможно, нестандартный) получить эту информацию, которую браузер всегда имеет.
8 ответов
Для загруженных байтов это довольно просто. Просто следите за xhr.upload.onprogress событие. Браузер знает размер файлов, которые он должен загрузить, и размер загруженных данных, поэтому он может предоставить информацию о ходе выполнения.
Для загруженных байтов (при получении информации с xhr.responseText), это немного сложнее, потому что браузер не знает, сколько байтов будет отправлено в запросе сервера. Единственное, что браузер знает в этом случае, это размер байтов, которые он получает.
Для этого есть решение, достаточно установить Content-Length заголовок сценария сервера, чтобы получить общий размер байтов, которые должен получить браузер.
Для получения дополнительной информации перейдите по https://developer.mozilla.org/en/Using_XMLHttpRequest.
Пример: мой серверный скрипт читает zip-файл (это занимает 5 секунд):
$filesize=filesize('test.zip');
header("Content-Length: " . $filesize); // set header length
// if the headers is not set then the evt.loaded will be 0
readfile('test.zip');
exit 0;
Теперь я могу отслеживать процесс загрузки серверного скрипта, потому что я знаю, что это общая длина:
function updateProgress(evt)
{
if (evt.lengthComputable)
{ // evt.loaded the bytes the browser received
// evt.total the total bytes set by the header
// jQuery UI progress bar to show the progress on screen
var percentComplete = (evt.loaded / evt.total) * 100;
$('#progressbar').progressbar( "option", "value", percentComplete );
}
}
function sendreq(evt)
{
var req = new XMLHttpRequest();
$('#progressbar').progressbar();
req.onprogress = updateProgress;
req.open('GET', 'test.php', true);
req.onreadystatechange = function (aEvt) {
if (req.readyState == 4)
{
//run any callback here
}
};
req.send();
}
Здесь хорошее обсуждение индикатора прогресса для паттерна AJAX:
http://ajaxpatterns.org/Progress_Indicator
Один из наиболее многообещающих подходов, по-видимому, заключается в открытии второго канала связи с сервером, чтобы узнать, какая часть передачи была завершена.
Для всего загруженного, похоже, нет способа справиться с этим, но есть нечто похожее на то, что вы хотите загрузить. Когда readyState равен 3, вы можете периодически запрашивать responseText, чтобы получить весь загруженный контент, вплоть до String (это не работает в IE), до тех пор, пока все это не станет доступным, и в этот момент он перейдет к readyState 4. Всего байт, загруженные в любой момент времени, будут равны общему количеству байтов в строке, хранящейся в responseText.
Для подхода "все или ничего" к вопросу о загрузке, поскольку вам нужно передать строку для загрузки (и можно определить общее количество байтов этого), общее количество байтов, отправленных для readyState 0 и 1, будет равно 0, а общее количество для readyState 2 будет общим количеством байтов в строке, которую вы передали. Общее количество байтов, отправленных и полученных в readyState 3 и 4, будет суммой байтов в исходной строке плюс общее количество байтов в responseText.
<!DOCTYPE html>
<html>
<body>
<p id="demo">result</p>
<button type="button" onclick="get_post_ajax();">Change Content</button>
<script type="text/javascript">
function update_progress(e)
{
if (e.lengthComputable)
{
var percentage = Math.round((e.loaded/e.total)*100);
console.log("percent " + percentage + '%' );
}
else
{
console.log("Unable to compute progress information since the total size is unknown");
}
}
function transfer_complete(e){console.log("The transfer is complete.");}
function transfer_failed(e){console.log("An error occurred while transferring the file.");}
function transfer_canceled(e){console.log("The transfer has been canceled by the user.");}
function get_post_ajax()
{
var xhttp;
if (window.XMLHttpRequest){xhttp = new XMLHttpRequest();}//code for modern browsers}
else{xhttp = new ActiveXObject("Microsoft.XMLHTTP");}// code for IE6, IE5
xhttp.onprogress = update_progress;
xhttp.addEventListener("load", transfer_complete, false);
xhttp.addEventListener("error", transfer_failed, false);
xhttp.addEventListener("abort", transfer_canceled, false);
xhttp.onreadystatechange = function()
{
if (xhttp.readyState == 4 && xhttp.status == 200)
{
document.getElementById("demo").innerHTML = xhttp.responseText;
}
};
xhttp.open("GET", "http://it-tu.com/ajax_test.php", true);
xhttp.send();
}
</script>
</body>
</html> 
Если у вас есть доступ к вашей установке apache и вы доверяете стороннему коду, вы можете использовать модуль прогресса загрузки apache (если вы используете apache; есть также модуль прогресса загрузки nginx).
В противном случае вам придется написать сценарий, который вы можете использовать вне диапазона для запроса статуса файла (например, проверка размера файла в файле tmp).
В Firefox 3 есть работа, которая, я полагаю, добавит поддержку прогресса загрузки в браузер, но она не будет распространяться на все браузеры и будет широко распространена некоторое время (больше жаль).
Единственный способ сделать это с помощью чистого JavaScript - это реализовать какой-то механизм опроса. Вам нужно будет отправлять запросы AJAX через фиксированные интервалы (например, каждые 5 секунд), чтобы получить количество байтов, полученных сервером.
Более эффективным способом было бы использовать вспышку. Гибкий компонент FileReference периодически отправляет событие "progress", содержащее количество уже загруженных байтов. Если вам нужно придерживаться Javascript, мосты доступны между ActionScript и Javascript. Хорошей новостью является то, что эта работа уже сделана для вас:)
Эта библиотека позволяет зарегистрировать обработчик javascript в событии прогресса флэш-памяти.
Это решение обладает большим преимуществом, так как не требует дополнительных ресурсов на стороне сервера.