Принудительное изменение содержимого страницы через Javascript

Question

Я хотел бы показать некоторый визуальный прогресс пользователю во время запроса ajax. Например, когда он нажимает кнопку «процесс», которая отправляет AJAX-запрос к серверному сценарию, он видит сообщение «загрузка ...» и графическое изображение, но я также хочу показать ему некоторый прогресс в том, сколько обработки сделанный. Например, 5/10 processed, 6/10 processed... и т. Д.

Есть ли что-нибудь, чтобы сделать это?

Answer 1

Да, есть, но это довольно сложно. Единственный способ, который я нашел, - это использовать iframe на клиенте и response.writeing на сервере для отправки блоков javascript обратно клиенту, который вызывает javascript в родительском окне для обработки сообщений о состоянии.

Вот пример кода. Могут быть проблемы с этим, я вырезаю это из намного большего приложения.

HTML:

<button id="doStuff">
<div id="status"></div>
<div id="iframeHolder"></div>

JavaScript:

//This one will be called from the HTML the javascript is streaming back
function updateStatus(message) {
    $('#status').html(message);
}
$('#doStuff').click(function(event) {
    event.preventDefault();
    var url="your.page.html";
    $('#iframeHolder').html('<iframe src="' + url + '"></iframe>');
}

на стороне сервера (это vb asp.net, но вы должны быть в состоянии сделать это на своем языке):

dim message as string = "hello world"
dim script = String.Format("<script type='text/javascript'>parent.updateStatus('{0}');</script>",message)
Response.Write(script)
Response.Flush()

Некоторые наблюдения

• Querystring будет вашим другом здесь. Я не уверен, что вы можете программно отправить обратно в iframe
• Скорее всего, вам придется добавить немного мусора, очищающего кеш, в строку запроса, иначе браузер, скорее всего, кеширует содержимое. Это будет очень очень быстро, но неправильно: -)
• Возможно, вам придется отправить «какой-то» html, прежде чем браузер начнет обработку содержимого iframe. Я обнаружил, что отправка HTML-комментария о 1K мусора помогает
• Чтобы избежать проблем с обновлением в FF и проблем с «постоянной загрузкой» в chrome и safari, установите для sfc iframe значение about: blank после завершения ($('#iframeHolder iframe').attr('src','about:blank'))
• индикатор выполнения jQuery UI выглядит довольно шикарно для отображения процента обработки

Надеюсь, это поможет. Я порвал с этим пару месяцев назад: -)

Answer 2

Я не знаю, каков на самом деле ваш процесс на стороне сервера, но есть ли смысл разбивать его на серию вызовов Ajax, каждый из которых выполняет часть процесса? Тогда вы можете увеличивать отображение на каждом шаге.

Answer 3

В Safari 4 и Firefox 3.5 вы можете определить прогресс XMLHttpRequest следующим образом:

var url = "[URL to file]";
var request = new XMLHttpRequest();

request.onprogress = function(e) {
    if (e.lengthComputable) {
        var percentComplete = (e.loaded / e.total) * 100;
        console.log("Progress: " + percentComplete + "%");
    }
    else {
        // Code to execute when we can't get the progress
    }
};

request.open("GET", url, true);
request.send("");

Для получения дополнительной информации см. на этой странице в Mozilla Developer Network

Answer 4

jQuery + PHP пример реализации индикатора выполнения, опрашивающий серверный скрипт для оставшихся процентов. нажмите здесь