AJAX

Название расшифровывается как Asynchronous JavaScript and XML и появилось в 2005 году, хотя сам механизм — объект XMLHttpRequest — браузеры поддерживали и раньше. Сегодня вместо XML почти всегда передают JSON или готовый кусок HTML, а запросы пишут через fetch, но слово прижилось.

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

Как это устроено в Битриксе

Есть два уровня. Первый — параметр AJAX_MODE у стандартных компонентов: если включить его в настройках, ссылки и формы внутри области компонента (постраничная навигация, сортировка) начинают перезагружать только эту область. Второй — собственные обработчики: класс компонента реализует интерфейс \Bitrix\Main\Engine\Contract\Controllerable или используется контроллер на базе \Bitrix\Main\Engine\Controller, а на фронтенде их вызывают через встроенную библиотеку BX.

Пример вызова действия компонента

BX.ajax.runComponentAction('my:feedback', 'send', {
    mode: 'class',
    data: { name: 'Иван', phone: '+79990000000' }
}).then(function (response) {
    console.log(response.data);
}, function (response) {
    console.error(response.errors);
});

Здесь send — метод sendAction() в class.php компонента. Ядро само проверяет сессию (защиту от CSRF), если в configureActions() это не отключено.

Где AJAX подводит

• Содержимое, которое подгружается только по клику, поисковый робот может не увидеть. Важные тексты и ссылки на товары лучше отдавать в исходном HTML.
• Если фильтр меняет выдачу, но не меняет адрес, страницу с результатом нельзя ни сохранить в закладки, ни отправить коллеге.
• Включённый AJAX_MODE плюс кэширование компонента иногда дают «застывшие» данные: ответ берётся из кэша, собранного для другого пользователя или другой страницы.

Подробнее о том, как компонент собирает и выводит данные, — в статье о компоненте Битрикс.