Unlimited Wordpress themes, plugins, graphics & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Web Design
  2. Ajax

Как использовать jQuery функцию "ajax"

by
Difficulty:IntermediateLength:MediumLanguages:
This post is part of a series called AJAX for Front-End Designers.
A Beginner’s Guide to AJAX With jQuery

Russian (Pусский) translation by Anton Lisovsky (you can also view the original English article)

Тщательно изучив предыдущие 3 статьи данной серии, вы должны иметь хорошее понимание AJAX. В данном заключительном уроке мы обобщим ранее сказанное с помощью наглядных примеров.

Разметка

Для того, чтобы ознакомиться со структурой данного примера, давайте рассмотрим следующую разметку:

Разметка для элемента main показана ниже:

Обратите внимание на ссылки. Они соответствуют различным front-end фрэймворкам. Как мы можем видеть в следующем разделе, каждый раз, когда мы нажимаем на ссылку, выполняется AJAX запрос. Затем появится элемент с классом modal и его содержимое будет обновлено данными, извлеченными из ответа.

Так выглядит элемент main:

Main_Element

Модальная разметка

На следующем шаге рассмотрим структуру модального окна. Вот HTML код:

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

Изображение ниже показывает, как первоначально появляется модальное окно:

Modal

По умолчанию модальное окно скрыто. Кроме того, мы так же скроем loader. Это будет появляться только тогда, когда срабатывает AJAX запрос.

Взгляните на соответствующие CSS правила:

Обратите внимание, что мы используем свойство opacity (а не свойства display) для скрытия модального окна, так как это свойство принадлежит к анимируемым CSS свойствам. Таким образом, мы можем изменять состояние модального окна (т.е открытое и закрытое состояние).

Генерация JSON ответа

Для целей данного примера, мы решили создать себе JSON ответ. В частности, ожидаемый отклик (т.е файл Demo.json) будет массивом объектов. Каждый объект будет содержать детали, касающиеся взаимосвязанных front-end фрэймворков. 

Более того, значение свойства name будет соответствовать текстовым ссылкам элемента main (см. выше) Помня об этом, структура ответа выглядит примерно следующим образом:

Обратите внимание: значения, используемые для свойств numberOfStars и currentVersion - не реальный и используются исключительно для демонстративных целей.

Подобно предыдущим примерам данной серии, мы будем использовать AJAX для запроса статического файла. Однако, если вы хотите вставить содержимое с других сайтов (например Google Maps, Flickr), вы должны читать их собственную API документацию и, если это необходимо, применить API key.

Более того, наши данные находятся на том же сервере, что и демо страница. Следовательно, мы будем избегать ограничений, которые могут возникнуть при взаимодействии со сторонними службами (см. раздел "ограничение AJAX запросов" в первой статье).

Внедрение AJAX запроса

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

Теперь пришло время, чтобы изучить код, который отвечает за исполнение запроса:

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

Параметр settings это объект конфигурации, который содержит информацию о нашем запросе. Количество свойств, которое может иметь этот объект является достаточно большим (около 34 свойств). Для простоты, мы рассмотрим только те, которые используются в данном уроке. Более подробно:

Свойство Описание
url Строка, содержащая URL которому отправлен запрос.
dataType формат возвращаемых данных (например json, xml, html).
beforeSend callback функция, которая выполняется до того, как мы отправили запрос. Эта функция будет показывать загрузчик.

Перед тем, как двигаться дальше, стоит отметить три вещи:

  • Существует так же другой синтаксис для функции ajax: $.ajax(url[, settings])
  • Все свойства конфигурации параметра settings не являются обязательными.
  • по умолчанию HTTP метод - GET.

Перспектива методов

функция ajax возвращает jQuery объекты XMLHttpRequest или jqXHR. Этот объект реализует интерфейс Promise, и, таким образом, он содержит все свойства, методы и поведение Promise.

В этом примере мы используем следующие Promise методы: 

