Создание экрана ожидания
Одним из самых существенных ограничений современных web-служб является время ожидания, когда нечто происходит, но в фоновом режиме, о чем следует непременно уведомить пользователей, иначе они не обратят внимания на происходящее. Для этой цели можно изменить вид курсора (cursor:wait) или же вывести надпись “ожидание” или “загрузка”, например при обработке вызова XMLHttpRequest. Web-cайт Google Mail стал одним из первых, где был использован данный прием.
При отправке асинхронного запроса на сервер в правом верхнем углу появляется экран загрузки (впрочем, его можно расположить в каком угодно месте). Как только от сервера возвратятся данные, экран загрузки становится невидимым.
Файл loading.html
<head>
<title>Loading...</title>
<script language="JavaScript" type="text/javascript" src="ajax.js"> </script>
</head>
<body>
<input type="button" value="Загрузить" onclick="loadData();" />
<span id="loading"
style="position: absolute; right:0; top:0; visibility: hidden; color: red;">Загрузка...</span>
</body>
</html>
Файл ajax.js
function loadData() {
XMLHttp.open("GET", "delay.php", true);
XMLHttp.onreadystatechange = handlerFunction;
XMLHttp.send(null);
document.getElementById("loading").style.visibility = "visible";
}
function handlerFunction() {
if (XMLHttp.readyState == 4) {
document.getElementById("loading").style.visibility = "hidden";
window.alert("Ответ сервера: " + XMLHttp.responseText);
}
}
function getXMLHttp() {
if (window.XMLHttpRequest) {
try {
XMLHttp = new XMLHttpRequest();
} catch (e) { }
} else if (window.ActiveXObject) {
try {
XMLHttp = new ActiveXObject("Msxml2.XMLHTTP");
} catch (e) {
try {
XMLHttp = new ActiveXObject("Microsoft.XMLHTTP");
} catch (e) { }
}
}
return XMLHttp;
}
Серверный скрипт delay.php
sleep(10);
echo 'результат запроса';
?>
Вместо надписи “Загрузка…” можно использовать какую-нибудь анимированную картинку:
Красивый индикатор загрузки можно загрузить с сайта http://www.ajaxload.info/:
Alex:
Обьясните плиз по подробнее как его установить?
20 Февраль 2009, 14:50admin:
Alex, создать три файла - loading.html, ajax.js и delay.php. записать в каждые соответствующее содержание. Все.
20 Февраль 2009, 15:15Alex:
я создал и записал, а на сервер куда их надо заливать?
21 Февраль 2009, 0:00admin:
Alex, на сервер, куда же еще?
21 Февраль 2009, 1:10Sam:
Я загрузил всё как Вы сказали, но после того, как слово “загрузка…” повисела потом появилось окно java снаким содержанием
Ответ сервера:
404 Not Found
Not Found
The requested URL /delay.php was not found on this server.
Additionally, a 404 Not Found
error was encountered while trying to use an ErrorDocument to handle the request.
что это?
5 Март 2009, 14:26admin:
Sam, по-моему все ясно написано: ошибка 404 - запршенный URL /delay.php не найден на сервере.
5 Март 2009, 16:27ArtRich:
>>admin:
>>Sam, по-моему все ясно написано: ошибка 404 - запршенный URL />>delay.php не найден на сервере
не совсем верно, ошибка есть, SAM прав
10 Март 2009, 23:21дело в том что нужно удалить в файле ajax.js лишний слеш перед “/delay.php”, true); и все будет тип-топ
Автору Спасибо!
admin:
ArtRich, слеш перед delay.php означает, что файл находится в корне сервера. По-видимиому, некоторым читателям этот факт не очевиден. Слеш убрал - теперь запрос на сервер будет отправлен файлу delay.php, который расположен в той же директории, что и loading.html.
11 Март 2009, 12:14ArtRich:
Как данный механизм реализовать на всех страницах сайта. Сайт на php. Просто же не реально к каждой кнопке привязывать onclick=”loadData();” Может подскажите более “гибкий” вариант?
12 Март 2009, 11:25ArtRich:
Еще вот хочу немного добавить к своему предыдущему посту. так как обработка идет в методе GET то не хватает самой передачи, или как это правильно написать, вообщем замените из loading.html строку на <a href=”delay.php”>Загрузить</a> и теперь вообще не будет ни у кого трудностей.
13 Март 2009, 16:07admin:
ArtRich, не понял, что Вы хотели сказать. Экран ожидания есть смысл создавать, когда используется объект xmlHttpRequest() для формирования запросов серверу. Пользователь в этом случае не понимает, почему после щелчка по кнопке ничего не происходит. Для этого мы показываем ему сообщение “Загрузка…”. Но это сообщение - лишь дополнение к асинхронному запросу на сервер. И событие может быть любым - onclick, onchange, onmouseover и т.п.
13 Март 2009, 22:22