Реализация AJAX в компонентах Битрикс

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

1. Создаём обработчик AJAX-запросов

Разместим файл в папке компонента, шаблоне или /ajax/:

<?
header("Content-type: application/json; charset=utf-8");
header("Cache-Control: no-store, no-cache, must-revalidate");
header("Cache-Control: post-check=0, pre-check=0", false);
require($_SERVER["DOCUMENT_ROOT"] . "/bitrix/modules/main/include/prolog_before.php");
?>

<?$APPLICATION->IncludeComponent(
    "bitrix:news.list",
    "map.list",
    Array(
        "SITE_ID" => $_REQUEST['SITE_ID'],
        "AJAX" => 'Y',
        // Остальные параметры компонента
    )
);?>

Пояснение:

• SITE_ID – параметр для фильтрации данных.

• AJAX=Y – флаг асинхронного вызова компонента.

2. Настраиваем отправку AJAX-запроса

$(function() {
    $(document).on('click', '.js-country', function() {
        var siteID = $(this).data('site-id');
        $.ajax({
            url: '/local/templates/main/ajax/map.php',
            type: 'post',
            data: {'SITE_ID': siteID},
        }).done(function(data) {
            $('#map-container').html(data);
        });
        return false;
    });
});

Ключевые моменты:

• Используем делегирование событий ($(document).on()), чтобы обработчик работал после AJAX-загрузки.

• map.php – путь к обработчику запроса.

3. Адаптируем шаблон компонента

<?if ($arParams['AJAX'] != 'Y'):?>
    <div id="map-container">
<?endif;?>

<!-- Код шаблона компонента -->

<?if ($arParams['AJAX'] != 'Y'):?>
    </div>
<?endif;?>

Зачем это нужно?

• Контейнер #map-container создаётся только при обычной загрузке страницы.

• При AJAX-запросе компонент возвращает только контент без лишней обёртки.

Возможные проблемы и решения

1. Сброс параметров в визуальном редакторе
   Параметры SITE_ID и AJAX не прописаны в .parameters.php, поэтому могут сбрасываться.

2. Кеширование запросов
   Добавьте cache: false в $.ajax, если данные должны обновляться при каждом запросе.

Итог

Этот подход позволяет удобно реализовать динамическую загрузку данных в компонентах Битрикс. Метод подходит для:

• фильтрации контента,

• ленивой подгрузки,

• обновления блоков без перезагрузки страницы.