AJAX в JavaScript

AJAX в JavaScript — подход к обмену данными между веб-страницей и сервером без полной перезагрузки страницы. С помощью AJAX интерфейс может получать новые данные, отправлять формы, обновлять отдельные блоки, подгружать списки, проверять введённые значения и взаимодействовать с API в фоновом режиме.

Название AJAX исторически расшифровывается как Asynchronous JavaScript and XML, но в современной разработке XML используется нечасто. Чаще всего данные передаются в формате JSON, а для запросов применяется интерфейс fetch(). Старый объект XMLHttpRequest по-прежнему поддерживается браузерами, но в новых проектах его обычно заменяют более удобным Fetch API.^[1]^[2]

Что решает AJAX

До широкого использования AJAX многие действия на сайте требовали полной перезагрузки страницы: отправка формы, переход между страницами списка, обновление корзины, проверка логина, загрузка комментариев. AJAX позволяет выполнять такие операции точечно: браузер отправляет HTTP-запрос, получает ответ и обновляет только нужный фрагмент интерфейса.

Типичные задачи AJAX:

загрузка данных из API;
отправка формы без перезагрузки страницы;
автодополнение в поисковой строке;
динамическая фильтрация товаров или статей;
обновление счётчиков, уведомлений и корзины;
подгрузка следующей части списка;
обмен данными с серверной частью одностраничного приложения.

AJAX не является отдельным языком программирования или самостоятельной технологией. Это способ организации взаимодействия между JavaScript-кодом на странице, браузерными API, HTTP-запросами и сервером.

Как работает AJAX-запрос

Обычная схема AJAX-запроса выглядит так:

Пользователь выполняет действие на странице: нажимает кнопку, вводит текст, отправляет форму.
JavaScript перехватывает действие и формирует HTTP-запрос.
Браузер отправляет запрос на сервер.
Сервер возвращает ответ: JSON, HTML-фрагмент, текст, статус операции или ошибку.
JavaScript обрабатывает ответ и изменяет страницу через DOM.

Главное отличие от обычного перехода по ссылке или отправки формы состоит в том, что страница остаётся открытой. Меняется только та часть интерфейса, которую обновляет JavaScript.

Fetch API

fetch() — современный браузерный метод для выполнения сетевых запросов. Он возвращает объект Promise, поэтому хорошо сочетается с async и await.^[3]

Простейший запрос к JSON-ресурсу:

async function loadData() {
  const response = await fetch('/api/articles');
  const data = await response.json();

  console.log(data);
}

Метод fetch() не считает HTTP-ответы с кодами 404 или 500 ошибкой JavaScript. Промис будет отклонён при сетевой ошибке, но при ответе сервера с ошибочным HTTP-статусом нужно отдельно проверять свойство response.ok.

async function loadData() {
  const response = await fetch('/api/articles');

  if (!response.ok) {
    throw new Error('Ошибка HTTP: ' + response.status);
  }

  return await response.json();
}

Отправка данных на сервер

AJAX-запрос может не только получать, но и отправлять данные. Для отправки JSON обычно указывают метод POST, заголовок Content-Type и тело запроса.

async function createArticle(article) {
  const response = await fetch('/api/articles', {
    method: 'POST',
    headers: {
      'Content-Type': 'application/json'
    },
    body: JSON.stringify(article)
  });

  if (!response.ok) {
    throw new Error('Не удалось сохранить данные');
  }

  return await response.json();
}

При отправке форм можно использовать не только JSON, но и объект FormData. Он удобен для обычных HTML-форм и загрузки файлов.

Практический пример

В примере ниже кнопка запускает асинхронную загрузку данных. Чтобы пример работал прямо в статье и не зависел от стороннего сервера, JSON создаётся внутри страницы и передаётся в fetch() через data: URL. В реальном проекте вместо такого URL обычно используется адрес API на сервере.

AJAX-загрузка данных через fetch()

HTML

<section class="ajax-demo">
  <h1>Каталог статей</h1>
  <p>Нажмите кнопку, чтобы загрузить данные без перезагрузки страницы.</p>
  <button id="load-button" type="button">Загрузить статьи</button>
  <div id="status" class="status">Данные ещё не загружены.</div>
  <ul id="articles" class="articles"></ul>
</section>

CSS

body {
  margin: 0;
  padding: 24px;
  font-family: Arial, sans-serif;
  background: #f4f7fb;
  color: #1f2937;
}

.ajax-demo {
  max-width: 720px;
  margin: 0 auto;
  padding: 24px;
  background: #ffffff;
  border: 1px solid #d9e2ef;
  border-radius: 8px;
  box-shadow: 0 8px 24px rgba(31, 41, 55, 0.08);
}

.ajax-demo h1 {
  margin: 0 0 12px;
  font-size: 28px;
}

.ajax-demo p {
  line-height: 1.6;
}

