Создание экрана ожидания

Одним из самых существенных ограничений современных 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/:

   

Комментариев: 11

  1. Alex:

    Обьясните плиз по подробнее как его установить?

  2. admin:

    Alex, создать три файла - loading.html, ajax.js и delay.php. записать в каждые соответствующее содержание. Все.

  3. Alex:

    я создал и записал, а на сервер куда их надо заливать?

  4. admin:

    Alex, на сервер, куда же еще?

  5. Sam:

    Я загрузил всё как Вы сказали, но после того, как слово “загрузка…” повисела потом появилось окно 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.

    что это?

  6. admin:

    Sam, по-моему все ясно написано: ошибка 404 - запршенный URL /delay.php не найден на сервере.

  7. ArtRich:

    >>admin:
    >>Sam, по-моему все ясно написано: ошибка 404 - запршенный URL />>delay.php не найден на сервере

    не совсем верно, ошибка есть, SAM прав
    дело в том что нужно удалить в файле ajax.js лишний слеш перед “/delay.php”, true); и все будет тип-топ
    Автору Спасибо!

  8. admin:

    ArtRich, слеш перед delay.php означает, что файл находится в корне сервера. По-видимиому, некоторым читателям этот факт не очевиден. Слеш убрал - теперь запрос на сервер будет отправлен файлу delay.php, который расположен в той же директории, что и loading.html.

  9. ArtRich:

    Как данный механизм реализовать на всех страницах сайта. Сайт на php. Просто же не реально к каждой кнопке привязывать onclick=”loadData();” Может подскажите более “гибкий” вариант?

  10. ArtRich:

    Еще вот хочу немного добавить к своему предыдущему посту. так как обработка идет в методе GET то не хватает самой передачи, или как это правильно написать, вообщем замените из loading.html строку на <a href=”delay.php”>Загрузить</a> и теперь вообще не будет ни у кого трудностей.

  11. admin:

    ArtRich, не понял, что Вы хотели сказать. Экран ожидания есть смысл создавать, когда используется объект xmlHttpRequest() для формирования запросов серверу. Пользователь в этом случае не понимает, почему после щелчка по кнопке ничего не происходит. Для этого мы показываем ему сообщение “Загрузка…”. Но это сообщение - лишь дополнение к асинхронному запросу на сервер. И событие может быть любым - onclick, onchange, onmouseover и т.п.

Оставьте свой отзыв