Шаг 103.
Библиотека jQuery.
AJAX. Передача данных на сервер. Слежение за ходом выполнения запроса

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

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




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