Запросы к серверу: $.ajax

AJAX — способ обменяться данными с сервером без перезагрузки страницы: загрузить список задач, сохранить новую. Основная функция для этого в jQuery — $.ajax(). Остальные ($.get, $.post, $.getJSON) — её сокращённые варианты.

Откуда берутся данные

Для примеров нужен сервер, который по адресу /api/tasks отдаёт задачи в формате JSON, например такой, как в курсе Express:

[
  { "id": 1, "title": "Купить хлеб", "done": false },
  { "id": 2, "title": "Позвонить Олегу", "done": true }
]

Страница и сервер должны работать на одном адресе, например http://localhost:3000. Живой пример на сайте обратиться к серверу не может, поэтому код этого урока показан без запуска.

Первый запрос

Разметка в index.html — пустой список:

<ul id="tasks"></ul>

Код в script.js:

// script.js
$(function () {
  $.ajax({
    url: '/api/tasks',
    method: 'GET',
    dataType: 'json',
  }).done(function (tasks) {
    for (const task of tasks) {
      $('#tasks').append($('<li>').text(task.title));
    }
  });
});

$.ajax() отправляет запрос и сразу возвращает объект запроса. Метод done() получает функцию, которая вызовется, когда придёт ответ. Настройка dataType: 'json' говорит jQuery разобрать ответ как JSON, поэтому в tasks уже лежит массив. Откройте страницу — в списке появятся две задачи.

Основные настройки

В старом коде вместо method встречается type — это то же самое.

Ошибки и завершение

fail() вызывается, если сервер ответил ошибкой или не ответил. always() — в любом случае, например чтобы убрать индикатор загрузки:

// script.js
$('#status').text('Загрузка...');
 
$.ajax({ url: '/api/tasks', dataType: 'json' })
  .done(function (tasks) {
    console.log('Задач:', tasks.length);
  })
  .fail(function (xhr) {
    console.log('Ошибка, код ответа:', xhr.status);
  })
  .always(function () {
    $('#status').text('');
  });

Если адрес неверный, в консоли появится «Ошибка, код ответа: 404», а надпись «Загрузка...» исчезнет в обоих случаях.

Отправка JSON

По умолчанию данные из data уходят как поля формы. Если сервер ждёт JSON, его нужно указать явно:

// script.js
$.ajax({
  url: '/api/tasks',
  method: 'POST',
  contentType: 'application/json',
  data: JSON.stringify({ title: 'Написать отчёт' }),
  dataType: 'json',
}).done(function (task) {
  $('#tasks').append($('<li>').text(task.title));
});

Сервер сохраняет задачу и возвращает её, а страница добавляет новый пункт в список.

То же на обычном JavaScript

Вместо $.ajax() сегодня используют fetch() — о нём урок учебника о запросах. Разница: fetch() не считает ответ 404 ошибкой, его нужно проверять через response.ok, а jQuery вызывает fail() сама.

Частая ошибка

Пытаться вернуть данные из функции сразу после запроса:

// script.js
let tasks = [];
$.ajax({ url: '/api/tasks', dataType: 'json' }).done(function (data) {
  tasks = data;
});
console.log(tasks.length); // 0 — ответ ещё не пришёл

Запрос асинхронный: строка с console.log выполняется раньше, чем сервер ответит. Всё, что работает с ответом, пишите внутри done() или используйте промисы из урока о $.Deferred.