AJAX

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

История

Предпосылки появления

До середины 2000-х годов в вебе доминировала модель синхронного взаимодействия: пользователь отправлял форму, сервер возвращал новую полностью сформированную HTML-страницу. В начале 2000-х годов появились отдельные реализации асинхронного обмена: в 1999 году корпорация Microsoft реализовала объект XMLHttpRequest в Internet Explorer 5.0 для работы с веб-почтой Outlook Web Access. Однако эта возможность оставалась нишевой и не имела стандартизированного API в других браузерах.

Термин и популяризация

Термин «AJAX» ввёл в 2005 году Джесси Джеймс Гарретт в статье «Ajax: A New Approach to Web Applications». В статье он описал набор технологий, комбинация которых позволила создать веб-приложения, по удобству приближающиеся к настольным. Статья вызвала широкий резонанс, и вскоре AJAX стал активно применяться в крупных сервисах: Google Maps, Gmail, Yahoo Mail. Эти сервисы продемонстрировали возможность работы с картами и почтой без перезагрузки страницы, что кардинально изменило ожидания пользователей от веб-интерфейсов.

Развитие стандартов

В 2006 году Консорциум Всемирной паутины (W3C) начал работу над стандартизацией объекта XMLHttpRequest. Первая черновая версия спецификации уровня 1 появилась в 2008 году. В 2012 году была выпущена рекомендация уровня 2, расширяющая возможности: поддержка бинарных данных, работа с событиями прогресса загрузки, кросс-доменные запросы (CORS). Параллельно, с появлением спецификации Fetch API (стандарт WHATWG, 2015 год), разработчики получили более современный и удобный интерфейс для асинхронных запросов, основанный на промисах (Promise). Fetch API постепенно вытесняет классический XMLHttpRequest в современных приложениях.

Технологический стек

Основные компоненты

• JavaScript: клиентский язык программирования, обрабатывающий пользовательские действия, создающий и отправляющий асинхронные запросы, а также обрабатывающий ответ и обновляющий DOM-дерево (Document Object Model).
• XMLHttpRequest (XHR): встроенный объект браузера, предоставляющий интерфейс для отправки HTTP-запросов к серверу. Позволяет выполнять запросы в асинхронном режиме, не блокируя выполнение другого кода.
• Fetch API: современная альтернатива XHR, встроенная в JavaScript. Использует цепочки промисов для упрощения обработки ответов и ошибок. Поддерживает модульные заголовки, работу с потоками данных и кросс-доменные запросы.
• Серверная часть: принимает запросы, формирует ответы в требуемом формате. Серверная технология не имеет ограничений — это может быть PHP, Python (Django/Flask), Node.js, Java, .NET и др.

Форматы передачи данных

В классическом определении AJAX использовался XML, однако на практике XML не был обязательным и часто заменялся более лёгким JSON.

• JSON (JavaScript Object Notation): стал де-факто стандартом для API благодаря меньшему объёму данных, нативной поддержке в JavaScript (парсинг через JSON.parse()) и простой читаемости человеком. Сегодня более 90% AJAX-запросов используют JSON.
• XML: применяется в устаревших системах или там, где требуется строгая валидация схемы данных (XSD). Парсинг XML сложнее и требует больше вычислительных ресурсов.
• HTML-фрагменты: используются когда нужно обновить часть страницы готовой разметкой, не обрабатывая данные на клиенте. Пример: загрузка комментариев или списка товаров в формате готового HTML.
• Обычный текст или бинарные данные: подходит для загрузки изображений, текстовых файлов, данных CSV.

Кросс-доменные запросы

До появления стандарта CORS (Cross-Origin Resource Sharing) браузеры блокировали запросы к доменам, отличным от домена текущей страницы (политика одного источника). AJAX-запросы могли быть выполнены только в пределах исходного сайта. Современная спецификация CORS (часть Fetch API и XHR уровня 2) позволяет серверу явно разрешить или запретить доступ к своим ресурсам, указывая в заголовке ответа Access-Control-Allow-Origin. Для старых систем применяются обходные методы — JSONP (JSON with Padding) на основе тега <script>.

Архитектура работы

Классическая синхронная модель

1. Пользователь инициирует действие (нажатие кнопки, отправка формы).
2. Браузер отправляет HTTP-запрос к серверу.
3. Сервер обрабатывает запрос, генерирует полную HTML-страницу.
4. Браузер загружает и отрисовывает новую страницу полностью (с мерцанием, потерей прокрутки, состояния).

Асинхронная модель AJAX

