На этом шаге мы рассмотрим способы слежения за ходом выполнения запроса.
До настоящего момента нам было достаточно просто вызвать метод поддержки AJAX и терпеливо ожидать получения ответа. Однако иногда бывает желательно знать немного больше о том, как протекает процесс выполнения запроса HTTP. На этот случай в библиотеке jQuery имеется несколько функций, используемых для регистрации функций обратного вызова, которые в свою очередь будут вызываться для обработки различных событий, связанных с технологией AJAX.
Двумя примерами таких функций являются методы .ajaxStart() и .ajaxStop(), которые могут присоединяться к любому объекту jQuery. Когда производится вызов метода поддержки AJAX, но при этом фактическая передача данных еще не была осуществлена, запускается функция обратного вызова, зарегистрированная с помощью метода ajaxStart(). И наоборот, когда завершается выполнение последнего активного запроса, запускается функция обратного вызова, зарегистрированная с помощью метода .ajaxStop(). Все функции слежения являются глобальными, в том смысле, что они вызываются при любых взаимодействиях AJAX независимо от того, какой программный код инициировал их.
Мы можем использовать эти методы для предоставления пользователю обратной связи в случае медленных сетевых соединений. Разметка HTML страницы может содержать для этого соответствующее сообщение о загрузке:
<div id="loading"> Loading... </div>
Данное сообщение - всего лишь фрагмент произвольной разметки HTML. Оно, например, может содержать анимированное изображение в формате GIF, имитирующее ход выполнения операции. В данном примере мы добавили в таблицу CSS несколько простых стилей, чтобы при отображении сообщения страница выглядела, как показано на рисунке 1.
Рис.1. Вид сообщения о выполнении загрузки
Однако, следуя духу прогрессивного улучшения, мы не будем добавлять эту разметку HTML в страницу. Она обретает смысл, только когда в браузере включена поддержка JavaScript, поэтому мы будем вставлять ее с помощью jQuery:
$(document).ready(function() { $('<div id="loading">Loading...</div>') .insertBefore('#dictionary'); });
В нашем файле CSS для этого элемента <div> определено правило display: none;, поэтому изначально это сообщение скрыто. Чтобы отобразить его в нужный момент времени, мы просто зарегистрируем функцию обратного вызова с помощью метода .ajaxStart():
$(document).ready(function() { $('<div id="loading">Loading...</div>') .insertBefore('#dictionary') .ajaxStart(function() { $(this).show(); }); });
Прямо в эту же цепочку мы можем добавить реализацию сокрытия сообщения:
$(document).ready(function() { $('<div id="loading">Loading...</div>') .insertBefore('#dictionary') .ajaxStart(function() { $(this).show(); }).ajaxStop(function() { $(this).hide(); }); });
Вот и все! Мы реализовали вывод сообщения на время загрузки.
Рис.1. Вид сообщения о выполнении загрузки
Полный текст этого примера можно взять здесь.Еще раз отметим, что эти методы никак не связаны с конкретными способами запуска взаимодействий AJAX. Метод .load(), подключенный к ссылке А и метод .getJSON(), подключенный к ссылке В, оба будут вызывать выполнение этих действий.
В данном случае такое глобальное поведение является желательным. Однако, на тот случай, когда требуется более высокая избирательность, в нашем распоряжении имеется несколько возможностей. Некоторые из методов контроля, такие как .ajaxError(), передают ссылку на свою функцию обратного вызова объекту XMLHttpRequest. Это может использоваться для различения запросов и реализации различных эффектов. Еще большая избирательность может быть достигнута за счет использования низкоуровневой функции $.ajax(), которая будет рассматриваться немного позднее.
Однако наиболее типичный способ взаимодействия с запросом заключается в реализации функции обратного вызова, вызываемой в случае успешного его завершения, которую мы уже рассмотрели. Мы использовали эту функцию в некоторых предыдущих примерах для обработки данных, получаемых от сервера, и заполнения страницы результатами. Конечно же, она может использоваться и для предоставления обратной связи. Вернемся к нашему примеру, где используется метод .load():
$(document).ready(function() { $('#letter-a a').click(function() { $('#dictionary').load('a.html'); return false; }); });
Мы можем его немного улучшить, добавив эффект проявления, чтобы новое содержимое появлялось на странице не мгновенно, а постепенно. Метод .load() может принимать функцию обратного вызова, которая будет запускаться в момент завершения запроса:
$(document).ready(function() { $('#letter-a a').click(function() { $('#dictionary').hide().load('a.html', function() { $(this).fadeIn(); }); return false; }); });
Рис.2. Постепенное проявление элемента
Полный текст этого примера можно взять здесь.Сначала мы скрыли требуемый элемент и инициировали загрузку. По завершении загрузки с помощью функции обратного вызова мы отображаем элемент с новыми данными, постепенно проявляя его.
На следующем шаге мы рассмотрим AJAX и события.