Одним из самых существенных ограничений современных web-служб является время ожидания, когда нечто происходит, но в фоновом режиме, о чем следует непременно уведомить пользователей, иначе они не обратят внимания на происходящее. Для этой цели можно изменить вид курсора (cursor:wait) или же вывести надпись “ожидание” или “загрузка”, например при обработке вызова XMLHttpRequest. Web-cайт Google Mail стал одним из первых, где был использован данный прием.
При отправке асинхронного запроса на сервер в правом верхнем углу появляется экран загрузки (впрочем, его можно расположить в каком угодно месте). Как только от сервера возвратятся данные, экран загрузки становится невидимым.
Файл loading.html
<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
var XMLHttp = getXMLHttp();
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
<?php
sleep(10);
echo 'результат запроса';
?>
Вместо надписи “Загрузка…” можно использовать какую-нибудь анимированную картинку:
Красивый индикатор загрузки можно загрузить с сайта http://www.ajaxload.info/:
