Заказать проект
Оставьте заявку для получения коммерческого предложения.
Заполните форму и мы вышлем Вам предложение в котором решим,
чем можем вам помочь.
Универсальная AJAX подгрузка в 1C Bitrix

Универсальная AJAX подгрузка в 1C Bitrix

29 Мая 2018
Олег Мостовой
Junior Backend Developer
Олег Мостовой
следующая статья

Технология 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 подгрузки. Которые также могут отличаться в зависимости от уровня и предпочтений разработчика.         



Need help?

Ask a question.

Chat Now
Записаться На Консультацию
Записаться На Консультацию
Мы свяжемся
с вами
в течении
10 минут
laptop
Мы свяжемся с вами в течении 10 минут