1c-bitrix / ajax / javascript · 09.02.2010

Битрикс AJAX [bitrix-ajax-api]

Почему-то многие не охотно используют битриксовую библиотеку аякса, почти всегда делая предпочтения в сторону Jquery или других js библиотек. Не сомненно что Jquery очень не плохая библиотека и отлично работает с ajax, но чтобы свободно разрабатывать сайты не 1с-Битрикс надо знать родное API.

Пост для новичков, думаю будет полезно. Рассматриваем только ajax-овую часть библиотеки, ее основу.

Итак начнем с простого примера. Сделаем простую отправку запроса и получение ответа.

html будет выглядеть так
<a href=’#’ onclick=’goAjax(); return false;’>Go</a>

<div id=’container’></div> — сюда мы получим ответ

Теперь нам нужно создать страницу к которой мы будем обращаться, назовем ее ajax.heandler.php. В нем пишем

header(‘Content-Type: text/html; charset=windows-1251’);
require_once($_SERVER[‘DOCUMENT_ROOT’].’/bitrix/modules/main/include/prolog_before.php’);
CModule::IncludeModule(‘iblock’); — если нужно работать с инфоблоками то обязательно подключаем модуль, для остальных модулей тоже самое

Думаю тут все понятно, сюда еще можно добавить константу отключения статистики сайта

define("STOP_STATISTICS", true);

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

Теперь собственно сам JS

Подключаем саму клинскую библиотеку CAjax::Init()

Основной код для работы с аякс:

function fvoid(data)
{
jsAjaxUtil.CloseLocalWaitWindow();
document.getElementById('container').innerHTML = data;
}

jsAjaxUtil.ShowLocalWaitWindow();
var TID = CPHttpRequest.InitThread();
CPHttpRequest.SetAction(TID, fvoid);
CPHttpRequest.Send(TID, 'ajax.heandler.php', {'param':'test_param'});

Рассмотрим подробнее

CPHttpRequest.Send(TID, 'ajax.heandler.php', {'param':'test_param'}); - собственно и делает сам запрос, 
1) параметр это идентификатор аякс запроса,
2) путь к странице обработчику,
3) объект в котором можно передать дополнительные параметры

CPHttpRequest.Send - отправка запроса методом $_GET
CPHttpRequest.Post - отправка запроса методом $_POST

Обработчик ответа от сервера

function fvoid(data)
{
KLoad.Close('container');
document.getElementById('container').innerHTML = data;
}

data - вот сюда приходит ответ от сервера, это может быть уже готовый html или json, в общем что надо. С полученным результатом уже можно работать как надо.
jsAjaxUtil.ShowLocalWaitWindow();
jsAjaxUtil.CloseLocalWaitWindow();
 - эти функция скрытия аяксового загрузчика, просто появляется и скрывается картинка имитирующая загрузку данных.

Для теста в файле ajax.heandler.php напишем echo ‘<pre>’, print_r($_GET).'</pre>’; и должны получить ответ в виде массива.

Итак вот функция которая посылает запрос методом $_GET и передает тестовые параметр в наш скрипт:


function goAjax()
{
function fvoid(data)
{
jsAjaxUtil.CloseLocalWaitWindow();
document.getElementById('container').innerHTML = data;
}

jsAjaxUtil.ShowLocalWaitWindow();
var TID = CPHttpRequest.InitThread();
CPHttpRequest.SetAction(TID, fvoid);
CPHttpRequest.Send(TID, 'ajax.heandler.php', {'param':'test_param'});
}

Есть еще несколько удобных и полезных функция для работы с аяксом у битрикса. Это отправка формы, обертка с  автоматическим подключением аяксового индекатора с затенением.

В общем пользоваться библиотекой можно, по крайне мере если изначально не подключили никакой сторонней библиотеки, и много наисано на сайте на чистом js то можно использовать. Если же проект новый, то я все таки советую выбрать фреймворк.

Оф документация в формате pdf по работе с библиотекой