Основы JavaScript в Битрикс: Объект BX, BX.ready, BX.bind и AJAX

Битрикс имеет собственное легковесное ядро JavaScript, которое предоставляет унифицированный API для решения большинства frontend-задач.

Оно избавляет от необходимости подключать тяжелые библиотеки вроде jQuery для простых операций и обеспечивает совместимость со всеми внутренними механизмами платформы.

Все функции ядра доступны через глобальный объект BX.

1. Выполнение кода после загрузки DOM: BX.ready()

Это аналог DOMContentLoaded или $(document).ready() в jQuery. Код, обернутый в BX.ready, выполнится только после того, как вся структура HTML-страницы будет загружена и готова к манипуляциям.

Синтаксис:

BX.ready(function() {
    // Ваш JS-код здесь
    console.log('DOM готов, можно работать!');
});

Использование BX.ready — обязательное правило для всего вашего JS-кода в шаблонах, чтобы избежать ошибок, когда скрипт пытается найти еще не существующий на странице элемент.

2. Навешивание событий: BX.bind()

Это кросс-браузерный способ добавить обработчик события к элементу. Аналог element.addEventListener().

Синтаксис: BX.bind(element, eventName, handler)

BX.ready(function() {
    // Находим кнопку по ID
    var myButton = BX('my-button-id'); // BX('id') - короткий аналог document.getElementById('id')

    if (myButton) {
        // Вешаем обработчик на событие 'click'
        BX.bind(myButton, 'click', function() {
            alert('Кнопка была нажата!');
        });
    }
});

3. Манипуляции с DOM и CSS-классами

Ядро предоставляет простые функции для работы с элементами и их классами.

BX.ready(function() {
    var myBlock = BX('my-block');

    if (myBlock) {
        // Добавить класс
        BX.addClass(myBlock, 'highlight');

        // Удалить класс
        BX.removeClass(myBlock, 'hidden');

        // Проверить наличие класса
        if (BX.hasClass(myBlock, 'active')) {
            console.log('Блок активен');
        }

        // Переключить класс (если есть - удалит, если нет - добавит)
        BX.toggleClass(myBlock, 'toggled-state');
    }
});

• BX.findChild(container, params, recursive): мощная функция для поиска дочерних элементов по тегу, классу и т.д.

4. AJAX-запросы: BX.ajax() и BX.ajax.runAction()

Для асинхронных запросов к серверу в Битрикс есть два основных способа.

BX.ajax(params) — классический способ

Похож на $.ajax в jQuery. Используется для запросов к произвольным скриптам.

BX.ajax({
    url: '/ajax/my_handler.php',
    method: 'POST',
    data: {
        action: 'get_data',
        itemId: 123
    },
    dataType: 'json',
    onsuccess: function(response) {
        console.log('Ответ от сервера:', response);
    },
    onfailure: function(error) {
        console.error('Произошла ошибка:', error);
    }
});

BX.ajax.runAction(action, config) — современный D7-способ

Это предпочтительный метод для работы с контроллерами D7. Он удобнее и безопаснее.

// Запрос к действию 'my:module.user.like'
BX.ajax.runAction('my:module.user.like', {
    // Передаем данные
    data: {
        likedUserId: 45
    }
}).then(
    // Успешный ответ (response.status === 'success')
    function(response) {
        if (response.data.liked) {
            console.log('Лайк успешно поставлен!');
        }
    },
    // Ответ с ошибкой (response.status === 'error')
    function(response) {
        console.error('Ошибка:', response.errors[0].message);
    }
);

Преимущества runAction:

• Работает с современными контроллерами D7.
• Использует Promises, что делает код более читаемым.
• Автоматически добавляет sessid для CSRF-защиты.
• Стандартизированный формат ответа {status, data, errors}.

Вывод:
Ядро BX JS предоставляет все необходимые инструменты для frontend-разработки на Битрикс. Всегда оборачивайте свой код в BX.ready. Используйте BX.bind для событий и BX.addClass/removeClass для стилизации. Для AJAX-запросов к современным компонентам и модулям на D7 ваш выбор — BX.ajax.runAction.

Bitrix JavaScript, BX, BX.ready, BX.bind, BX.ajax, BX.addClass, BX.removeClass, JS Битрикс, frontend.