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

0
764

В первой статье данной серии мы рассмотрели основы 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 возвращаемыми данными при нажатии на кнопку.

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

Предположим, что запрос выполнен успешно (т.е когда 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.

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

See the Pen AJAX with jQuery Demo — load text by exabyte (@exabyte) on CodePen.

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

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

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

success_jQuery_trim

В итоге:

See the Pen AJAX with jQuery Demo — load html by exabyte (@exabyte) on CodePen.

Заключение

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

ОСТАВЬТЕ ОТВЕТ

Пожалуйста оставьте комментарий!
Введите ваше имя