Простыми словами про AJAX

AJAX (Asynchronous JavaScript and XML) — это способ, с помощью которого веб-страница может обмениваться данными с сервером без перезагрузки.

Простыми словами:

Когда вы, например, пишете комментарий на сайте и он появляется сразу, не обновляя всю страницу — это работает AJAX.

Как это работает

1. Страница уже загружена

Вы заходите на сайт — браузер получает и отображает HTML, CSS и JavaScript. Всё готово для взаимодействия, но мы не хотим перезагружать страницу при каждом действии пользователя.

2. Пользователь нажимает кнопку

Например, вы написали комментарий и нажимаете «Отправить». В обычном случае (без AJAX) браузер бы перезагрузил всю страницу, чтобы отправить данные на сервер. Но с AJAX всё происходит в фоне, без перезагрузки.

3. JavaScript отправляет запрос на сервер

Скрипт (обычно написанный на JavaScript) использует специальные функции (например, fetch или XMLHttpRequest) и отправляет данные (например, ваш комментарий) на сервер асинхронно — то есть параллельно с работой страницы. Пока идёт запрос, вы всё ещё можете взаимодействовать с сайтом — ничего не тормозит.

4. Сервер обрабатывает запрос и отвечает

Сервер получает данные, например, сохраняет комментарий в базе данных и возвращает ответ, например:

{ "status": "ok", "message": "Комментарий сохранён", "id": 123 }

5. JavaScript получает ответ и обновляет часть страницы

Когда ответ приходит, JavaScript не перерисовывает всю страницу, а только:

• добавляет ваш новый комментарий в список;
• показывает сообщение «Комментарий добавлен»;
• очищает поле ввода и т.д.

Плюсы AJAX

1. С AJAX веб-приложения работают быстрее, потому что:

• не нужно загружать всю страницу заново;
• передаются только нужные данные, а не целый HTML-документ.

2. Запросы к серверу выполняются в фоне, а пользователь может продолжать работу с сайтом. Это улучшает UX (user experience) и позволяет, например:

• загружать новые посты при прокрутке (бесконечная лента),
• обновлять графики и таблицы в реальном времени.

3. Изначально AJAX использовал XML, но сейчас чаще работают с:

• JSON — компактнее и удобнее,
• HTML-фрагментами — иногда сервер просто отдаёт кусок HTML,
• текстом или даже бинарными файлами (например, изображения).

4. AJAX — основа для взаимодействия с REST API и GraphQL. Через AJAX клиент (браузер) может выполнять:

• GET — получить данные (например, список товаров),
• POST — отправить данные (например, форму),
• и другие методы (PUT, DELETE и т.д.).

AJAX используется чаще всего в:

• онлайн-чатах (новые сообщения без обновления страницы),
• фильтрах в интернет-магазине (сортировка и выбор категорий),
• системах голосования (лайк, звёздочки, рейтинги),
• автоподсказках при вводе (как в Google или YouTube).

Обсудить статью, узнать больше можно в телеграм канале «Тестировщики нужны».