Bitrix

Применение технологии 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>

  1. Получается в ajax-компоненте все ссылки преобразуются к специальному виду? Но ведь бывают просто внешние ссылки на какие-то сайты, например. Или, что еще чаще, в href может быть # а сама ссылка при нажатии показывает всплывающее окошко (js). Как с этим быть?

  2. Внешние ссылки не преобразуются в ajax-компоненте, преобразуются только внутренние.

    А по поводу второго вопросы — вы пишите сейчас о инструментарии наподобие thickbox в jquery, для этого не требуется использовать ajax-компоненты.

  3. Спасибо за ответ.
    Но по второму вопросу не согласен) Бывает нужно, например, чтобы данные сохранялись при нажатии на кнопку без перезагрузки страницы, т.е. ajax, а в других ситуациях возникают всплывающие окна и нужно чтобы это было оформлено как компонент.

  4. > Бывает нужно, например, чтобы данные сохранялись при нажатии на кнопку без перезагрузки страницы

    Это без проблем можно реализовать с помощью ajax-компонента битрикса.

    > а в других ситуациях возникают всплывающие окна и нужно чтобы это было оформлено как компонент.

    Вы можете оформить как компонент в принципе любой код. Причем можно не использовать ajax-технологии битрикс, и при этом работать с ajax при помощи возможностей jquery. Все зависит от конкретной задачи.

  5. Для тех кому интересно как этот механизм работает в деталях, вот наткнулся на отличное описание — https://yunaliev.ru/file/bitrix_ajax_api.pdf — жаль, что этого нет в официальной документации.

    Лично мне это помогло понять, почему форма в компоненте не становилась ajax-овой — атрибут action должен вести на текущую страницу.

Отставить комментарий

Ваш электронный адрес не будет опубликован.Обязательные для заполнения поля отмечены *

2 × 1 =