Что нового в jQuery 1.5?

Опубликовано admin - пт, 02/04/2011 - 21:33

Здравствуйте уважаемые читатели, на официальном сайте появилась новая версия jQuery 1.5, что нового придумала команда разработчиков?.

Оглавление статьи "Что нового в jQuery 1.5?"

  1. Основные изменения в jQuery
  2. Изменения в jQuery ajax
  3. Более сложные изменения в ajax
  4. Функции отложенного выполнения
  5. Метод when
  6. Методо reject
  7. Методы resolveWith и rejectWith
  8. Объект jqXHR
  9. Новый метод jQuery.parseXML()
  10. Новый метод jQuery.sub()
  11. В заключение

Основные изменения в 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, для того чтобы скопировать обработчики событий даже для вложенных элементов копируемого родительского элемента.

В качестве напоминания, не забывайте, что все манипуляции с копируемым объектом, методом clone, допустимы только после встраивания скопированного элемента в документ.

Взаимосвязанные материалы

# 1. О сайте (суббота, июля 6, 2019 - 21:51 ),

Сайт slyweb.ru содержит многочисленную информацию о разработке сайтов и их поддержки в рабочем состоянии.

На сегодняшний день slyweb.ru представляет следующие услуги:

читать...
# 2. Как написать первый плагин на jQuery, с использованием ajax? (воскресенье, июня 3, 2018 - 10:52 ),

Возможно рано или поздно Вам придётся писать серьёзные скрипты на jQuery, поскольку jQuery наиболее популярен в последнее время. читать...

# 3. jQuery для начинающих! (пятница, июня 1, 2018 - 21:28 ),

Возможно Вам интересно спросить: "Почему у меня возникла мысль написать подробное мини-руководство об ajax на jQuery?". читать...

# 4. jQuery - самое нужное! Карусель! (воскресенье, мая 20, 2018 - 19:22 ),

Здравствуйте уважаемые читатели, продолжаем цикл статей о самом нужном в jQuery. Сегодня я научу Вас делать jQuery карусель. читать...

# 5. Аудио плеер на основе HTML5 и jQuery (вторник, апреля 17, 2018 - 19:23 ),

Сегодня я расскажу как сделать интересный вариант плеера на основе html 5 и jQuery.

Плеер будет поддерживать следующие функции:

читать...
На разработку сайта! Скидки до 20%!