button {
  padding: 10px 16px;
  border: 0;
  border-radius: 6px;
  background: #2563eb;
  color: #ffffff;
  font-weight: 700;
  cursor: pointer;
}

button:disabled {
  background: #94a3b8;
  cursor: default;
}

.status {
  margin-top: 16px;
  padding: 10px 12px;
  background: #eef4ff;
  border-left: 4px solid #2563eb;
}

.articles {
  margin: 16px 0 0;
  padding: 0;
  list-style: none;
}

.articles li {
  margin-bottom: 10px;
  padding: 12px;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 6px;
}

JavaScript

const button = document.getElementById('load-button');
const statusBox = document.getElementById('status');
const list = document.getElementById('articles');

const demoData = [
  { title: 'Что такое JavaScript', section: 'Основы' },
  { title: 'Работа с DOM', section: 'Интерфейс' },
  { title: 'AJAX в JavaScript', section: 'Сетевые запросы' }
];

async function loadArticles() {
  button.disabled = true;
  statusBox.textContent = 'Загрузка данных...';
  list.innerHTML = '';

  try {
    const json = encodeURIComponent(JSON.stringify(demoData));
    const response = await fetch('data:application/json,' + json);

    if (!response.ok) {
      throw new Error('Ошибка HTTP: ' + response.status);
    }

    const articles = await response.json();

    for (const article of articles) {
      const item = document.createElement('li');
      item.innerHTML = `<strong>${article.title}</strong><br><span>${article.section}</span>`;
      list.appendChild(item);
    }

    statusBox.textContent = 'Данные загружены без перезагрузки страницы.';
  } catch (error) {
    statusBox.textContent = 'Не удалось загрузить данные: ' + error.message;
  } finally {
    button.disabled = false;
  }
}

button.addEventListener('click', loadArticles);

Результат

Обработка ошибок

AJAX-код должен учитывать ошибки. Запрос может завершиться неудачно из-за сетевой проблемы, недоступности сервера, ошибки авторизации, неправильного формата ответа или серверной ошибки.

Практичный вариант обработки:

try {
  const response = await fetch('/api/profile');

  if (!response.ok) {
    throw new Error('HTTP ' + response.status);
  }

  const profile = await response.json();
  renderProfile(profile);
} catch (error) {
  showMessage('Данные временно недоступны');
  console.error(error);
}

Пользователю лучше показывать понятное сообщение, а технические детали оставлять в логах или консоли разработчика.

XMLHttpRequest

XMLHttpRequest — старый интерфейс для AJAX-запросов. Именно он долгое время был основным способом фоновой загрузки данных в браузере. Он остаётся доступным, но код с ним обычно длиннее и менее удобен, чем вариант с fetch().

const request = new XMLHttpRequest();

request.open('GET', '/api/articles');
request.onload = function () {
  if (request.status >= 200 && request.status < 300) {
    const data = JSON.parse(request.responseText);
    console.log(data);
  }
};

request.onerror = function () {
  console.error('Сетевая ошибка');
};

request.send();

В новых проектах обычно используют fetch(), а XMLHttpRequest встречается в старом коде, библиотеках совместимости и проектах, где требуется специфическое поведение старого API.

CORS и ограничения безопасности

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

AJAX также не отменяет обычные требования безопасности:

проверка прав доступа должна выполняться на сервере;
пользовательские данные нельзя доверять без проверки;
для изменения данных нужны защита от CSRF и корректная авторизация;
секретные ключи и пароли нельзя хранить в клиентском JavaScript;
ответ сервера нужно обрабатывать аккуратно, не вставляя непроверенный HTML в страницу.

AJAX и современные приложения

AJAX стал основой динамических веб-интерфейсов. На нём построены автоподсказки, личные кабинеты, панели администрирования, онлайн-редакторы, интерактивные карты, чаты и многие элементы одностраничных приложений.

В современных проектах AJAX часто используется вместе с фреймворками и библиотеками: React, Vue, Angular, Svelte и другими. При этом базовая идея остаётся прежней: JavaScript запрашивает данные, получает ответ и обновляет интерфейс без полной перезагрузки страницы.

Когда AJAX не нужен

AJAX не стоит применять для каждой ссылки и каждой формы без необходимости. Обычная загрузка страницы проще, надёжнее и лучше работает без JavaScript. AJAX оправдан, когда он действительно улучшает интерфейс: ускоряет действие, сохраняет состояние страницы, уменьшает объём передаваемых данных или делает взаимодействие удобнее.

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

См. также

Источники

↑ Fetch API // MDN Web Docs.
↑ XMLHttpRequest // MDN Web Docs.
↑ Fetch Standard // WHATWG.

[mdn-fetch-1] Fetch API // MDN Web Docs.

[mdn-xhr-2] XMLHttpRequest // MDN Web Docs.

[whatwg-fetch-3] Fetch Standard // WHATWG.

[1]

[2]

[3]