ajax битрикс что это
Применение технологии AJAX в компоненте Битрикс
Говоря языком Википедии — AJAX, Ajax (?e?d??ks, от англ. Asynchronous Javascript and XML — «асинхронный JavaScript и XML») — подход к построению интерактивных пользовательских интерфейсов веб-приложений, заключающийся в «фоновом» обмене данными браузера с веб-сервером. В результате, при обновлении данных, веб-страница не перезагружается полностью, и веб-приложения становятся более быстрыми и удобными.
Но для обычных людей это значит, что какая-то часть страницы обновляется без обновления всей страницы. Как этого добиться в компоненте Битрикс я попробую написать на небольшом примере.
Постановка задачи
В качестве примера попробуем сделать компонент, который выводит текущее время и ссылку Обновить, при клике на которую происходит обновление области компонента и появляется обновленное текущее время. Текущее время будем выводить с секундами для удобства тестирования.
Делаем простой компонент
Сначала сделаем компонент, который бы просто выводил дату. Свойства у такого компонента будут отсутствовать, а описание для компонента для простоты опустим.
Получаем такой список файлов:
component.php
templates/.default/template.php
Такой компонент просто покажет время и при каждом обновлении страницы будет показывать текущее время.
AJAX-компонент
.parameters.php
templates/.default/template.php
Немного объяснений
Фактически, при установке в компоненте параметра AJAX_MODE равным Y, мы даем инструкцию Битрикс, что мы хотим, чтобы данный компонент обрабатывался как аякс-компонент.
При этом все ссылки в шаблоне компонента из формы:
преобразуются в форму:
Комментариев: 5
Получается в ajax-компоненте все ссылки преобразуются к специальному виду? Но ведь бывают просто внешние ссылки на какие-то сайты, например. Или, что еще чаще, в href может быть # а сама ссылка при нажатии показывает всплывающее окошко (js). Как с этим быть?
Внешние ссылки не преобразуются в ajax-компоненте, преобразуются только внутренние.
А по поводу второго вопросы — вы пишите сейчас о инструментарии наподобие thickbox в jquery, для этого не требуется использовать ajax-компоненты.
Спасибо за ответ.
Но по второму вопросу не согласен) Бывает нужно, например, чтобы данные сохранялись при нажатии на кнопку без перезагрузки страницы, т.е. ajax, а в других ситуациях возникают всплывающие окна и нужно чтобы это было оформлено как компонент.
> Бывает нужно, например, чтобы данные сохранялись при нажатии на кнопку без перезагрузки страницы
Это без проблем можно реализовать с помощью ajax-компонента битрикса.
> а в других ситуациях возникают всплывающие окна и нужно чтобы это было оформлено как компонент.
Вы можете оформить как компонент в принципе любой код. Причем можно не использовать ajax-технологии битрикс, и при этом работать с ajax при помощи возможностей jquery. Все зависит от конкретной задачи.
Для тех кому интересно как этот механизм работает в деталях, вот наткнулся на отличное описание — https://yunaliev.ru/file/bitrix_ajax_api.pdf — жаль, что этого нет в официальной документации.
Лично мне это помогло понять, почему форма в компоненте не становилась ajax-овой — атрибут action должен вести на текущую страницу.
Урок 13. Bitrix AJAX (запрос средствами Битрикс)
Приветствую мои читатели. В двух прошлых уроках я рассмотрел выполнение AJAX запроса средствами JavaScript и JQuery. Ниже ссылки на эти уроки: Там кстати все очень подробно, особенно в первом уроке. Обязательно ознакомьтесь.
Первое, что нужно сделать инициировать скрипты Битрикса. Это выполняется в файле шаблона страницы компонента. Мы будем экспериментировать все так же над списком товаров (с детальной страницей было бы все совсем просто и не интересно).
У меня файл шаблона располагается по пути l ocal/templates/electro/components/bitrix/news/catalog-electro/bitrix/news.list/.default/template.php . В самый конец файла мы внесем следующий код:
И строчек меньше и попонятнее.
Давайте разберемся почему так, почему для реализации AKAX запроса средствами Bitrix пришлось усложнять код.
На этом пока все, н е забывайте подписываться на новые статьи!
От автора:
Скажу, что были правы, те кто ругал Bitrix AJAX. Мало того, что он сложнее, так ещё и информации в интернете мало. Если код работы с JQuery гулится на раз, то чтобы разобраться с Bitrix и написать это скрипт я потратил 2 часа времени. В официальной документации примеров совсем нет.
Вывод я для себя сделал такой: что если подключен JQuery, то проще пользоваться им сэкономить себе время. На этом мы рассмотрели все варианты работы с AJAX в Битрикс. В следующих темах я хочу разобраться кешированием (собственно урок Как работает кеш Битрикс уже вышел). Так что обязательно подписывайтесь на рассылку о статьях (в правом сайдбаре) и ждите новых статей будет только интереснее.
BX.ajax
Низкоуровневая функция для отправки аяксовых запросов. Формат объекта params:
Функция возвращает ссылку на объект XMLHttpRequest, при помощи которого осуществляется запрос. В случае успеха запроса будет вызван обработчик onsuccess. В качестве параметра будет результат запроса. Если параметр processData установлен в true, то обработка будет в зависимости от типа данных:
Если подключена библиотека для работы с localStorage (core_ls), то помимо перечисленных параметров можно использовать указать параметры:
Эти параметры предназначены для интерфейсов, постоянно опрашивающих сервер с целью получения каких-либо данных. В этом случае данные запроса будут сохраняться в localStorage, и если в любой вкладке текущего браузера будет сделан запрос с тем же самым lsId, то вместо совершения запроса обработчик получит данные, сохраненные в localStorage. Соответственно, lsTimeout должен быть чуть меньше интервала отправки запросов. Параметр lsForce позволяет принудительно отправить запрос в обход проверки наличия данных в localStorage и обновить это данные.
Пользовательские комментарии
Мы будем рады, если разработчики добавят свои комментарии по практическому использованию методов системы.
Для этого нужно всего лишь авторизоваться на сайте
Но помните, что Пользовательские комментарии, несмотря на модерацию, не являются официальной документацией. Ответственность за их использование несет сам пользователь.
Также Пользовательские комментарии не являются местом для обсуждения функционала. По подобным вопросам обращайтесь на форумы.
Пример скрипт обработки php-массива
Имеем php-массив с какими-то данными ($PRICE_LIST_DATA). каждую строку массива нужно отправлять ajax-ом в файл на обработку и при это публиковать пользователю результат работы каждого шага. В файле с php после получения массива выводим скрипт:
(простите за смесь BX и jquery).
скрипт лежит в файле template.php какого-нибудь шаблона компонента. файл для обработки аякс-запросов, ajax.php лежит в папке с данным шаблоном
Ajax битрикс что это
AJAX, как много в этом слове. Давно хотел написать про AJAX и битрикс, немного критики, пара предложений, разымшления на тему. Более-менее продвинутые разработчики под битрикс знают как работает AJAX в битриксе, регулярно сталкиваются с CAJAX и прочими приблудами. Многих наверное устраивает.[spoiler]
Моя история «AJAX и битрикс» началась больше двух лет назад. Тогда у битрикса AJAX’а еще не было, а мне его очень хотелось, я написал простейшую обработку, которую до недавнего времени использовал. Надо отметить, использовалась она исключительно для компонентов и работала на Prototype. Зачем в битриксе AJAX для страниц для меня пока загадка. Алгоритм был примерно следующий:
1. Ссылка на странице формирует AJAX-запрос к файлу /ajax.php
2. /ajax.php, анализируя параметры запроса, подключает и показывает указанный в параметрах компонент с указанным шаблоном и параметром.
3. Скрипт на странице получает ответ от /ajax.php и вставляет в указанный контейнер.
Потом появился стандартный битриксовский AJAX и его реализация. С тех пор он особо не менялся. В поставке битрикса есть все необходимые js-скрипты, класс CAJAX для работы в PHP и документация. Кстати, документация че-то исчезла в последнее время по AJAX, на старом месте ее нет. А в обычной документации никогда и не было. Честно говоря, со стандартным битриксовским AJAX-ом я просто не разобрался, как он работает, ну просто у меня голова не соображала на тот момент, поэтому по-прежнему использовал свою реализацию.
По мере эволюции своих разработок я перелез с Prototype на jQuery. Это был довольно поздний, но важный переход. В jQuery отлично реализован функционал селекторов и AJAX, а создаваемый код очень красивый и компактный. На сколько может судить человек, который плохо вообще знаком с JS. Например, очень мне нравится, как вешаются события на объекты.
Далее я расскажу, как выглядит сегодня мой обработчик AJAX в последней реинкарнации. Чтобы было понятней, разделю на несколько частей
1. Вызов AJAX на страницах компонентов
AJAX вызывается на всех ссылках, у которых есть класс «ajax_link». Привязка делается следующим образом:
. Надо отметить, что эти же параметры можно вешать на абсолютно любой html-объект, не только a, но еще и на img, span, div, form и т.д. Да, нарушается синтаксис HTML, но кого это волнует?
Подведу итог первой части. Сделан простой и понятный синтаксис формирования ссылок на AJAX. О AJAX_CALL_ID, ajax_load() и прочем далее.
2. Обработка вызовов AJAX
Допустим, пользователь нажал на ссылку, описанную выше, что происходит далее. Так как ссылка имеет класс «ajax_link», то она поступает в соответствующий обработчик JS, который был описан выше для ссылок с этим классом, в нем вызывается функция ajax_load(CONTAINER, AJAX_CALL_ID, PARAMS), где параметры те же, что в ссылке. По сути то же самое. Если взять приведенную выше в пример ссылку, то всё можно было бы сделать аналогично, но описать событие click внутри ссылки:
3. Страшная тайна AJAX_CALL_ID
Я стремлюсь к эстетике. А как я писал ранее, в моем первом обработчике AJAX все параметры писались прямо в ссылке, что было некрасиво. AJAX_CALL_ID используется для маскировки всех параметров AJAX-запроса. Он формируется в компоненте из названия, шаблона и параметров с помощью простенькой функции:
В общем-то по этому файлу больше писать нечего, всё должно быть понятно. Теперь опишу некоторые сложности использования всего этого хозяйства. При вызове компонента с параметрами по умолчанию происходит обновление самого себя, но вызов должен производиться в некий контейнер. Этот контейнер определяется в шаблоне компонента, а при вызове этого же шаблона через AJAX контейнер просто не показывается. Это может быть сделано примерно так:
есть, а при вызове AJAX его уже не будет, но он остается на странице и результат AJAX в него будет загружен. Это не очень эстетично, поэтому еще предстоит что-то выдумать.
Правильный AJAX в 1С-Битрикс
В CMS 1С-Битрикс есть свой встроенный ajax в нескольких компонентах. В этом встроенном ajax есть один существенный минус — страница все равно полностью выполняется.
Кроме встроенного в стандартные компоненты варианта ajax, можно самому написать более правильную реализацию на битриксовской библиотеке. Про встроенную библиотеку можно прочитать у Рамиля Юналиева:
http://yunaliev.ru/2010/02/bitrix-ajax/
Здесь я покажу как мне кажется более правильный вариант ajax, именно организацию работы. Отправлять сами ajax запросы я буду на jquery. Больший акцент я сделаю именно на серверной стороне, но чтобы получился законченный пример клиентскую сторону мы тоже расссмотрим.
Хочется показать какой то живой пример, поэтому мы будем отображать на странице количество и общую сумму товаров в корзине.
Клиентская часть. Демонстрация
Для работы AJAX как вам наверное известно нужно две части — клиентская и серверная. На клиенте нужно написать javascript код который будет отправлять сам запрос без перезагрузки страницы. На сервере нужно поместить какой то html файл или скрипт, который будет давать ответы на клиентские запросы.
Начнем с клиентской стороны.
Отмечу, что свободной копии битрикса, которую я могу постоянно держать для тестов у меня нет. Поэтому ответ сервера при демонстрации работы эмулируется. На самом деле никакой код на серверной стороне в примере по ссылке не выполняется, в качестве ответа берется просто html файл. Но для пользователя все будет именно так, у него где то отображается корзина при просмотре сайта, и при нажатии на «обновить», данные его корзины обновляются.
Вот html код корзины:
Вот скрипт на jquery который отправляет ajax запрос:
На самом деле это не AJAX, а AJAH, так как в ответе приходит уже готовый html, а не xml из которого еще нужно забрать данные. Но суть примерно одна.
Можно добавить всяких украшательств, например анимированный gif загрузки, но суть останется такой же.
Работа на серверной стороне
Теперь о том как такое должно быть организовано на серверной стороне.
Создадим файл ajax.handler.php в корне сайта, на котором установлен 1С-Битрикс. В этом файле напишем
Что делает эта строка? Подключает служебную часть пролога в битриксе. При этом шаблон сайта не подключается. С помощью этой строки мы получаем доступ к АПИ битрикса и при этом никакого лишнего html кода не выводится.
Впринципе можно написать код, который будет отвечать на ajax запросы прямо здесь. Можно не заморачиваться ни с какими компонентами и отдельными файлами. Но что будет если у нас будет несколько разных видов запросов? Например если один вид ajax запроса обновляет корзину, второй совершает заказ, третий удаляет из корзины один товар и т.д. В рамках одного файла работать будет не очень удобно.
Чтобы разграничить ответы на разные запросы, я добавлю такой код в файл ajax.handler.php:
То есть, если в запросе переменная PAGE равна BASKET, то подключим файл basket.php, который находится в папке handlers. Таким образом, для разных ajax запросов можно будет просто добавлять новые условия в файле ajax.handler.php, и не думать про взаимодействие с другими запросами. Само собой нужно создать папку handlers в корне сайта и внутри нее файл basket.php.
В файле /handlers/basket.php уже можно собирать данные по корзине, оформлять это все в html и отдавать по запросу. Но если прямо тут писать код, то страница грязная получится, то есть программный код собирающий данные будет прямо рядом с кодом который эти данные отображает в виде html. Поэтому я буду делать стандартный компонент битрикса и просто вставлю его на эту страницу. В стандартном компоненте можно разделить логику и представление. Под каждый вид ajax запрос нужно будет создавать свои отдельные компоненты. Код вызова компонента на странице basket.php
Если у компонента не много параметров, то можно прямо внутри условия в файле /ajax.handler.php его вызвать и не выносить вызов в отдельный файл.
Теперь напишем сам компонент. Создадим папку /bitrix/components/ajax. Внутри создаем подпапку basket с самим компонентом. На том как правильно писать компонент я не буду останавливаться подробно, вот основные сведения которые нужно знать про компоненты:
http://dev.1c-bitrix.ru/api_help/main/general/component20/index.php
Приведу листинг файла component.php
Последняя строка подключает шаблон компонента. Вот код шаблона компонента:
Вот такой небольшой шаблон.
Проверить работоспособность серверной части можно открыв в браузере «адрес сайта/ajax.handler.php?PAGE=BASKET». После открытия страницы должен появиться примерно такой текст на белом фоне «6 830 руб. — 2 шт.», то есть сумма и количество товаров или текст «Корзина пуста» если у вас нет ни одного товара в корзине.
Итого, какие преимущества дает вышеописанная организация AJAX:
Если у вас есть какие то дополнения к описанной выше организации работы ajax или ajax запросы у вас обрабатываются как то по другому — пишите в комментариях.