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

Руководство для начинающих по AJAX с jQuery

by
Difficulty:IntermediateLength:ShortLanguages:
This post is part of a series called AJAX for Front-End Designers.
An Example of AJAX With Vanilla JavaScript
How to Use jQuery’s “ajax” Function

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

В первой статье данной серии мы рассмотрели основы AJAX. Во второй разобрали примеры использования vanilla JavaScript. 

В данной статье мы пройдемся через jQuery функции и методы, который имеют отношение к AJAX. Более подробно мы рассмотрим метод load и функцию ajax.

Использование метода load.

Load - простой и достаточно мощный метод для извлечения удаленных данных. Ниже вы видите синтаксис:

Следующая таблица показывает возможные параметры:

Параметр Описание Необходим
url Строка, содержащая URL, которой отправляется запрос. Да
data Данные (либо строка либо просто объект) который отправляется на сервер с запросом Нет
complete Возвращающая функция, которая выполняется, когда запрос выполнен либо успешно, либо не успешно. Нет

Параметры возвращающей функции: 

Параметр Описание
responseText Данные, полученные из запроса
textStatus Строка, характеризующая статус запроса
jqXHR jQuery объект XMLHttpRequest, который перенастраивает встроенный в браузер XMLHttpRequest (XHR) объект.

Список возможных значений параметра textStatus:

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

Взгляните еще раз на эту простую HTML структуру:

Вот как это выглядит:

Example

Помните, что мы хотели обновлять содержимое элемента #bio возвращаемыми данными при нажатии на кнопку.

Вот так выглядит jQuery код:

Предположим, что запрос выполнен успешно (т.е когда textStatus имеет значение success  или notmodified), то конечный результат должен выглядеть примерно так: 

success_jQuery

Также рассмотрим следующее изображение, которое описывает успешный запрос:

Javascript_jQuery_Objects

Левая часть изображения показывает XHR object, напечатанный в консоли браузера, как если бы мы использовали простой JavaScript (см. предыдущую статью) для создания запроса. С другой стороны, правая часть соответственно показывает  jqXHR объект, если мы используем метод load.

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

error_jQuery

Заметьте: если вы запускаете пример с локального компьютера (и там же храните файл bio.txt), то сообщение об ошибке может отличаться. Например, вы можете видеть следующий результат: 

error_locale_jQuery

Наконец, стоит отметить, что по умолчанию метод load использует HTTP метод GET, если мы отправляем данные на сервер как объект. Только затем вызывается метод POST.

Смотрите пример с exabyte ниже:

Теперь давайте изменим формат файла, который мы запрашиваем с сервера. Для этого примера необходимые данные включены в файл Bio.html, а не в файл Bio.txt. Также стоит отметить, что необходимый файл содержит 2 параграфа.

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

Выглядит это примерно так:

success_jQuery_trim

И это пример с exabyte:

Заключение

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

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.