jQuery для начинающих!

Опубликовано admin - пт, 06/01/2018 - 21:28

Возможно Вам интересно спросить: "Почему у меня возникла мысль написать подробное мини-руководство об ajax на jQuery?". Ведь сегодня довольно - таки много статей, объясняющих сущность и назначение методов ajax на jQuery. Я отвечу: "Статей много, но все-таки, во всех аспектах они не раскрывают ajax методы jQuery". К примеру в большинстве из них вы увидите шаблонные примеры, взятые с официального jQuery руководства, с некачественным переводом, копируемые с одних сайтов на другие, что в ГК РФ называется плагиатом. Такое дело могло бы приносить пользу, если копируемые статьи на самом деле имели значимую ценность для тех кто собрался изучать jQuery. В целях исправления данного недостатка я решил написать анализ всех ajax методов jQuery С чего начнём? - Я думаю следует начать с теории.

Оглавление. Ajax.

1. Во-первых, теория. Когда следует использовать jQuery Ajax?
2. Во-вторых, опять теория. Как устроен ajax на jQuery?
3. Практика. Как отправить запрос на сервер и получить данные?
4. jQuery.post как наиболее распространённый ajax метод в jQuery
5. Вот мы и добрались до сердца jQuery Ajax - jQuery.ajax(option)
6. Глобальная настройка ajax
7. Сюрприз в заключение! Постраничный вывод с jQuery, PHP и Mysql!

1. Во-первых, теория. Когда следует использовать jQuery Ajax?

 

Хотя ajax на jQuery устроен гораздо мощнее нежели ajax создаваемый на javascript, его не следует применять везде где вам вздумается, не забывайте, что jQuery тот же javascript, но при его подключении вы утяжеляете страницу как минимум на 50 к.байт, иногда и на 150 к.байт. Более этого jquery для неопытных пользователей может существенно ухудшить работу сайта, так как при всей его простоте Вы забываете про правила написания кода на javascript. Поэтому, если Вам необходим простой запрос, который возвращает слова из базы данных, то создайте свой httpRequest или ActiveXML и не используйте jQuery.

2. Во-вторых, теория. Как устроен ajax на jQuery?

Все ajax методы jQuery автоматически создают и в дальнейшем используют XMLHttpRequest(в IE ActiveXObject) объект, это объект, ответственный за создание удаленного запроса на сервер и за возврат данных с сервера. Я не буду вникать в подробности связанные с данным объектом, так как в jQuery существенно ограничены возможности по его модификации. Единственная функция которая позволяет это делать - опция метода jQuery.ajax.option() xhr. Подробней о ней я расскажу позже? так как сейчас для начинающего будет не понятен её смысл.

В jQuery существует официальное деление всех ajax методов на две группы:

  • низкоуровневый ajax интерфейс
  • высокоуровневый ajax интерфейс (упрощенные ajax методы)

К первой группе относятся два jQuery ajax метода:

  • jQuery.ajax(options)
  • jQuery.ajaxSetup(options)

Ко второй группе относятся, соответственно остальные jQuery методы:

  • load(url, data, callback)
  • jQuery.get(url, data, callback, type)
  • jQuery.getJSON(url, data, callback)
  • jQuery.getScript(url, callback)
  • jQuery.post(url, data, callback, type)

Низкоуровневый ajax интерфейс предоставляет больше возможностей для работы с объектом XMLHttpRequest(в IE ActiveXObject), например в методе jQuery.ajax(options) вы можете установить обработку глобальных jQuery ajax событий (ajaxStart,ajaxStop,ajaxSucess,ajaxComplate,ajaxError), например, если Вам необходимо перед отправкой данных на сервер отобразить прогрессбар, а после того как данные успешно будут возвращены его скрыть, то метод jQuery.ajax(options) как раз то, что Вам нужно. Либо иногда возникает необходимость в том, чтобы отправить данные на сервер не как строку, а как необработанный объект, по умолчанию упрощенные методы трансформируют все данные отсылаемые на сервер в строковой тип, чтобы исправить это Вы опять же должны применить метод jQuery.ajax(options), изменив опцию processData на false. В общем, надеюсь Вы поняли, что основное отличие низкоуровневых методов ajax от высокоуровневых в том что они предоставляют больше возможностей при работе с ajax.

Какой тип выбрать? Всё зависит от Вас. Для начала начнём с простых ajajx методов.

3. Практика. Как отправить запрос на сервер и получить данные?

Если Вам необходим отрезок HTMl кода, который встраивается в структуру страницы, то вполне подойдет метод $.load():

Если Вам необходим не только отрезок HTMl кода, который встраивается в структуру страницы, но и разбор xml, то опять же Вам подойдет метод $.load():

Если Вам необходим не только отрезок HTMl кода, который встраивается в структуру страницы, но и разбор xml, то опять же Вам подойдет метод $.load():

