Программирование • 28 января 2026 • 5 мин чтения

AJAX запросы: как их использовать в веб‑разработке

Пользователи сайтов ждут, что данные будут подгружаться быстро, а интерфейс — реагировать мгновенно. Всё это возможно благодаря AJAX. Рассказываем о нём подробнее.

Что такое AJAX и зачем он нужен
Как работает AJAX: основные принципы
Составляющие AJAX-технологии
Создание первого AJAX-запроса
Примеры использования AJAX в веб-разработке
Преимущества и недостатки AJAX
Современные альтернативы AJAX-подходу
Совет эксперта

Что такое AJAX и зачем он нужен

AJAX (Asynchronous JavaScript and XML) — это способ обмена данными между браузером и сервером, при котором обновление информации происходит без полной перезагрузки страницы. Основа этого подхода — асинхронные запросы: браузер отправляет HTTP-запросы в фоне, обрабатывает полученный ответ и изменяет только нужные элементы интерфейса. При этом пользователь может продолжать работу, а страница не теряет своё текущее состояние.

До появления AJAX любое взаимодействие с сервером приводило к перезагрузке страницы. Даже для простого действия — отправки формы или смены фильтра — нужно было повторно загрузить HTML, CSS и скрипты. Интерфейсы были медленными и неудобными. AJAX помог разделить загрузку данных и отображение интерфейса. В результате сервер передаёт только нужную информацию. А браузер обновляет только те элементы страницы, которые действительно изменились.

Освоить различные подходы к фронтенд-разработке IT-продуктов можно на курсе Практикума «Фронтенд-разработчик». Студенты учатся на реальных проектах, чтобы легче было стартовать в IT. В программе также есть модуль по алгоритмам — чтобы повысить шансы устроиться в Яндекс.

Станьте фронтенд-разработчиком с нуля

Освойте фронтенд-разработку — с нуля за 10 месяцев. Будет много практики на реальных проектах, чтобы вы могли сразу стартовать в IT.

⦁ 9 проектов в портфолио и 500+ задач;
⦁ помощь с поиском работы до 7 месяцев после выпуска;
⦁ приглашения на собеседования чаще на 38% и зарплата выше на 9%*

Подробнее о курсе

Попробовать бесплатную часть →

*Согласно исследованию Практикума, по сравнению с соискателями, не заканчивавшими никаких курсов

Как работает AJAX: основные принципы

Рассмотрим подробнее принципы AJAX. Его работа строится на асинхронном обмене данными между браузером и сервером. Запросы выполняются в фоне и не блокируют работу страницы. Процесс можно разбить на несколько шагов:

Инициирование события. Пользователь выполняет действие: нажимает кнопку, вводит текст, прокручивает страницу. Это событие обрабатывается JavaScript-кодом.
Отправка запроса на сервер. JavaScript формирует HTTP-запрос и отправляет его.
Асинхронное выполнение. Запрос выполняется параллельно с работой интерфейса. Страница не «замораживается» и остаётся доступной для действий пользователя.
Обработка запроса сервером. Сервер получает запрос, обрабатывает его и возвращает данные. Чаще всего ответ приходит в формате JSON.
Получение и обработка ответа. JavaScript получает данные, анализирует их и обновляет нужные элементы страницы: текст, список, таблицу или состояние кнопки.

Один из принципов работы AJAX в том, что сервер не возвращает готовую HTML-страницу целиком. Он передаёт только данные, а логика отображения остаётся на стороне клиента. Вот какие ещё принципы работы AJAX существуют:

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

Составляющие AJAX‑технологии

AJAX — это не одна технология, а набор инструментов. Рассмотрим подробнее их роль.

Создание первого AJAX‑запроса

В современных браузерах AJAX-запросы обычно выполняются с помощью API fetch. Он встроен в JavaScript и не требует сторонних библиотек. Простейший AJAX-запрос на получение данных выглядит так:

fetch ('/api/users')
.then (response => response.json ())
.then (data => {
console.log (data);
})
.catch (error => {
console.error (error);
});

Что здесь происходит:

● fetch ('/api/users') — отправляется GET-запрос на сервер.
● response.json () — ответ преобразуется в объект JavaScript.
● data — полученные данные, с которыми можно работать дальше.
● catch — обработка ошибок сети или сервера.

AJAX часто используется для отправки данных, например из формы:

fetch ('/api/login', {
method: 'POST',
headers: {
'Content-Type': 'application/json'
},
body: JSON.stringify ({
email: 'user@mail.com',
password: '123456'
})
});

В этом примере:

● используется метод POST;
● данные передаются в формате JSON;
● страница не перезагружается после отправки.

Благодаря AJAX не нужно перезагружать всю страницу для каких-то изменений. Перезагрузится лишь её часть

Примеры использования AJAX в веб-разработке

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

