Урок 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 в Битрикс. В следующих темах я хочу разобраться кешированием (собственно урок Как работает кеш Битрикс уже вышел). Так что обязательно подписывайтесь на рассылку о статьях (в правом сайдбаре) и ждите новых статей будет только интереснее.
Как использовать AJAX в Битрикс?
Нужно обработать данные из формы AJAX’ом. Посмотрел примеры из документаций, но там нет ни одного примера для обработки формы.
Напишите, пожалуйста, простой пример обработки данных из формы BX.ajax, либо внятный материал по этой теме.
P.S. С аяксом знаком плохо, поэтому чем проще, тем лучше
Буду очень благодарен!
BX.ajax это тот же Ajax, только в обертке Битрикса. Используйте его почти точно также как и обычный Ajax с некоторыми нюансами от Битрикса.
Вот на хабре пост Ajax для новичков
Документация Битрикс BX.ajax
Не совсем понятно, что имеется в виду «примеры обработки формы». Обработки полей формы на валидность? Или сбор данных, манипуляция данных формы перед отправкой? Или куда отправить запрос и что за скрипт написать в бэкэнде? Или как из бэкэнда получить данные, а потом что-то с ними сделать?
Если с Ajax знакомы плохо, то лучше начать с изучения этой технологии. Там ничего сложного.
Если очень кратко пример, то вот 2 файла. Специально использовал Битриксовские обертки для js.
простая страница сайта с формой /ajax.php
и скрипт, куда обращается ajax (/ajaxhandler.php):
В поле вводим текст. Нажимаем на кнопку и ниже в поле появляется текст ‘user was typing’ + текст что ввели в поле.
Изучайте. На вопрос я ответил, у вас скорее всего появилось куча дополнительных вопросов. Но все ответы в изучении js, php и ajax в частности..
Используем AJAX в публичном разделе сайта
Начиная с версии 6.5 в поставку входят средства для использования AJAX («аякс», с вашего позволения) на публичных страницах сайта.
Сразу должен заметить, что полноценной библиотекой это назвать пока что нельзя, но на практике использовать вполне можно. Например, компонент ввода облака тегов использует новую библиотеку для показа списка похожих тегов при вводе тега.
Поддержка аякса на уровне JavaScript реализована в этом файле:
/bitrix/js/main/cphttprequest.js
1. Заготовка страницы.
Создаем новую страницу, и в визуальном редакторе размещаем и настраиваем на ней три компонента (новости, опрос, случайное фото). Получаем что-то такое (параметры компонентов опущены):
2. Пишем логику показа только одного блока из трех. Для этого будем использовать ссылки со специальной переменной show. Сразу после подключения header.php напишем:
Ниже выведем блок ссылок с вариацией параметра show:
Между вызовами компонентов расставим соответствующие условия:
Убеждаемся, что все работает при переходе по этим ссылкам.
А вот теперь сделам так, чтобы при клике мышкой на ссылку наш блок загружался аяксом без перезагрузки страницы в окне браузера.
3. Подключим библиотеку аякса после блока определения переменной show:
3.1. Чтобы данный вызов работал правильно, необходимо, чтобы в шаблоне сайта был следующий код:
4. Поместим все три компонента в div. В него мы будем записывать результат работы аяксового обращения к серверу:
5. Самое интересное. Над блоком ссылок определим JavaScript-функцию, которая будет вызываться при клике на ссылке. Собственно, эта функция и есть само воплощение аякса.
Обратите внимание на объект CPHttpRequest. Именно он определяется в JS-библиотеке и служит для передачи запроса на сервер. Функция ShowResult() непосредственно вставляет полученный результат запроса в добавленный нами div.
1) инициализируем запрос:
var TID = CPHttpRequest.InitThread();
2) устанавливаем обработчик ответа сервера, передавая нашу функцию ShowResult:
CPHttpRequest.SetAction(TID, ShowResult);
3) отправялем запрос на сервер
CPHttpRequest.Send(TID, ‘/t.php’, <'show':show, 'mode':'ajax'>);
6. Добавляем вызов нашей функции в блок ссылок:
Обратите внимание, что для поисковика это нормальные ссылки, которые ведут на обычные страницы с разным контентом. Для «людей» же, поддерживающих JavaScript, эти ссылки будут работать без перезагрузки страницы.
ПРОБУЕМ, что получилось.
Работает! 8) За исключением того, что в наш div мы вставили страницу целиком, вместе с дизайном. Дизайн в рекурсии, так сказать.
7. Чтобы исключить такое поведение нашей страницы, мы должны в режиме аякса отключать все лишнее, что не должно выводиться. Это и определение нашей JS-функции, и блок ссылок, и дизайн целиком. Именно для этого в аякс-режиме мы передаем переменную mode=ajax.
8. Вот теперь работает правильно. Но не хватает информативности для пользователя, который нажимает на ссылку и ждет непонятно чего. Добавим сообщение «Загрузка. «.
В блоке ссылок добавим контейнер для сообщения:
В нашей функции вызовем метод PShowWaitMessage для показа сообщения перед загрузкой. Метод PCloseWaitMessage вызывается для очистки сообщения после загрузки:
Теперь все это очень похоже на настоящий АЯКС! 
Приводим полный листинг нашей тестовой страницы:
Bitrix services main ajax php
Цитатник веб-разработчиков В тексте курса вы встретите цитаты, высказанные в разное время разработчиками системы и разработчиками проектов на базе Bitrix Framework. Надеемся, что такие неформальные замечания внесут некоторое разнообразие в процесс изучения. Заодно опытные специалисты поделятся и своим опытом.
Чтобы научиться программировать в Bitrix Framework, нет необходимости изучать всю линейку курсов. Но есть моменты, которые необходимо знать разработчикам о системе, они раскрыты в начальных курсах:
Как построен курс
Общепринятая градация квалификации разработчиков в рамках курса обозначает что:
Начальные требования к подготовке
Для успешного изучения курса и овладения мастерством разработки сайтов на Bitrix Framework необходимо владеть (хотя бы на начальном уровне):
У нас часто спрашивают, сколько нужно заплатить
Но у нас есть Академия 1С-Битрикс, где можно обучиться на платной основе на курсах нашей компании либо наших партнёров.
Тесты
После изучения курса вам будет предложено пройти тесты на сертификацию. При успешной сдаче последовательности тестов на странице Моё обучение можно просмотреть результат обучения и загрузить сертификат в формате PDF.
Комментарии к статьям
Что дальше?
Одновременно с изучением курса Разработчик Bitrix Framework вам придётся обращаться к информации о других технологиях Bitrix Framework. Эта информация размещена в следующих курсах:
Для преподавания оффлайн
Если данный курс берётся в качестве основы для оффлайного преподавания, то рекомендуемая продолжительность: 5 дней (40 академических часов).
Если нет интернета
Скачать материалы курса в формате EPUB. Файлы формата EPUB Чем открыть файл на
Android:
EPUB Reader
CoolReader
FBReader
Moon+ Reader
eBoox
iPhone:
FBReader
CoolReader
iBook
Bookmate
Windows:
Calibre
FBReader
Icecream Ebook Reader
Плагины для браузеров:
EpuBReader – для Firefox
Readium – для Google Chrome
iOS
Marvin for iOS
ShortBook
обновляются периодически, поэтому возможно некоторое отставание их от онлайновой версии курса.
Bitrix services main 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 в него будет загружен. Это не очень эстетично, поэтому еще предстоит что-то выдумать.