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

Дата публикации: 2016-02-17

От автора: в этом уроке мы разберем несколько JQuery функций и методов, связанных с ajax. А точнее мы рассмотрим сокращенный метод load и основную функцию ajax.

Как работать с методом load

JQuery load довольно простой метод для вытягивания удаленных данных, но в то же время мощный. Ниже представлен его синтаксис:

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

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

В таблице представлены возможные параметры:

Параметры колбэк функции:

В списке представлены все возможные значения параметра textStatus:

success

notmodified

nocontent

error

timeout

abort

parsererror

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

<div>
  <img src="Einstein.jpg" alt="Einstein">
  <button id="request">Learn more about Einstein</button>
  <div id="bio"></div>
</div>

<div>

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

</div>

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

Вспомните, нам необходимо обновить содержимое элемента #bio на данные из ответа при нажатии на кнопку. Ниже JQuery код:

var $btn = $('#request');
var $bio = $('#bio');
 
$btn.on('click', function() {
  $(this).hide();
  $bio.load('Bio.txt', completeFunction);
});
 
function completeFunction(responseText, textStatus, request) {
  $bio.css('border', '1px solid #e8e8e8');
  if(textStatus == 'error') {
      $bio.text('An error occurred during your request: ' +  request.status + ' ' + request.statusText);
  } 
}

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

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

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

$(this).hide();

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

});

function completeFunction(responseText, textStatus, request) {

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

if(textStatus == 'error') {

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

}

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

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

Левая часть относится к объекту XHR в консоли браузера на чистом JS (в предыдущем уроке). Справа отображается объект jqXHR с помощью метода load. В случае неуспешного запроса должно появиться соответствующее сообщение. Для этого необходимо проверить значение параметра textStatus и отобразить сообщение:

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

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

Теперь давайте изменим формат запрашиваемого с сервера файла. Нужная нам информация теперь хранится в Bio.html, а не в Bio.txt. В этом файле хранится также два параграфа. Если мы хотим загрузить только первый параграф, то мы должны обновить код:

$btn.on('click', function() {
    // изменилась только эта строка
    $bio.load('Bio.html p:first-child', completeFunction);
});

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

// изменилась только эта строка

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

});

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

И Codepen демо:

Заключение

В этом уроке я продемонстрировал вам принцип работы AJAX в JQuery. Чтобы сделать урок немного интереснее мы разобрали два практических примера. В последнем уроке серии мы соберем все вместе, разобрав более сложный пример.

Автор: George Martsoukos

Источник: //webdesign.tutsplus.com/

Редакция: Команда webformyself.

Метки: Ajax