Здравствуйте уважаемые читатели, на официальном сайте появилась новая версия jQuery 1.5, что нового придумала команда разработчиков?.
Оглавление статьи "Что нового в jQuery 1.5?"
- Основные изменения в jQuery
- Изменения в jQuery ajax
- Более сложные изменения в ajax
- Функции отложенного выполнения
- Метод when
- Методо reject
- Методы resolveWith и rejectWith
- Объект jqXHR
- Новый метод jQuery.parseXML()
- Новый метод jQuery.sub()
- В заключение
Основные изменения в jQuery
Прежде всего, изменения коснулись модуля ajax, в него было добавлено обширное количество новых опций - contents, converters, crossDomain, headers, statusCode!
Изменения в jQuery ajax
Начнем с простого - с опции statusCode, данная опция запускает функцию при возврате сервером определенного HTTP ответа, например - 404, 503 и т.д. К примеру, в следующем случае, если ответ будет 404, то появиться диалоговое окно:
Если запрос завершился успешно, опция statusCode принимает те же параметры, что и опция success, если запрос завершится ошибкой, то параметры будут те же, что и параметры возвращаемые опцией error.
Опция headers так же является нововведением и представляет собой объект содержащий данные об HTTP заголовках запроса, передаваемые вместе с запросом, значения содержащиеся в данной опции могут быть перезаписаны в опции beforeSend. Синтаксис использования данной опции очень прост:
Опция contents определяет, как должен jQuery разобрать ответ сервера, основываясь на заголовке Content-Type.
Более сложные изменения в ajax
Добавлена опция converters, предназначенная для конвертации полученных данных из одного типа данных в другой, так же опция предназначена для создания собственных типов содержимого (заголовок Content-Type), в нижеуказанном примере, конечно не конвертирую данные, но преобразую строку в верхний регистр встроенным методом toUpperCase():
Я думаю, в общих чертах, Вы разобрались с опцией converters, пойдём дальше - к опции crossDomain. Данная опция так же не проста в понимании с первого взгляда, но в целом, суть её в том, что если Вы установите значение опции как true, то на серверной стороне позволено будет создавать перенаправление на другой домен(то есть, вы задаёте таким образом, кроссдоменный запрос), что, видимо, - по умолчанию запрещено в jQuery.
Пожалуй, об изменениях в ajax можно закончить рассказывать, однако хотелось просветить аудиторию по поводу объекта jqXHR, поскольку с него начнётся объяснение того, что отличает jQuery от множества других подобных фреймовиков. Данный объект стал поддерживать возможность установки очереди функций для ajax, в зависимости от типа ответа. Разберём пример:
<p><textarea class="code" rel="javascript">
<script type="text/javascript">
$(document).ready(function() {
jqxhr = $.ajax({url: "test1.php"})
.success(function() { alert("success"); })
.error(function() { alert("error"); })
.complete(function() { alert("complete"); });
// ваш код ...
// вторая функция в очереди после успешного выполнения
jqxhr.complete(function(){ alert("second complete"); });
});
</script>
</textarea></p>
При успешности запроса, сперва будет выполнена срока 4, после 6, затем строка 11. Указанный порядок можно установить с помощью отложенных методов к подробному рассмотрению которых мы и подошли. Методы отложенного выполнения К данным методам относятся методы, добавленные в jQuery 1.5: deferred.done() deferred.fail() deferred.isRejected() deferred.isResolved() deferred.reject() deferred.rejectWith() deferred.resolve() deferred.resolveWith() deferred.then() Разберём каждую подробней! Методы deferred.done(), deferred.fail(), deferred.then() схожи тем, что выполняют функцию обратного вызова с тем лишь отличием, метод deferred.done() запускается после успешного выполнения, deferred.fail() - после не успешного, deferred.then() - после функций специально созданных. Можно сказать, что методы deferred.done(), deferred.fail() - аналоги методов .success( doneCallbacks ) .error( failCallbacks ). Общий пример:
В вышеуказанном коде, в строке 8 создаётся объект Deferred(), который используется для создания очередей функций, очередь инициируется с помощью метода resolve(), очищается очередь с помощью метода reject(). Строка 14 создаёт очередь, используя объект Deferred(), при этом функции, содержащиеся в очереди, начинают выполняться, как только функция fadeIn() полностью завершится. Объект Deferred() необходимо указывать для тех методов или пользовательских функций, в которых отсутствует встроенный объект Deferred(). Объект Deferred() встроен во все методы jQuery ajax на основе библиотеки promise. В конце всего листинга есть метод $.when(), данный метод так же является нововведением в jQuery 1.5, суть его согласно официальной документации - в отслеживании выполнения функций, указанных в качестве аргументов, и запуске очереди функций указанных далее.
jQuery Метод when
Метод when() принимает один или несколько объектов, которые должны содержать встроенные объекты Deferred(), если вы передадите в качестве аргументов метода when() простые объекты, то все функции обратного вызова будут вызваны немедленно, а не в порядке очередности. Поэтому в следующем листинге alert сработает после успешного выполнения запроса:
А в этом листинге метод when потеряет практическую надобность, так как в него передан не объект Deferred(), а простая функция.
Ёще один пример, разъясняющий суть метода when, в котором , при нажатии по ссылке, проверяется метка времени и в зависимости от этого происходит запрос к странице test1.php в 9 строке, если ранее запрос совершался хотя бы раз, то с помощью строки ( $.data( element, 'timestamp', timestamp );) устанавливается атрибут timestamp, с той целью, чтобы кэшировать данные и не повторять запроса:
Метод reject
Метод reject удаляют созданную очередь, рассмотрим его на примере недавно указанном выше:
В 13 строке происходит удаление очереди создаваемой объектом Deferred, в результате чего так метод then не будет выполнен, так как метод when не получит завершение функции showDiv().
Методы resolveWith и rejectWith
Методы выполняют те же функции, что и методы resolve и reject, однако вам позволено использовать дополнительные аргументы которые будут доступны в методе done, через this, например:
Объект jqXHR
Объект jqXHR переработан, в jQuery теперь каждый метод поддерживает объект Deferred, нет надобности создавать его явно, так же все методы ajax стали поддерживать повторяющиеся функции обратного вызова, основанные на ajax событиях (error, .success и .complete). В следующем листинге создана цепь функций обратного вызова, в которой созданы так же повторяющиеся методы (complete()):
Новый метод jQuery.parseXML()
Согласно официальному руководству, данный метод является кроссбраузерным решением для разбора xml файлов. Пример официального руководства:
Новый метод jQuery.sub()
Метод создаёт новую копию jQuery объекта ,чьи свойства и методы могут быть изменены без изменение оригинальных свойств и методов jQuery. Ниже, указан пример, в котором создана полная копия jQuery, в которой создается собственный метод myCustomMethod.
В заключение
На последок расскажу Вам про изменения касающиеся метода clone, - в него добавлен необязательный аргумент deepWithDataAndEvents, который необходимо использовать одновременно с аргументом withDataAndEvents, для того чтобы скопировать обработчики событий даже для вложенных элементов копируемого родительского элемента.
72 просмотра
Взаимосвязанные материалы
Сайт slyweb.ru содержит многочисленную информацию о разработке сайтов и их поддержки в рабочем состоянии.
На сегодняшний день slyweb.ru представляет следующие услуги:
читать...Возможно рано или поздно Вам придётся писать серьёзные скрипты на jQuery, поскольку jQuery наиболее популярен в последнее время.
читать...Возможно Вам интересно спросить: "Почему у меня возникла мысль написать подробное мини-руководство об ajax на jQuery?".
читать...Здравствуйте уважаемые читатели, продолжаем цикл статей о самом нужном в jQuery. Сегодня я научу Вас делать jQuery карусель.
читать...Сегодня я расскажу как сделать интересный вариант плеера на основе html 5 и jQuery.
Плеер будет поддерживать следующие функции:
читать...