Отправка форм. AJAX позволяет отправлять данные на сервер в фоне, сразу показывать результат и не терять введённые данные при ошибке. То есть пользователь нажимает кнопку, получает ответ сервера и продолжает работу на той же странице (например, при заполнении формы авторизации и регистрации, обратной связи, комментариев и отзывов).
Поиск и фильтрация данных. AJAX используется в поиске и фильтрах — например, при автодополнении во время ввода текста, фильтрации товаров по параметрам, сортировке таблиц и списков. Каждое изменение параметров отправляет запрос на сервер, а результаты обновляются без перезагрузки страницы.
Динамическая подгрузка контента. AJAX помогает загружать данные по мере необходимости — например, в случае с кнопкой «Показать ещё», бесконечным скроллом или постраничной навигацией без перезагрузки. Сервер отдаёт данные частями — это ускоряет начальную загрузку страницы и снижает нагрузку.
Интерактивные элементы интерфейса. Многие мелкие действия на сайте работают через AJAX: лайки и дизлайки, добавление в избранное, изменение статуса элементов, переключение состояний.
Уведомления и обновление данных. AJAX используется для периодической проверки новых данных: например, появились ли новые сообщения или уведомления. Браузер отправляет запросы через определённые интервалы и обновляет интерфейс.

Руслан Посевкин, Programme Director в британском университете, Ex‑Software Engineer, автор телеграм-канала Ruslan Talks

AJAX часто используют там, где данные должны меняться «на лету» и без скачков интерфейса. Например, при проверке полей формы прямо во время ввода текста пользователем: свободен ли логин, корректен ли промокод, подходит ли пароль под правила. Сюда же относится автосохранение черновиков: текста в заметках, письма, поста, формы заказа. Пользователь печатает, а данные в фоне сохраняются на сервере.

Также AJAX нужен для загрузки файлов без перезагрузки: обновления аватарки, загрузки документов. В этом случае будет удобно показывать прогресс загрузки и сразу выводить превью загружаемого файла. В админках и дашбордах AJAX помогает обновлять цифры и графики по таймеру или при клике по кнопке «Обновить». В интернет-магазинах так считают цену в корзине, стоимость доставки, проверяют наличие на складе и скидки сразу после изменения количества товаров.

Преимущества и недостатки AJAX

Преимущества	Недостатки
Быстрый отклик интерфейса: данные загружаются в фоне, без перезагрузки страницы.	Усложнение клиентской логики и увеличение объёма JavaScript-кода.
Улучшенный пользовательский опыт за счёт плавной работы интерфейса.	Сложнее отлаживать ошибки и отслеживать состояние приложения.
Экономия трафика: сервер передаёт только необходимые данные.	Повышенные требования к архитектуре и качеству кода.
Возможность обновлять отдельные части страницы.	Зависимость от JavaScript — без него функциональность может быть недоступна.
Подходит для создания интерактивных интерфейсов.	Возможные проблемы с SEO при неправильной реализации
Широкая поддержка в браузерах

Руслан Посевкин

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

Из минусов AJAX: не стоит забывать про обработку сложных ситуаций из реальной практики. Запрос может быть медленным, может прийти два ответа в разном порядке, запрос может быть вообще отменён. Из-за этого бывают «гонки» (race conditions), когда на экране показывается не то, что нужно. Нужно уметь блокировать кнопку на время запроса, делать задержку для обработки ввода (debounce) и отменять старый запрос, если пользователь уже ввёл новый текст.

Современные альтернативы AJAX-подходу

AJAX в чистом виде используют всё реже. В современной веб-разработке он чаще становится частью более высокоуровневых решений.

SPA-фреймворки и библиотеки. React, Vue и Angular используют AJAX внутри, но берут на себя управление состоянием, обновление интерфейса и работу с данными. Разработчик описывает логику приложения, а фреймворк сам решает, когда и какие запросы отправлять и какие части интерфейса обновлять.
GraphQL. Благодаря ему вместо нескольких AJAX-запросов к разным эндпойнтам клиент отправляет один запрос и получает ровно те данные, которые ему нужны. Это снижает количество запросов и упрощает работу с API.
WebSockets. Используют там, где нужен постоянный обмен данными между клиентом и сервером: в чатах, онлайн-уведомлениях, при совместной работе. В отличие от AJAX, соединение не закрывается после каждого запроса, а остаётся активным.

Станьте фронтенд-разработчиком с нуля

Подробнее о курсе

Попробовать бесплатную часть →

*Согласно исследованию Практикума, по сравнению с соискателями, не заканчивавшими никаких курсов

Совет эксперта

Руслан Посевкин

AJAX — это достаточно простой подход: страница не перезагружается, а JavaScript отправляет запрос на сервер и потом обновляет нужную часть интерфейса. Начинающему специалисту важно уметь сделать запрос через fetch, разобрать ответ (чаще JSON) и аккуратно показать результат на странице.

Но одного запроса мало. Нужно понимать статусы ответа 200, 404, 500, обработку ошибок сети и что пользователь, например, может кликнуть несколько раз подряд. Ещё важно знать, как отправлять данные: GET- и POST-запросы, заголовки, Content-Type. Как работает авторизация и почему иногда запросы блокируются из-за CORS. Хорошей практикой будет всегда показывать состояние загрузки и понятное пользователю сообщение об ошибке, если что-то пошло не так.

Статью подготовили: