Что такое AJAX и как он помогает обновлять контент на странице
2026-02-21 08:03 Diff
https://skillbox.ru/media/code/chto-takoe-ajax-i-kak-on-pomogaet-obnovlyat-kontent-na-stranice/

#статьи

  • 5 июн 2025
  • 0

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

Иллюстрация: Polina Vari для Skillbox Media

Техник-программист, помогает IT-компаниям говорить просто о сложных вещах. Коммерческий редактор, автор статей для «Хабра» и технических сайтов.

Раньше при клике по ссылке страница полностью перезагружалась: экран на мгновение становился белым, сбрасывалось положение прокрутки, и пользователь ждал, пока загрузится новый контент. Теперь всё происходит плавно, без мерцания и полной перезагрузки. Это стало возможным благодаря развитию асинхронных технологий, которые позволяют обмениваться данными с сервером в фоновом режиме.

В этой статье мы познакомимся с одной из таких технологий, которая называется AJAX. Вы узнаете, что это такое и как она помогает создавать интерактивные веб-приложения. Материал рассчитан на фронтендеров, которые изучают JavaScript и только знакомятся с асинхронностью.

Содержание

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

Чтобы было понятно, представьте кнопку Лайк в любой соцсети. Когда вы на неё нажимаете, браузер с помощью AJAX отправляет запрос на сервер, чтобы зафиксировать лайк и получить обновлённое число. Сервер обрабатывает запрос и возвращает новое значение счётчика. При этом изменяется только цифра — сама страница не перезагружается.

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

AJAX впервые появился в 1999 году, когда разработчики Microsoft внедрили его в Internet Explorer 5.0 под названием XMLHttpRequest. На тот момент технология позволяла выполнять простые задачи — например, мгновенно проверять доступность email-адреса во время заполнения формы регистрации. А вот сам термин «AJAX» получил распространение только в 2005 году, после публикации статьи UX-дизайнера Джесси Гарретта «Ajax: A New Approach to Web Applications».

AJAX (произносится как «эйджакс») — аббревиатура от Asynchronous JavaScript And XML, что в переводе означает «асинхронный JavaScript и XML». Вот как Джесси Гарретт объясняет введённый им термин:

AJAX — это не технология. На самом деле это несколько технологий, каждая из которых процветает сама по себе, объединяясь в новые мощные способы. AJAX включает в себя:

  • стандартизированное представление с использованием XHTML и CSS;
  • динамическое отображение и взаимодействие с использованием объектной модели документа;
  • обмен данными и манипулирование ими с использованием XML и XSLT;
  • асинхронный поиск данных с использованием XMLHttpRequest;
  • JavaScript, связывающий всё воедино.
Схема из статьи Джесси Гарретта, на которой показана разница между классической моделью веб-приложений и моделью на AJAX.
В верхней части изображена классическая схема: каждое действие пользователя отправляет запрос на сервер. Ответ приходит после обработки данных — и только тогда обновляется интерфейс. Пока сервер занят, пользователь вынужден ждать — сайт словно «замирает».
В нижней части показана асинхронная модель: между интерфейсом и сервером работает промежуточный слой — AJAX-движок. Он перехватывает действия пользователя и самостоятельно определяет моменты обращения к серверу. Благодаря этому интерфейс работает без пауз и перезагрузок, а данные загружаются в фоновом режиме.
Изображение: Jesse James Garrett / Adaptive Path

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

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

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

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

А теперь представьте новое просторное кафе. Вы делаете заказ, получаете номер и занимаетесь своими делами: ищете столик, общаетесь с друзьями, листаете ленту в телефоне. Когда заказ готов, вас просто вызывают по номеру. Взаимодействие не прерывается: всё происходит параллельно, без ожидания и пауз. Так работают современные сайты.

Схема из статьи Джесси Гарретта, которая показывает, как устроен обмен данными в классической модели и при использовании AJAX.
Слева — традиционный подход. При каждом действии пользователя браузер отправляет HTTP-запрос и получает в ответ полностью готовую HTML-страницу. Интерфейс и данные поступают единым «пакетом».
Справа — модель AJAX. Интерфейс уже загружен, а JavaScript отправляет фоновые запросы к серверу через встроенный AJAX-движок. В ответ сервер возвращает только необходимые данные в формате JSON или XML — вместо полной HTML-страницы. Эти данные подставляются прямо в интерфейс, и страница обновляется без полной перезагрузки.
Изображение: Jesse James Garrett / Adaptive Path

В основе технологии AJAX лежит объект XMLHttpRequest (XHR) — специальный API браузера, который выступает посредником между JavaScript-кодом на странице и сервером. Именно он позволяет отправлять и получать данные в фоновом режиме, не прерывая работу интерфейса. Пока выполняется XHR-запрос, вы можете продолжать взаимодействовать с сайтом — в этом и заключается асинхронность.

Несмотря на слово XML в названии XMLHttpRequest, современный AJAX поддерживает разные форматы данных — от JSON и HTML-фрагментов до обычного текста и бинарных файлов. Однако чаще всего сервер отвечает в формате JSON: он легче по размеру, JavaScript обрабатывает его быстрее, и по сути он стал стандартом в современных веб-приложениях.