При условии, что код php будет следующим:

Посмотрите в firebug, запрос изменился с типа GET, установленного по умолчанию, на тип POST, так как мы создали и передали на сервер объект ({limit: 25}). Ответ на третий вопрос:

 

Надеюсь, теперь Вы сможете без затруднений применять метод jQuery load, а мы пойдём дальше от простого к менее простому - jQuery.post.

4. jQuery.post как наиболее распространённый ajax метод в jQuery

Хотя данный метод хорошо рассмотрен в руководстве jQuery - jQuery.post , встречаются иногда люди которые не могут разобраться в нём. Поэтому я решил упростить их жизнь. Во-первых, в чём Вы спросите меня отличие jQuery.post от load(). Отличие в следующем:

  • В названии, - шучу, но есть здесь и правда, метод $.post() как не трудно догадаться из самого названия - метод создаёт запрос с типом POST. Возможно Вы заинтересуетесь и другим вопросом а можно исправить на GET запрос? Нет нельзя, используйте метод $.ajax(option) для этих целей.
  • В том, что Вам предоставлена большая свобода по использованию различных типов, возвращаемых данных. В $.load тип ограничен html, а в этом методе их побольше: "xml", "html", "script", "json", "jsonp", или "text".
  • Данный метод позволяет вернуть в функции обратного вызова статус, который может содержать следующие значения: "timeout", "error", "notmodified", "success", "parsererror".

Во-вторых в чём Вы спросите меня отличие jQuery.post от jQuery.ajax(option). Отличие в следующем:

  • Метод $.post() создаёт запрос с типом POST, jQuery.ajax(option) позволяет изменить его на тип GET;
  • Метод jQuery.ajax(option) поддерживает более двадцати различных опций;
  • Страницы возвращаемые с помощью метода $.post() никогда не кэшируются, в то время как метод jQuery.ajax(option) позволяет сократить время и запросы, позволяя Вам кэшировать запросы. Для этого применяйте опции cache и ifModified.

Указанные отличия можно свести на нет, например, метод $.post(url,data,calback(){...},dataType) равнозначен:

Можно сказать что надобность в $.post() возникает, когда метода load() недостаточно для поставленных задач, а метод $.ajax() слишком сложен для создания и использования. Простейший пример использования метода $.post():

При условии, что страница php будет содержать следующий код:

Метод post() вполне пригоден для разбора xml данных:

Данный пример удобный способ обработки xml, только не забывайте указывать верный тип данных и создавать на стороне сервера корректный php файл. На этом с методом $.post я закончу, подробные примеры и описание Вы так же можете найти на этом сайте - jQuery.post или на официальном сайте - jQuery.post

Данный пример удобный способ обработки xml, только не забывайте указывать верный тип данных и создавать на стороне сервера корректный php файл. На этом с методом $.post я закончу, подробные примеры и описание Вы так же можете найти на этом сайте - jQuery.post или на официальном сайте - jQuery.post

5. Вот мы и добрались до сердца jQuery Ajax - jQuery.ajax(option)

jQuery.ajax(option) - самый популярный jQuery плагин на сегодняшний день. Основные возможности jQuery.ajax(option):

  • Возможность использовать глобальных ajax событий(ajaxStart,ajaxStop,ajaxSuccess,ajaxError,ajaxComplete);
  • Возможность глобальной настройки ajax(с помощью $.ajaxSetup() вы создаёте шаблон для всех последующих запросов, а в самом запросе меняете отдельные параметры запроса);
  • Только в jQuery.ajax(option) Вы можете использовать огромное количество опций, конфигурирующих ajax запрос(всего 25 опций, далее будут описаны наиболее популярные или трудно воспринимаемые опции)

6. Глобальная настройка ajax

Для глобальной настройки используется метод ajaxSetup(). В данном методе могут содержаться любые из опций, рассматриваемые на странице, посвященной методу $.ajax(option) - jQuery.ajax(option), ниже указан полный список опций с кратким описанием:

  • async: true - запрос будет асинхронным, false - синхронным;
  • beforeSend: функция обратного вызова, выполняемая перед отправкой запроса;
  • cache: true - кэшировать запросы, false - не кэшировать запросы;
  • contentType: тип контента;
  • contextObject: ;
  • data: данные отправляемые на сервер;
  • dataFilter: функция фильтрующая ответ сервера (см. пример ниже);
  • dataType: тип возвращаемых данных(xml,json,html);
  • error: функция обратного вызова, выполняемая в случае ошибки запроса;
  • global: true - обработчики глобальных событий используются, false - обработчики глобальных событий отключены;
  • ifModified: проверка заголовка ifModified, в jQuery 1.4 в дополнение к этому проверяется заголовок etag;
  • jsonp: название имени функции обратного вызова;
  • jsonpCallback: замена стандартного имени функции;
  • password: пароль при использовании аутентификации на сервере;
  • username: имя при использовании аутентификации на сервере;
  • processData: true - данные передаются как строка, false - как объект;
  • scriptCharset: кодировка запроса для jsonp и script;
  • success: функция обратного вызова, выполняемая в случае успешности запроса;
  • timeout: количество;
  • traditional: тип объединения данных;
  • type: тип запроса;
  • url: адрес для отправки запроса;
  • xhr: ;

