AJAX — технология, благодаря которой сайты обновляют данные без перезагрузки страницы. Когда лента подгружается сама или форма отправляется без «моргания» страницы — это она. Разберём простыми словами.
Что это такое
AJAX — это подход, при котором страница обменивается данными с сервером в фоне, не перезагружаясь целиком. Браузер отправляет запрос, получает ответ (обычно данные в формате JSON) и обновляет только нужную часть страницы. Пользователь видит плавное обновление без «моргания» и перезагрузки.
Где вы это видите каждый день
- Лента соцсети подгружает новые записи, когда вы листаете вниз.
- Поиск показывает подсказки прямо во время ввода.
- Лайк или комментарий засчитывается без перезагрузки страницы.
- Форма отправляется, а страница остаётся на месте.
Как это работает в коде
Сегодня для AJAX-запросов используют функцию fetch:
fetch('/api/data')
.then(function(r){ return r.json(); })
.then(function(data){
// обновляем часть страницы новыми данными
document.querySelector('#list').textContent = data.title;
});Запрос уходит в фоне, а когда данные приходят, скрипт вставляет их в страницу.
Зачем это нужно
AJAX делает сайты быстрыми и отзывчивыми, как приложения: не нужно перезагружать всю страницу ради маленького изменения. Это экономит трафик (грузятся только данные, а не вся страница заново) и улучшает впечатление от использования.
Частые заблуждения
- «AJAX — это отдельный язык». Нет, это подход на основе обычного JavaScript.
- «Нужен именно XML». Нет, сегодня почти всегда JSON.
- «Это устаревшая технология». Идея жива, изменились лишь инструменты (fetch).
Что запомнить
AJAX — обмен данными с сервером в фоне без перезагрузки страницы: браузер запрашивает данные, получает их (обычно JSON) и обновляет только нужную часть. Так работают бесконечные ленты, живой поиск, лайки и формы. Сегодня это делают через fetch, а название с «XML» — историческое.
Коротко: вопросы и ответы
Что делает AJAX? Позволяет обновлять часть страницы данными с сервера без полной перезагрузки.
Нужен ли XML? Нет, сейчас данные почти всегда передают в JSON.
Чем делают AJAX сегодня? Функцией fetch в JavaScript (раньше — XMLHttpRequest).
Что важно учитывать
AJAX-запросы выполняются асинхронно: код не ждёт ответа, а продолжает работать, поэтому обновлять страницу нужно именно тогда, когда данные пришли. Стоит предусмотреть индикатор загрузки, пока идёт запрос, и обработку ошибок на случай, если сервер недоступен. И помните о безопасности: данные с сервера нужно проверять, а не слепо вставлять в страницу.
Чем AJAX отличается от обычной ссылки? Переход по ссылке перезагружает всю страницу, а AJAX подгружает только данные и обновляет её часть.
Комментарии