Скільки разів вам доводилося клацати на веб-сторінці і потім спостерігати за завантаженням сайту в рядку стану вашого браузера? Можливо, розірвано з'єднання з Інтернетом? Або сталася якась помилка підключення до базової системі? Або ж просто система працює так повільно? Часто ці проблеми ускладнюють визнання нових веб-рішень, особливо при заміні більш швидко реагує і надає великі можливості клієнтського додатка (такого як Windows-додаток).
У цій ситуації найлегший спосіб переконання користувачів свого додатка в його працездатності - надання їм повідомлень про хід виконання, які ставлять їх до відома про те, що в даний момент система обробляє їх запит.
Щоб створити процесор сторінки, знадобиться відреагувати на JS-події onload і onunload. Нижче наведена сторінка (по імені PageProcessor.aspx), в якій демонструється цей підхід. Вона відображає індикатор завантаження сторінки (велику колекцію індикаторів можна завантажити на сайті www.ajaxload.info). елемент
пов'язаний з двома функціями, які незабаром будуть розглянуті.І, нарешті, коли сторінка повністю завантажена, генерується клієнтське подія onunload. У наведеному прикладі подія onunload пов'язано з функцією EndPageLoad (). Ця функція зупиняє таймер, очищає повідомлення про хід виконання і встановлює тимчасове повідомлення передачі, яке зникає, як тільки нова сторінка візуалізується в браузері. Нижче наведено код:
Протягом всього процесу ніякі зворотні відправки не виконуються, Кінцевим результатом є повідомлення про хід виконання, яке залишається на екрані до тих пір. поки цільова сторінка буде повністю оброблена і завантажена:
Щоб протестувати процесор сторінки, потрібно просто скористатися цільової сторінкою, яка займає багато часу при виконанні на сервері (через обсяг робіт, виконуваних кодом) або при завантаженні на клієнті (через розміри сторінки). Повільну сторінку можна імітувати, поміщаючи в цільову сторінку код затримки, подібний наступного:
Тепер при запиті цієї сторінки за допомогою процесора сторінки можна буде протягом п'яти секунд спостерігати повідомлення про хід виконання.
Візуалізація блоків сценарію
У розглянутому раніше прикладі використовувався статичний блок