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

Question

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

Есть ли все равно для этого?

Answer 1

Yep, есть , но это довольно сложно. Единственный способ, которым я нашел, - использовать 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 около 1 тыс. Мусора помогает
• Чтобы избежать проблем с обновлением в FF и проблемах с «постоянной загрузкой» в хромированном и сафари, установите значение src iframe примерно: пустое после завершения ($('#iframeHolder iframe').attr('src','about:blank'))
• прогресс бар JQuery UI выглядит довольно шикарном для отображения процентов обработанных

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

Answer 2

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

Answer 3

jQuery + PHP пример реализации индикатора выполнения, опрос серверного скрипта для оставшихся процентов. click here

Answer 4

В 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(""); 

Для получения дополнительной информации обратитесь к this page в сети разработчиков Mozilla