JavaScript. Подробное руководство, 6-е издание
вернуться

Флэнаган Дэвид
Шрифт:

$("img"). bind({

mouseover: function { S(this).stop(true).delay(100).fadeTo(300, 1.0): },

mouseout: function { S(this).stop(true).fadeTo(300, 0.5): }

});

Последняя группа методов, с которыми мы познакомимся, предоставляют низкоуровневый доступ к механизму очередей в библиотеке jQuery. Очереди в библиотеке jQuery реализованы в виде списков функций, которые выполняются в порядке их следования. Каждая очередь связана с определенным элементом документа (или с объектом

Document
или
Window
), и все очереди в элементах не зависят друг от друга. Добавить новую функцию в очередь можно с помощью метода
queue.
Когда функция достигнет головы очереди, она будет автоматически исключена из очереди и вызвана. Внутри этой функции ключевое слово
this
ссылается на элемент, с которым связана данная очередь. В единственном аргументе функции будет передана другая функция. Когда функция из очереди завершит свою работу, она должна вызвать переданную ей функцию; тем самым она запустит следующую операцию из очереди. Если эта функция не будет вызвана, обработка очереди будет заморожена и оставшиеся в ней функции никогда не будут вызваны.

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

// Проявить элемент, подождать, записать в него текст, и изменить его рамку

$("«message").fadeIn.delay(200).queue(function(next) {

$(this).text("Пpивeт, Мир!"); // Вывести текст

next; // Запустить следующую функцию в очереди

}).animate({borderWidth: "+=10рх;"}); // Увеличить толщину рамки

Аргумент с функцией, который передается функции, помещаемой в очередь, - это новая особенность, появившаяся в версии jQuery 1.4. При использовании более ранних версий библиотеки функции в очереди извлекали следующую функцию «вручную», вызывая метод

dequeue
:

$(this).dequeue; // Вместо next

Если очередь пуста, метод

dequeue
ничего не делает. В противном случае он удаляет функцию, находящуюся в голове очереди, и вызывает ее, устанавливая значение ссылки
this
и передавая функцию, описанную выше.

Кроме того, существует еще несколько методов управления очередью вручную. Метод

clearQueue
очищает очередь. Если вместо единственной функции передать методу
queue
массив функций, он заменит текущую очередь новым массивом функций. А вызов метода
queue(
) без аргумента вернет текущую очередь в виде массива. Кроме того, библиотека jQuery определяет версии методов
queue
и
dequeue
в виде вспомогательных функций. Например, если потребуется добавить функцию f в очередь элемента е, сделать это можно будет с помощью метода или функции:

$(е).queue(f); // Создать объект jQuery, хранящий е. и вызвать метод queue

jQuery.queue(e,f); // Просто вызвать вспомогательную функцию jQuery.queue

Наконец, обратите внимание, что методы

queue, dequeue
и
clearQueue
принимают необязательный первый аргумент с именем очереди. Методы анимационных эффектов используют очередь с именем «fx» и именно эта очередь используется по умолчанию, если имя очереди не указано явно. Механизм очередей в библиотеке jQuery с успехом можно использовать для выполнения асинхронных операций в определенной последовательности: вместо того чтобы передавать функцию обратного вызова каждой асинхронной операции, чтобы она запускала следующую функцию в последовательности, для управления последовательностью можно использовать очередь. Просто используйте имя очереди, отличное от «fx», и не забывайте, что функции в очереди не вызываются автоматически. Чтобы запустить первую функцию в очереди, необходимо явно вызвать метод
dequeue,
а по завершении каждая операция должна запускать следующую.

19.6. Реализация Ajax в библиотеке jQuery

Ajax - популярное название комплекса приемов разработки веб-приложений, в которых применяются возможности использования протокола HTTP (глава 18) для загрузки данных по мере необходимости без перезагрузки страниц. Приемы Ajax оказались настолько полезны в современных веб-приложениях, что в библиотеку jQuery были включены вспомогательные функции, реализующие и упрощающие их использование. Библиотека jQuery определяет один высокоуровневый вспомогательный метод и четыре высокоуровневые вспомогательные функции. Все они основаны на одной низкоуровневой функции,

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

19.6.1. Метод load

Метод

load
является самой простой из всех утилит в библиотеке jQuery: он принимает URL-адрес, асинхронно загружает его содержимое и затем вставляет это содержимое в каждый из выбранных элементов, заменяя любое имеющееся содержимое. Например:

// Загружать и отображать последнюю информацию о состоянии каждые 60 сек.

setInterval(function { $("#stats").load(”status_report.html"); }, 60000);

Коды состояния Ajax, генерируемые библиотекой jQuery

Все утилиты поддержки архитектуры Ajax в библиотеке jQuery, включая метод

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

«success»

Указывает, что запрос выполнен успешно.

«notmodified»