Пример глобальной настройки ajax:

 

В jquery предусмотрено всего 6 глобальных ajax событий:

  • ajaxComplete(callback) – событие, инициируемое после завершения запроса;
  • ajaxError(callback) – событие, инициируемое в случае ошибки запроса;
  • ajaxSend(callback) – событие, инициируемое в момент отправки запроса
  • ajaxStart(callback) – событие, инициируемое перед отправкой запроса
  • ajaxStop(callback) – событие, инициируемое после завершения запроса(даже если он не успешен)
  • ajaxSuccess(callback) – событие, инициируемое после успешного завершения запроса

И, как Вы видите, каждое из них представляет метод jQuery, содержащий в себе функцию обратного вызова callback. В функцию обратного вызова могут быть переданы следующие параметры: event(событие), XMLHttpRequest(объект запроса), ajaxOptions(опции данного запроса). Чтобы понять, что из себя представляют глобальные ajax события ниже я указал код, определяющий порядок срабатывания данных событий:

Посмотрите на порядок, вполне логично первым сработало событие ajaxStart затем ajaxSend, после него сработало событие ajaxSuccess, затем ajaxComplete и последним ajaxStop. Причем последнее срабатывает независимо от того происходили в запросе ошибки. Укажу лишь ещё один принципиальный момент - на отличия между событием ajaxComplete и событием ajaxSuccess, первое выполняется независимо от ошибки в ajax запросе, второе только при отсутствии таковой.

На этом я думаю можно было бы и закончить, но мы забыли про один пункт указанный в особенностях метода jquery.ajax(option) - подробно рассмотреть опции данного метода. Чуть выше мы дали им описание, сейчас я укажу примеры использования опций. Одна из трудно воспринимаемых опций - dataFilter:

Код php должен быть следующим:

Опция dataFilter является функцией, фильтрующей ответ от сервера. В нашем примере с помощью метода find() отыскивается элемент с id "test1" и его содержимое. То есть данная опция отфильтровала таким образом данные, после этого в функцию обратного вызова для опции success уже передаётся обработанный объект, то есть не весь ответ сервера, а только элемента с id "test1".

Data - опция передающая данные на сервер. По общему правилу данные трансформируются в строку.

Для того чтобы получить на сервере значение массива {foo:["bar1", "bar2"]} необходимо использовать глобальный массив $_POST['foo'][0](bar1) или соответственно $_POST['foo'][1](bar2). Указанные данные можно передать и как строку:

Для того чтобы получить на сервере значение данных "foo=bar1foo=bar2" необходимо использовать глобальный массив $_POST['foo'][0](bar1) или соответственно $_POST['foo'][1](bar2).

Опции name и password. Чтобы использовать аутентификацию на сервере через метод $.ajax(option) можно использовать следующий пример, в котором name и password содержат значение передаваемое в массив $_SERVER['PHP_AUTH_USER'] и $_SERVER['PHP_AUTH_PW']:

Не забывайте правильно сформировать заголовки аутентификации:

Среди новых опций, добавленных в jQuery 1.4.2 появилась опция timeiout. О том как её использовать указано ниже:

На последок объясню назначение опции global. Возьмем код из вышеуказанного примера, с глобальными событиями ajax jquery:

Хотя запрос и будет осуществляться на станицу base.php, но для него не будут срабатывать глобальные события ajax, так как в опции global Вы их отключили(false).

Некоторые опции, по-моему, не требуют рассмотрения вообще, из-за их простоты, например опции cache, ifModified, succes, error, complete, beforeSend,type,url,scriptCharset в своём названии говорят о себе, кроме этого их полное описание содержится на странице руководства jQuery.ajax(options).

7. Сюрприз в заключение! Постраничный вывод с jQuery, PHP и Mysql!

Ниже указаны два php скрипта - page.php и config.php, необходимые для обработки информации получаемой из базы данных mysql и сам дамп базы данных в файле table.sql: page.php:

config.php:

Постраничный вывод на jQuery и PHP вы можете скачать архивом по ссылке - link.zip, в нём содержится четыре файла - index.html, page.php, config.php, table.sql. Не забудьте исправить пароль, имя пользователя и имя базы данных mysql в файле conig.php. Внесите необходимые данные в базу данных через phpmyadmin и пользуйтесь на здоровье!

На этом пока, надеюсь Вам пригодятся мои знания об ajax на jQuery. Успехов и до встреч!

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

# 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%!