Битрикс AJAX в своих компонентах
В данном методе мы не будем использовать BX.JS, а воспользуемся простым кодом на jQuery. Отправляем AJAX запрос на страницу с компонентом.
Добавляем аякс в компоненты Битрика
Задача — на странице отображается список карт с метками, по клику на страну должны подгружаться карты по фильтру.
Решение:
Сам компонент мы рассматривать не будем, начнем делать задачу и разбираться по шагам, что нам нужно:
Шаг 1. Создаем страницу с тем же компонентом.
Данный файл вы можете размещать либо в папке компонента, либо в шаблоне. Иногда, целесообразнее использовать корневую папку /ajax/. Итак, мой файл выглядит так:
Шаг 2. Добавляем jQuery.
Без лишних вступлений, пишем такой код:
Шаг 3. Добавляем в существующий шаблон компонента проверку на аякс.
Помимо основного кода нам нужно обернуть наш компонент в контейнер, который отобразиться только в том случае, если это не аякс:
автор: Dmitriy
Занимаюсь веб-разработкой с 2011 года. Посмотреть некоторые из моих работ, а также узнать чуть больше обо мне, вы можете на forwww.ru.
— Создание сайтов на 1С-Битрикс любой сложности
— Вёрстка макетов Figma, Photoshop, Zeplin
— Поддержка проектов на Битриксе
— Разработка нового функционала для сайта
— Парсинг данных
— Выгрузка из файлов в формате XML, YML, XLS, XLSX, CSV, JSON
— Интеграция по API со сторонними сервисами
и многое другое
Применение технологии 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 должен вести на текущую страницу.
Битрикс компонент обратная связь ajax
В предыдущей статье мы создали форму обратной связи, разместив ее через механизм включаемых областей. Теперь попробуем создать такую форму при помощи компонента битрикс.
Компонент назовем feedback.send
Новый компонент можно размещать в папке bitrix/components или же в папке local/components.
Создадим следующие разделы:
local/components/test/feedback.send/templates/.default (папки создаем, если они не существуют)
local/components/test/feedback.send/templates/.default/lang/ru– раздел для языковых файлов шаблона
вот код LANG-файла (local/components/test/feedback.send/templates/.default/lang/ru/template.php)
Теперь создадим сам компонент. В разделе local/components/test/feedback.send создадим файл component.php
По сути, этот файл только генерирует captcha и инициализирует и подключает шаблон компонента.В ту же папку поместим файл ajax.php, он будет отвечать за обработку данных и отправку формы:
Если все поля введены верно, вызывается событие FEEDBACK_SEND:
Теперь разместим шаблон компонента, для этого в папке local/components/test/feedback.send/templates/.default/
создадим файл template.php:
В этом же файле помещен java-скрипт, отвечающий за отправку данных через ajax. По сути, мы сделали все тоже самое что и в предыдущей статье, оформив код компонентом. Теперь достаточно разместить код компонента:
в любом месте, чтобы получить рабочую форму отправки сообщений.
Bitrix ajax php в компоненте
AJAX, как много в этом слове. Давно хотел написать про AJAX и битрикс, немного критики, пара предложений, разымшления на тему. Более-менее продвинутые разработчики под битрикс знают как работает AJAX в битриксе, регулярно сталкиваются с CAJAX и прочими приблудами. Многих наверное устраивает.
Моя история «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 запросы у вас обрабатываются как то по другому — пишите в комментариях.