1. Пользователь инициирует действие.
2. JavaScript создаёт асинхронный HTTP-запрос (через XMLHttpRequest или fetch()).
3. Браузер продолжает работу — пользователь может взаимодействовать с интерфейсом, запрос выполняется в фоне.
4. Сервер возвращает данные (например, JSON) обычно без HTML-разметки.
5. JavaScript обрабатывает ответ (парсит JSON) и точечно обновляет DOM-элементы (меняет текст, добавляет/удаляет блоки, обновляет таблицы).
6. URL страницы не меняется (кроме случаев использования History API для pushState).

Управление состоянием

AJAX-приложения часто используют объект XMLHttpRequest.readyState (или статус промиса в Fetch) для отслеживания стадий: 0 — не инициализирован, 1 — открыто соединение, 2 — получены заголовки, 3 — идёт загрузка данных, 4 — операция завершена. Обработчики событий onreadystatechange или onload позволяют выполнить код после получения ответа.

Применение

Веб-приложения с богатым интерфейсом (RIA)

• Картографические сервисы: Google Карты, Яндекс.Карты — подгрузка фрагментов карты, поиск объектов, маршруты без перезагрузки.
• Почтовые сервисы: Gmail, Яндекс.Почта — асинхронная проверка новых писем, отправка сообщений, обновление списка папок.
• Социальные сети: VK, Telegram Web — лента новостей, подгрузка комментариев, отправка сообщений, реакции без перезагрузки.
• Онлайн-редакторы: Google Docs, Notion — сохранение изменений в реальном времени, загрузка документов частями.
• Электронная коммерция: интернет-магазины — фильтрация товаров, корзина покупок, подгрузка отзывов без обновления страницы.

Потоковая загрузка данных

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

WebSockets и долгая переписка

Собственно AJAX (на основе HTTP) не поддерживает постоянное соединение. Для задач реального времени (чат, котировки) применяются:

• Long polling: AJAX-запрос остаётся открытым до появления новых данных на сервере.
• Server-Sent Events (SSE): односторонний поток данных от сервера к клиенту.
• WebSocket: полнодуплексное соединение, но не основанное на AJAX-технологиях.

Критика и ограничения

Проблемы совместимости

Объект XMLHttpRequest не был единообразно реализован во всех браузерах до появления стандартов W3C. В Internet Explorer 6 и 7 требовалось использовать ActiveX-компонент (Msxml2.XMLHTTP). Сейчас (2025 год) все современные браузеры поддерживают XHR уровня 2 и Fetch API, но в корпоративных средах могут встречаться старые версии IE, требующие полифилов.

Сложность отладки

AJAX-запросы выполняются асинхронно, что усложняет отладку — ошибки могут проявляться как гонки состояний, неправильные порядки выполнения или потерянные контексты (висящие ссылки на старые объекты). Современные инструменты разработчика (Chrome DevTools, Firefox Developer Tools) предоставляют вкладку «Network» для мониторинга всех запросов, включая AJAX.

Проблемы доступности (Accessibility)

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

Поддержка кэширования и закладок

Поскольку AJAX-запросы не изменяют URL страницы (если не используется History API), пользователь не может сделать закладку на конкретное состояние приложения или вернуться к нему через «назад». Решение — реализация роутинга на стороне клиента с обновлением URL через history.pushState().

Безопасность

• Уязвимость CSRF (Cross-Site Request Forgery): злоумышленник может заставить браузер жертвы выполнить AJAX-запрос к целевому сайту от её имени. Защита — использование CSRF-токенов, проверка заголовка Origin/Referer.
• XSS (Cross-Site Scripting): если AJAX-запрос возвращает HTML или JSON, который напрямую вставляется в DOM без экранирования, возможна инъекция скриптов. Необходима санитизация и использование textContent вместо innerHTML, когда это возможно.

Источники

1. Jesse James Garrett. «Ajax: A New Approach to Web Applications». Adaptive Path, 18 February 2005.
2. спецификация W3C: The XMLHttpRequest Object. W3C Working Draft, 2008–2012.
3. спецификация WHATWG: Fetch Living Standard. WHATWG, 2015–2025.
4. Mozilla Developer Network (MDN). «XMLHttpRequest» и «Using Fetch».
5. Nicholas C. Zakas. «Professional JavaScript for Web Developers» (главы по AJAX и коммуникации).
6. «High Performance Browser Networking» by Ilya Grigorik (главы по HTTP, CORS, WebSocket).
7. закон РФ № 114-ФЗ «О противодействии экстремистской деятельности» (статья 3.2.1, в отношении Meta — экстремистской организации).