AJAX - индикатор ожидания загрузки

Автор: admin 25 Nov 2008 Отзывы Отзывов: 2

В процессе получения данных с помощью AJAX запроса иногда проходит значительное время. К тому же, если передаваемые данные - массив или переменная это один случай, а если содержимое слоя или объемный HTML код, это то случай, когда возможна задержка вывода полученных получаемых данных на странице.

Приведу пример как можно реализовать индикацию процесса.

  • Небольшое отступление: будь то форма загрузки изображений или еще что то, правило хорошего тона гласит - отключайте активные элементы управления, инициирующие AJAX запрос или отправку формы на сервер, так вы исключите повторную отправку данных, путаницу или ошибки в своей БД …

Предположим у вас на странице имеется ссылка вида:

<div id=”link_div”><a href=”javascript:void(0);” onclick=”sent_data(10);”>открыть форму</a></div>

функция sent_data инициирует отправку данных на сервер:

function sent_data(id){

$.post(’backend.php’,'ajax=1&id=’+id,insert_form_ext);

}

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

Пишем функцию, назовем ее dyn_button

function dyn_button(text){

if($(”#link_div“).text()==’отправка данных’ || !$(”#link_div“).text()){$(”#link_div“).empty();$(”#link_div“).append(text);

if(text){setTimeout(”dyn_button(”)”, 500);}

else{setTimeout(”dyn_button(’отправка данных‘)”, 500);}}}

и вызываем ее в уже известной нам функции sent_data , предварительно очистив div с id link_div

function sent_data(id){

$(”#link_div”).empty();dyn_button(’отправка данных’);

$.post(’backend.php’,'ajax=1&id=’+id,insert_form_ext);

}

За процесс обработки полученных данных от сервера отвечает функция insert_form_ext

function insert_form_ext(data){

if(data)

{

$(”#link_div”).empty();$(”#link_div“).text(’новое содержимое link_div‘);

//действия с полученными данными

}

}

Таким образом, весь процесс выглядит так: пользователь жмет на ссылку открыть форму, видит мигающую надпись отправка данных на том месте где была ссылка, спокойно дожидается вывода данных на странице и видит новое содержимое на месте там где мигала надпись - что угодно, будь то новая ссылка или текст, все зависит от вашей фантазии.

Как показывает практика, чем меньше мы даем пользователю возможностей отправить повторно данные, тем меньше ошибок приходится затем обрабатывать в обработчике.

Рубрика: Programming

Теги: , , ,

Ссылка на заметку:

Отзывов: 2

Отто Юльевич Шмидт пишет:
7:20 29.11.2008

О, вот это уже что-то полезное.
Так держать. =)

admin пишет:
7:40 29.11.2008

Как оформится, так сразу :)

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

Имя Сообщение
E-mail (обязательно)
Введите 5 + 1 =