метод done срабатывает если запрос успешен. Он получает один или несколько аргументов, все из которых могут быть либо отдельными либо являться массивом объектов. Например, в нашем демо, successFunction() передается в качестве аргумента.

callback функция (например successFunction() ) принимает 3 аргумента. Во-первых, возвращаемые данные. Во-вторых, строку, которая классифицирует статус запроса (см. предыдущую статью для возможных значений) И, наконец, объект  jqXHR.

Метод fail вызывается, когда запрос не удался. Он получает один или несколько аргументов,  Например, в нашем демо, errorFunction() передается в качестве аргумента.

callback функция (например errorFunction() ) принимет 3 аргумента: объект jqXHR, строка, которая классифицирует статус запроса и еще одна строка, которая определяет полученную ошибку. Эта ошибка получает текстовую часть HTTP статуса, такую как Not Found или Forbidden.

Метод always выполняется, когда запрос закончен, несмотря на то, как он закончен - успешно (например, выполняется метод done) или не с ошибками (например, выполняется метод fail). Опять же, в качестве аргумента он получает одну функцию или же массив функций. Например, в нашем демо, alwaysFunction() передается в качестве аргумента.

Состояние запроса определяет аргументы функции. В случае успешного запроса callback функция (например, alwaysFunction()) принимает те же аргументы, что и метод done. Напротив, если запрос ошибочен, функция принимает те же аргументы, что и метод fail.

Обратите внимание: вместо Promise методов done, fail, и always, которые используются в данном примере, мы могли бы в равной степени использовать callback функциии success, error, и complete. Эти функции определены в параметрах settings.

Отображение данных

Если запрос успешен, то мы можем обратно получить ответные данные. Затем, мы управляем ими так, чтобы заполнить пучтые элементы модального окна.

Рассмотрим код для функции successFunction:

Хоть мы и обновили содержимое нашего модального окна, оно еще скрыто. Он станет видимым и загрузчик исчезнет, когда запрос завершится. Только тогда будет выполняться функция alwaysFunction:

класс active выглядит примерно так:

Ниже вы можете видеть ожидаемый внешний вид модального окна, если нажмете на ссылку Bootstrap:

success_jQuery

Несколько сценариев

Важно понимать код, который выполняется при определенных обстоятельствах. Давайте рассмотрим 2 основных сценария:

  • Значение свойства name не совпадает с текстом ссылки элемента main. Например, давайте предположим, что мы определяем URL, где значение свойства name, объекта, который связан с фрэймворком Foundation  это Foundation2  а не Foundation. В таком случае, если мы нажмем на текстовую ссылку Foundation , появится модальное окно:
Error_Modal
  • Возвращаемые данные пусты. Скажем, например, что мы определяем URL, который указывает на пустой массив. В этом случае, модальное окно будет выглядеть следующим образом: 
Empty_Response

Обработка ошибок

Итак, мы рассмотрели код, который вызывается, когда запрос успешен. Но что происходит, если случается ошибка? В случае неудачного запроса, мы скрываем список и показываем пользовательское сообщение.

Ниже код failFunction(), который демонстрирует данное поведение:

Для того, чтобы ознакомиться с этим кодом, мы укажем URL, который не существует. Следовательно, будет выполняться метод fail и буде показано модальное окно:

Fail_Modal

Обратите внимание: сообщение об ошибке может отличаться, если вы запустите этот пример локально.

Вот встроенный пример Codepen:

Вывод

В этом уроке мы закончили рассмотрение AJAX c точки зрения веб-дизайнера. Я надеюсь, что данная серия была полезной для вас и вы повысили свой скилл! 

Для более глубокого изучения, я советую вам ознакомиться со следующими темами:

  • Изучите jQuery AJAX короткие методы, которые мы не рассмотрели (то есть $.getJSON метод).
  • Разработайте свои собственные AJAX запросы для получения статичных, либо динамичных данных со сторонних сервисов (например Flickr).
Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.