Применение технологии AJAX в компоненте Битрикс

Говоря языком Википедии — AJAX, Ajax (?e?d??ks, от англ. Asynchronous Javascript and XML — «асинхронный JavaScript и XML») — подход к построению интерактивных пользовательских интерфейсов веб-приложений, заключающийся в «фоновом» обмене данными браузера с веб-сервером. В результате, при обновлении данных, веб-страница не перезагружается полностью, и веб-приложения становятся более быстрыми и удобными.

Но для обычных людей это значит, что какая-то часть страницы обновляется без обновления всей страницы. Как этого добиться в компоненте Битрикс я попробую написать на небольшом примере.

Постановка задачи

В качестве примера попробуем сделать компонент, который выводит текущее время и ссылку Обновить, при клике на которую происходит обновление области компонента и появляется обновленное текущее время. Текущее время будем выводить с секундами для удобства тестирования.

Делаем простой компонент

Сначала сделаем компонент, который бы просто выводил дату. Свойства у такого компонента будут отсутствовать, а описание для компонента для простоты опустим.

Получаем такой список файлов:

component.php

<?
if(!defined("B_PROLOG_INCLUDED") || B_PROLOG_INCLUDED!==true) die();

$arResult["date"] = date("H:i:s");
$this->IncludeComponentTemplate();
?>

templates/.default/template.php

<?if(!defined("B_PROLOG_INCLUDED") || B_PROLOG_INCLUDED!==true) die();?>
Текущее время: <?=$arResult["date"]?>

Такой компонент просто покажет время и при каждом обновлении страницы будет показывать текущее время.

AJAX-компонент

Теперь сделаем так, чтобы компонент заработал как аякс-компонент. Для этого нужно создать файл .parameters.php , дополнить шаблон ссылкой на обновление. Вы убедитесь, что все это очень просто.

.parameters.php

<?
if (!defined("B_PROLOG_INCLUDED") || B_PROLOG_INCLUDED!==true) die();

$arComponentParameters = array(
"GROUPS" => array(
),
"PARAMETERS" => array(
"AJAX_MODE" => array(),
),
);

?>

templates/.default/template.php

<?if(!defined("B_PROLOG_INCLUDED") || B_PROLOG_INCLUDED!==true) die();?>
Текущее время: <?=$arResult["date"]?> <a href="<?=$_SERVER["REQUEST_URI"]?>">Обновить!</a>

Вызывать компонент необходимо обязательно с параметром ‘AJAX_MODE’ => ‘Y’ , иначе включение AJAX-режима не произойдет.

<?$APPLICATION->IncludeComponent(
    "dv:component",
    "",
    Array(
'AJAX_MODE' => 'Y'
    )
);?>

Немного объяснений

Фактически, при установке в компоненте параметра AJAX_MODE равным Y, мы даем инструкцию Битрикс, что мы хотим, чтобы данный компонент обрабатывался как аякс-компонент.

При этом все ссылки в шаблоне компонента из формы:

<a href="/link/">Обновить!</a>

преобразуются в форму:

<a class="ajax_link" onclick="jsAjaxUtil.InsertDataToNode('/link/?&&bxajaxid=25fa925fdb27dc937d5cef94a92c1120', 'comp_25fa925fdb27dc937d5cef94a92c1120', true); return false;" href="/link/">Обновить!</a>