На этом шаге мы рассмотрим способы слежения за ходом выполнения запроса.

    До настоящего момента нам было достаточно просто вызвать метод поддержки 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 и события.

Предыдущий шаг Содержание Следующий шаг