Урок 24: AJAX и Fetch API в JavaScript’е

Сегодня мы разберем одну из ключевых тем в современной веб-разработке, это AJAX и Fetch API. Технологии позволяют вашим веб-приложениям взаимодействовать с сервером без перезагрузки страницы, делая их быстрыми и интерактивными. Готовы погрузиться в мир асинхронных запросов?

Что такое AJAX?

AJAX (Asynchronous JavaScript and XML) это не отдельный язык, а концепция, которая объединяет несколько технологий:

• JavaScript для управления логикой запросов.
• XMLHttpRequest (или современные аналоги, например, Fetch API) для обмена данными с сервером.
• DOM для динамического обновления интерфейса.
• XML/JSON как форматы передачи данных (сейчас чаще используется JSON).

Как это работает?
Раньше веб-страницы обновлялись полностью при каждом действии пользователя (например, отправке формы). С AJAX всё изменилось: вы можете отправлять запросы к серверу в фоновом режиме, получать ответ и обновлять только нужную часть страницы. Это делает приложения быстрее и удобнее.

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

Введение в Fetch API

Раньше для AJAX-запросов использовался XMLHttpRequest, но сейчас ему на смену пришел более современный и удобный Fetch API.

Преимущества Fetch API:

1. Основан на промисах, что упрощает обработку асинхронных операций.
2. Имеет простой и понятный синтаксис.
3. Поддерживает современные стандарты, такие как CORS и потоковая передача данных.

Базовый синтаксис Fetch

fetch(url)
  .then(response => response.json())
  .then(data => console.log(data))
  .catch(error => console.error('Ошибка:', error));

• fetch(url) отправляет GET-запрос по указанному адресу.
• then(response => response.json()) преобразует ответ в JSON.
• then(data => ...) обрабатывает полученные данные.
• catch() ловит ошибки, если запрос не удался.

Получение данных с сервера

Давайте разберем, как получить данные с сервера и отобразить их на странице. Для примера будем использовать JSONPlaceholder, это бесплатный фейковый API для тестирования.

Пример 1: Загрузка списка пользователей

<button id="loadUsers">Загрузить пользователей</button>
<div id="usersList"></div>

document.getElementById('loadUsers').addEventListener('click', () => {
  fetch('https://jsonplaceholder.typicode.com/users')
    .then(response => {
      if (!response.ok) {
        throw new Error('Сервер вернул ошибку');
      }
      return response.json();
    })
    .then(users => {
      const list = document.getElementById('usersList');
      users.forEach(user => {
        list.innerHTML += `<p>${user.name} (${user.email})</p>`;
      });
    })
    .catch(error => {
      console.error('Ошибка:', error);
      alert('Не удалось загрузить данные');
    });
});

Разбор кода:

1. При клике на кнопку отправляется GET-запрос к API.
2. Проверяется статус ответа (response.ok).
3. Данные преобразуются в JSON и выводятся на страницу.
4. В случае ошибки выводится сообщение.

Практические задачи

Чтобы закрепить материал, выполните следующие задания:

Задача 1: Получить и отобразить посты

Используйте эндпоинт https://jsonplaceholder.typicode.com/posts.

• Создайте кнопку, при клике на которую загружаются заголовки постов.
• Добавьте индикатор загрузки (например, текст «Идет загрузка…»), который исчезает после получения данных.

Задача 2: Обработка ошибок

Модифицируйте предыдущий пример:

• Если сервер возвращает статус 404, выведите сообщение «Данные не найдены».
• При ошибке сети (например, отсутствии интернета) покажите «Проверьте подключение к интернету».

Задача 3: Отправка данных на сервер

Используйте fetch для отправки POST-запроса:

fetch('https://jsonplaceholder.typicode.com/posts', {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json',
  },
  body: JSON.stringify({
    title: 'Новый пост',
    body: 'Текст поста',
    userId: 1,
  }),
})
.then(response => response.json())
.then(data => console.log(data));

Создайте форму с полями «Заголовок» и «Текст», отправьте данные на сервер и выведите ответ в консоль.

Заключение

AJAX и Fetch API это мощные инструменты для создания динамических веб-приложений. Они позволяют вашим проектам взаимодействовать с сервером без перезагрузки страницы, что улучшает пользовательский опыт.

Хотите изучить JavaScript от основ до продвинутого уровня? Полный курс «JavaScript для начинающих»