Універсальне AJAX підвантаження в 1C Бітрікс

Технологія AJAX дозволяє робити запити до сервера без перезавантаження сторінки. Використовується для динамічної зміни даних. Перевага цієї технології в тому, що не потрібно перезавантажувати сторінку при зміні її окремих елементів. Як приклад, щохвилинне оновлення кодувань цінних паперів або сповіщення користувача про нові повідомлення в соціальних мережах. У цих випадках використання AJAX виправдано і має перевагу в порівнянні з перезавантаженням сторінки.

На сайтах часто використовується AJAX підвантаження компонентів. Наприклад, підвантаження списку новин при скролі, перемикання між розділами при натисканні на кнопку, перемикання списку контактів при виборі міста і багато іншого. Для цього функціоналу використовуються різні компоненти і шаблони.

Для кожного компонента або навіть шаблону підвантаження пишеться окремий запит, а також окремий PHP файл, який його обробляє. Але це не завжди добре позначається на масштабуванні і повторному використанні коду.

Було б раціонально використовувати універсальний механізм, який застосовує один і той же код для обробки запитів від різних компонентів і шаблонів. Суть компонента AJAX при першому завантаженні полягає в генеруванні унікального ключа, який записується в js-змінну.

Параметри компонента $ arParams зберігаємо в сесії. При виклику події як параметра, передаємо ключ компонента, ім'я шаблону, а також додаткові формати, наприклад, номер сторінки. PHP-код по заданому ключу викличе компонент і поверне його назад на сторінку.

Розіб'ємо процес на етапи:

• Створимо клас для генерації ідентифікатора, збереження  компонента і отримання збережених параметрів;

• У компоненті викликаємо метод класу, який збереже $ arParams і поверне унікальний ідентифікатор компонента;

• Створимо файл, який обробляє вхідні запити і повертає компонент;

• У шаблоні компонента, в js-змінну, запишемо унікальний ідентифікатор і подію яка буде відправляти запит.

Далі розглянемо кілька прикладів роботи з AJAX підвантаженням.

1. Клас для роботи з компонентом:

Метод addComponent приймає об'єкт компонента як параметр, генерує унікальний ключ $ uniqueKey і записує параметри в сесію $_SESSION[__CLASS__][$uniqueKey].

Метод getComponent  повертає з сесії параметри компонента по унікальному ключу. 

class Ajax
{
	//   передаємо об'єкт компонента   
    public static function addComponent(\CBitrixComponent $component, $templateName = '')
    {
        $name = $component->__name;
        $params = $component->arParams;
        $template = empty($templateName) ? $component->GetTemplateName() : $templateName;

        foreach ($params as $key => $value)
        {
            if (strpos($key, '~') === 0)
            {
                unset($params[$key]);
            }
        }

        ksort( $params );
	// генеруємо унікальний ключ компонента
        $uniqueKey = md5($name . $template . serialize( $params ));

	//записуємо в сесію параметри компонента
        if ( ! isset($_SESSION[__CLASS__][$uniqueKey]))
        {
            $_SESSION[__CLASS__][$uniqueKey] = array(
                'NAME' => $name,
                'PARAMS' => $params,
                'TEMPLATE' => $template
            );
        }

	//поаертаємо ключ
        return $uniqueKey;
    }
	//повертаємо параметри компонента з сесії
    public static function getComponent($uniqueKey)
    {
        return $_SESSION[__CLASS__][$uniqueKey];
    }
}

Викликаємо в компоненті функцію яка буде генерувати універсальний ключ.

$arResult['COMPONENT_KEY'] = \Universal\Ajax::addComponent($this);

За цим ключем визначимо, який компонент підвантажувати.

2. Код, який буде обробляти запити:

if(!isset($_REQUEST['key']) && empty($_REQUEST['key'])) echo false;
$uniqueKey = htmlspecialchars($_REQUEST['key']);
$component = Universal\Ajax::getComponent($uniqueKey);
if(empty($component)) echo false;

if (isset($_REQUEST['template']))
{
    $component['TEMPLATE'] = $_REQUEST['template'];
}

if (isset($_REQUEST['params']))
{
    $component['PARAMS'] = array_merge($component['PARAMS'], $_REQUEST['params']);
}

if (isset($_REQUEST['name']))
{
    $component['NAME'] = $_REQUEST['name'];
}

global $APPLICATION;
ob_start();
$APPLICATION->IncludeComponent($component['NAME'], $component['TEMPLATE'],  $component['PARAMS'], false);
$result = ob_get_contents();
$APPLICATION->RestartBuffer();
echo $result;

3. Додаткові параметри

Додаткові параметри $_REQUEST['params'] із запиту передаються в масив $component['PARAMS'], в яких можна передати, наприклад, номер сторінки, розділ, а також інші необхідні параметри.

$component['PARAMS'] = array_merge($component['PARAMS'], $_REQUEST['params']);

Є кілька перевірок окремих параметрів запиту, які роблять код більш зручним у використанні. За допомогою них можна вказувати як шаблон, так і ім'я компонента. Зручно, коли на сайті два різних компоненти, які працюють з одним і тим же Інфоблоком.

4. Перемикання розділів AJAX запиту.

Відправляємо запит, в якому вказані ключі, ім'я компонента і шаблону, додаткові параметри list_data [ 'PARAMS']. У ньому вказано код розділу Інфоблоки.

У разі успішної обробки запиту, код буде розміщений на сторінці.

$.ajax({
            url: '/ajax/component.php',
            type: 'post',
            data: {
                key: ComponentKey, // ключ компонента
                name: list_data['NAME'], // ім'я компонента
                template: list_data['TEMPLATE'], // ім'я шаблону
                params: list_data['PARAMS'], //додаткові параметри 
            },
            success: function(data) {
                $('#years').after(data);
            }
        }); 

Як приклад гнучкості функціоналу, можна організувати обробку подій на сторінці таким чином, що цей же запит, крім перемикання розділів, буде обробляти пагінацію елементів Інфоблоки по скролу передаючи в params номер сторінки.

У підсумку, ми зможемо стандартизувати підвантаження компонентів, уникнути розростання коду, спростити впровадження нових компонентів з AJAX підвантаженням. У нас більше нема потреби писати код обробки запиту з нуля.

У даній статті описані лише кілька готових варіантів реалізації AJAX підвантаження, які також можуть відрізнятися в залежності від рівня і вподобань розробника.