Как реализовать информацию «Генерирование ... пожалуйста, подождите» для веб-приложения (с JavaScript и без него) - PullRequest
Новая
       9

Как реализовать информацию «Генерирование ... пожалуйста, подождите» для веб-приложения (с JavaScript и без него)

1 голос
/ 17 декабря 2009

Как я могу реализовать отображение информации «Генерация данных ... пожалуйста, подождите» в веб-браузере из веб-приложения (если данные не кэшируются, генерация ответа может занять некоторое время), с использованием JavaScript и без него (AJAX)?

Меня интересует как решение с использованием AJAX (где я могу заменить загрузку сообщения с использованием JavaScript), так и решение с использованием только серверного процесса, без JavaScript (если это возможно).

Я хочу заменить загрузочное сообщение ответом, как только оно станет доступно.

Ответы [ 6 ]

2 голосов
/ 18 декабря 2009

Вот что я бы сделал при реализации этой клиентской стороны.

Это было бы довольно легко сделать, используя вызов Ajax. Установите div на своей странице, чтобы при первом вызове Ajax отображалось сообщение «Генерация ... пожалуйста, подождите». (Простого анимационного графического изображения, не обладающего воображением, было бы достаточно, чтобы определить ожидаемое пользователем ожидание операции. Convention = понимание = хороший интерфейс.) Затем передайте функцию в обработчик readystatechange, который обновляет div с сообщением / графиком прогресса после возврата запроса Ajax. 

function ShowPendingOperation(){

    var resultHolder = document.getElementById( 'statusDiv' );
    resultHolder.innerHTML = "Your data is loading... <img src='yourProgressAnim.gif'>";

    var request = GXmlHttp.create();
    request.open("post", "/yourScript", true);
    request.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
    request.onreadystatechange = function() {

        if (request.readyState == 4) {

            resultHolder.innerHTML = "operation complete";
            resultHolder.innerHTML += "result1";
            resultHolder.innerHTML += "result2";
            resultHolder.innerHTML += "etc";

        }

    }

    request.send( 'field1=data1&field2=data2' );

}

Обратите внимание, что приведенный выше фрагмент взят из примера кода, написанного для сайта Google Map, вероятно, ваша строка, создающая объект XMLHttpRequest, будет отличаться ...

1 голос
/ 17 декабря 2009

Вот что я бы сделал:

  1. Когда вы решите, что вам нужно выполнить длинную операцию, запустите поток и свяжите этот поток с каким-либо идентификатором. Не используйте идентификаторы повторно.
  2. Вернуть пользователя на страницу с надписью «Генерация».
  3. Если ajax, используйте ajax для периодического опроса сервера или для выполнения запроса, который будет блокироваться до завершения операции. В этом запросе указан идентификатор, и именно так сервер знает, какое сообщение вернуть.
  4. Если ajax отсутствует, используйте метаобновление для периодической перезагрузки страницы с указанным идентификатором. Повторяйте, пока транзакция не будет завершена. Примечание: в этом случае вы должны поместить на страницу сообщение, указывающее, когда произойдет обновление, и включить ссылку для перезагрузки страницы для людей, чьи браузеры не поддерживают (или игнорируют) метаобновление.
1 голос
/ 17 декабря 2009

Вам потребуется использовать JavaScript, чтобы выполнить это без перезагрузки страницы. Вот пример использования jQuery для создания этого типа эффекта.

http://trevordavis.net/blog/tutorial/ajax-forms-with-jquery/

Единственный способ сделать это со стороны сервера - это показать сообщение на странице, на которую вы POST обращаетесь, и записать на экран с использованием буферизованного вывода перед тем, как выполнять фактическую обработку.

0 голосов
/ 19 декабря 2009

Один из найденных трюков заключается в использовании <meta http-equiv="refresh" content="0" /> для перенаправления на готовый вид ... но не при закрытии тега html и не при закрытии соединения, пока не будет готов окончательный ответ: 

print <<'EOF';
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<meta http-equiv="refresh" content="0"/>
<title>$title</title>
</head>
<body>
EOF

print "Generating...";
while (!is_ready()) {
    print ".";
    wait();
}
print <<EOF;
</body>
</html>
EOF

Это то, что имеет шанс работать, или это работает только случайно?

0 голосов
/ 17 декабря 2009

Без сценария. Вы можете перенаправить на промежуточную веб-страницу с сообщением «Пожалуйста, подождите», которое перенаправляет на страницу результатов после завершения процесса.

С помощью скрипта: на вашей странице может быть скрытый элемент div, который отображается с сообщением «пожалуйста, подождите». Этот div также может быть таким же большим, как ваша страница, и прозрачным (с сообщением в меньшем div), чтобы ваши пользователи не могли нажимать на страницу во время отображения сообщения.

0 голосов
/ 17 декабря 2009
В плагин Tabs

JqueryUI встроен этот модуль, вы можете легко подключиться к его плагину, чтобы делать то, что вы хотите, без необходимости писать его самостоятельно.

...