Решение, которое я представляю здесь, предназначено для показа метода, позволяющего отображать окно «Загрузка ...» во время обработки на стороне сервера и исчезать при завершении обработки на стороне сервера.
Я сделаю это с помощью самого простого механизма AJAX (протестирован на FF, но IE тоже должен быть в порядке), то есть не использовать фреймворк вроде Prototype или jQuery или Dojo, поскольку вы не указали свои знания о них ,
Чтобы вы могли лучше понять трюк, следующее является лишь небольшим примером и не претендует на то, чтобы быть готовым решением. Я склонен не быть поверхностным, но я думаю, что более ясный пример может объяснить лучше, чем многие слова.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>First Example</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<style>
.hidden {
display: none;
}
.loadingInProgress {
color: #FFFFFF;
width: 75px;
background-color: #FF0000;
}
</style>
<script type="text/javascript">
var httpRequest;
if (window.XMLHttpRequest) { // Mozilla, Safari, ...
httpRequest = new XMLHttpRequest();
httpRequest.overrideMimeType('text/xml');
} else if (window.ActiveXObject) { // IE
try {
httpRequest = new ActiveXObject("Msxml2.XMLHTTP");
}
catch (e) {
try {
httpRequest = new ActiveXObject("Microsoft.XMLHTTP");
}
catch (e) {}
}
}
if (!httpRequest) {
alert('Giving up :(Cannot create an XMLHTTP instance');
}
httpRequest.onreadystatechange = function(){
switch (httpRequest.readyState) {
case 1: // Loading
document.getElementById('loading').className = "loadingInProgress";
break;
case 4: // Complete
document.getElementById('loading').className = "hidden";
if (httpRequest.status == 200) {
// perfect!
} else {
// there was a problem with the request,
// for example the response may be a 404 (Not Found)
// or 500 (Internal Server Error) response codes
}
break;
}
};
function go() {
httpRequest.open('GET', document.getElementById('form1').action, true);
httpRequest.send('');
}
</script>
</head>
<body>
<div id="loading" class="hidden">Loading...</div>
<form id="form1" name="form1" action="doSomething.php">
<input type="button" value="Click to submit:" onclick="go()" />
</form>
</body>
</html>
Как вы можете видеть, что есть <div>, который держит "Loading ..." сообщение.
Принцип заключается в том, чтобы показать/скрыть <div> в зависимости от XMLHttpRequest объекта readyState.
Я использовал обработчик onreadystatechangeXMLHttpRequest, чтобы вызвать изменение readyState.
Внутренний PHP-скрипт, который я использую (объявленный как форма action), выполняет только сон (5), чтобы сообщение «Загрузка ...» появилось в течение 5 секунд.
<?php
sleep(5);
header('Cache-Control: no-cache');
echo "OK";
?>
Cache-control: no-cache заголовка необходимо, так как, как правило, если вы не установите браузер будет кэшировать ответ избегая повторно отправить запрос, если вам необходимо нужно.
Хороший источник для «начала работы» Документация AJAX - Mozilla MDC.
Все это может быть гораздо более мягко обработано инфраструктурой Javascript, например Prototype, с использованием своего безопасного подхода, экономя часы отладки.
Edit:
Я выбрал PHP, потому что я не знаю, ASP.NET, ни ASP, жаль об этом.
Проблема с перенаправлением страницы заключается в том, что в конечном итоге вы получаете уродливую информационную панель в IE, предотвращающую их загрузку. Я не хочу добавлять на наш веб-сайт совершенно новый раздел для получения отчетов. В любом случае это может занять больше времени для пользователя. – Ray 2008-10-09 01:39:02