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

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

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

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

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

1

  	$(selector).load(url[, data][, complete])

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

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

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

1

  - success

2

  - notmodified

3

  - nocontent

4

  - error

5

  - timeout

6

  - abort

7

  - parsererror

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

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

1

      <div>

2

        <img src="Einstein.jpg" alt="Einstein">

3

        <button id="request">Learn more about Einstein</button>

4

        <div id="bio"></div>

5

      </div>

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

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

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

1

      var $btn = $('#request');

2

      var $bio = $('#bio');

3

4

      $btn.on('click', function() {

5

      	$(this).hide();

6

      	$bio.load('Bio.txt', completeFunction);

7

      });

8

9

      function completeFunction(responseText, textStatus, request) {

10

      	$bio.css('border', '1px solid #e8e8e8');

11

      	if(textStatus == 'error') {

12

      		$bio.text('An error occurred during your request: ' +  request.status + ' ' + request.statusText);

13

      	} 

14

      } 

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

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

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

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

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

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

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

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

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

1

      $btn.on('click', function() {

2

          // this line only changes

3

          $bio.load('Bio.html p:first-child', completeFunction);

4

      });

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

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

Заключение

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