Чтобы упростить работу с AJAX, разработчики создали множество инструментов. Ниже мы рассмотрим основные из них и для наглядности покажем, как с их помощью можно отправить запрос к серверу по адресу https://api.example.com/data. Этот адрес лишь заглушка, он не работает в реальности. Мы просто сравним синтаксис разных подходов, а протестировать реальные запросы вы сможете уже в следующем разделе.

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

const xhr = new XMLHttpRequest(); // Создаём объект запроса xhr.open('GET', 'https://api.example.com/data'); // Указываем метод и адрес запроса xhr.onload = function () { // Добавляем обработчик успешного ответа if (xhr.status === 200) { // Проверяем статус ответа console.log(xhr.responseText); // Выводим полученные данные } }; xhr.send(); // Отправляем запрос

jQuery долгое время считалась одной из самых популярных библиотек для работы с AJAX. Она появилась во времена несовместимых браузеров и значительно упростила работу разработчикам, предоставив единый интерфейс для взаимодействия с DOM и асинхронными запросами.

Например, метод $.ajax() предоставляет гибкое управление запросами с более простым и понятным синтаксисом, чем XMLHttpRequest:

$.ajax({ url: 'https://api.example.com/data', // Добавляем адрес запроса method: 'GET', // Указываем тип запроса success: function (data) { // Сообщаем, что делать с полученными данными console.log(data); } });

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

В отличие от XMLHttpRequest, Fetch использует промисы — специальные объекты для работы с асинхронным кодом. Промисы позволяют избежать сложной вложенности функций обратного вызова (колбэков), при которой код становится трудным для чтения.

Примерно так выглядит нагромождение кода с колбэками:

callback1(() => { callback2(() => { callback3(); }); });

А так этот же код выглядит с промисами:

doSomething() .then(doNext) .then(doFinal);

Используем Fetch для нашего GET-запроса:

fetch('https://api.example.com/data') // Отправляем GET-запрос .then(response => response.json()) // Превращаем ответ в объект JavaScript (если он пришёл в формате JSON) .then(data => console.log(data)); // Выводим полученные данные

Axios — современный инструмент для отправки запросов к серверу на основе промисов. Он работает как в браузере, так и в среде Node.js. По сравнению с Fetch API, Axios предлагает больше функций: например, автоматическую конвертацию JSON-данных, встроенную защиту от XSRF-атак и удобную систему обработки ошибок через перехватчики:

axios.get('https://api.example.com/data') // Отправляем GET-запрос .then(response => console.log(response.data)); // Сразу получаем данные в нужном виде

Чтобы лучше понять работу AJAX, давайте рассмотрим несколько простых примеров. В качестве инструмента мы будем использовать JSONPlaceholder — бесплатный тестовый API, который разработан специально для обучения. Он позволяет отправлять и получать фейковые данные, имитируя таким образом поведение настоящего сервера.

Перейдите на указанный сайт, откройте консоль и вставьте этот код:

fetch('https://jsonplaceholder.typicode.com/posts') .then(response => response.json()) .then(data => console.log(data));

В ответ сервер вернёт вам массив из 100 ненастоящих постов:

Скриншот: JSONPlaceholder / Skillbox Media

А теперь для сравнения вы можете вставить немного изменённый код и получить в ответ только один отдельный пост:

fetch('https://jsonplaceholder.typicode.com/posts/1') .then(response => response.json()) .then(data => console.log(data));

Подобным образом можно выполнять и другие запросы: получать список пользователей, комментарии, создавать новые записи или обновлять существующие. Например, с помощью тестового POST-запроса можно отправить фейковый пост — сервер имитирует его сохранение и вернёт объект с уникальным id, временем создания записи и статусом операции. Другие примеры доступных маршрутов (эндпоинтов) и форматов запросов вы найдёте в документации JSONPlaceholder.

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

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

Если во время работы над проектами у вас возникнут сложности — предлагаем несколько полезных ресурсов и инструментов:

  • MDN Web Docs: AJAX — вводная статья по работе с AJAX от Mozilla с понятными примерами и подробным объяснением основ.
  • Ajax | jQuery API Documentation — официальная документация по AJAX-методам в jQuery с примерами использования.
  • Axios Docs — официальная документация по работе с Axios на русском языке с примерами и описанием всех возможностей библиотеки.
  • Public APIs — огромный список бесплатных публичных API, с которыми можно тренироваться в работе с сетевыми запросами.
  • HTTPbin — сервис для тестирования HTTP-запросов с поддержкой различных методов и форматов данных.
  • Postman — популярный инструмент для тестирования API с графическим интерфейсом. С его помощью вы можете создавать и отправлять HTTP-запросы, автоматизировать тестирование, а также организовывать запросы в коллекции и делиться ими с командой.
  • JSON Server — удобный инструмент для быстрого создания тестового REST API на основе JSON-файла. Можно использовать для прототипирования и тестирования веб-приложений.
Курс с трудоустройством: «Профессия Разработчик + ИИ» Узнать о курсе