Advertisement
  1. Web Design
  2. Ajax

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

Scroll to top
Read Time: 3 min
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 L (you can also view the original English article)

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

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

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

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

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

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

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

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

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

Список возможных значений параметра 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>

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

Example

Помните, что мы хотели обновлять содержимое элемента #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), то конечный результат должен выглядеть примерно так: 

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 параграфа.

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

1
      $btn.on('click', function() {
2
          // this line only changes

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

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

success_jQuery_trim

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

Заключение

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

Advertisement
Did you find this post useful?
Want a weekly email summary?
Subscribe below and we’ll send you a weekly email summary of all new Web Design tutorials. Never miss out on learning about the next big thing.
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.