{"draftJsState":{"blocks":[{"data":{"image":{"id":"5ebfb46538e7d258172a51a1"}},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":" ","type":"atomic:image","key":"dvmvm"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"В компонентах Битрикс есть встроенный функционал для AJAX подгрузки. Его так же можно использовать, например для бесконечного скролла новостей. Но есть и более простой способ, с помощью которого можно загружать ответ любого компонента без перезагрузки страницы. Его мы и рассмотрим в этой статье.","type":"unstyled","key":"4gtkr"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":15,"offset":0,"style":"BOLD"}],"text":"Обработчик AJAX","type":"header-two","key":"8dblt"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Для начала нам нужно создать файл, к которому будем обращаться через AJAX-запросы. Назовем его ajax.php и поместим в корень сайта. Так как файл должен отдавать только данные, то мы подключаем только API Битрикс:","type":"unstyled","key":"aq9v3"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":12,"offset":2,"style":"BOLD"},{"length":8,"offset":15,"style":"BOLD"}],"text":"","type":"unstyled","key":"blvd5"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Пускай наш AJAX-запрос будет отдавать последние 10 новостей с помощью компонента bitrix:news.list. Но вы можете использовать абсолютно любой компонент. Добавляем компонент в файл ajax.php:","type":"unstyled","key":"3kelo"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"unstyled","key":"btgt"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":12,"offset":2,"style":"BOLD"}],"text":"IncludeComponent(\"bitrix:news.list\",\"\",Array( \"DISPLAY_DATE\" => \"Y\", \"DISPLAY_NAME\" => \"Y\", \"DISPLAY_PICTURE\" => \"Y\", \"DISPLAY_PREVIEW_TEXT\" => \"Y\", \"AJAX_MODE\" => \"Y\", \"IBLOCK_TYPE\" => \"news\", \"IBLOCK_ID\" => \"3\", \"NEWS_COUNT\" => \"20\", \"SORT_BY1\" => \"ACTIVE_FROM\", \"SORT_ORDER1\" => \"DESC\", \"SORT_BY2\" => \"SORT\", \"SORT_ORDER2\" => \"ASC\", \"FILTER_NAME\" => \"\", \"FIELD_CODE\" => Array(\"ID\"), \"PROPERTY_CODE\" => Array(\"DESCRIPTION\"), \"CHECK_DATES\" => \"Y\", \"DETAIL_URL\" => \"\", \"PREVIEW_TRUNCATE_LEN\" => \"\", \"ACTIVE_DATE_FORMAT\" => \"d.m.Y\", \"SET_TITLE\" => \"Y\", \"SET_BROWSER_TITLE\" => \"Y\", \"SET_META_KEYWORDS\" => \"Y\", \"SET_META_DESCRIPTION\" => \"Y\", \"SET_LAST_MODIFIED\" => \"Y\", \"INCLUDE_IBLOCK_INTO_CHAIN\" => \"Y\", \"ADD_SECTIONS_CHAIN\" => \"Y\", \"HIDE_LINK_WHEN_NO_DETAIL\" => \"Y\", \"PARENT_SECTION\" => \"\", \"PARENT_SECTION_CODE\" => \"\", \"INCLUDE_SUBSECTIONS\" => \"Y\", \"CACHE_TYPE\" => \"A\", \"CACHE_TIME\" => \"3600\", \"CACHE_FILTER\" => \"Y\", \"CACHE_GROUPS\" => \"Y\", \"DISPLAY_TOP_PAGER\" => \"Y\", \"DISPLAY_BOTTOM_PAGER\" => \"Y\", \"PAGER_TITLE\" => \"Новости\", \"PAGER_SHOW_ALWAYS\" => \"Y\", \"PAGER_TEMPLATE\" => \"\", \"PAGER_DESC_NUMBERING\" => \"Y\", \"PAGER_DESC_NUMBERING_CACHE_TIME\" => \"36000\", \"PAGER_SHOW_ALL\" => \"Y\", \"PAGER_BASE_LINK_ENABLE\" => \"Y\", \"SET_STATUS_404\" => \"Y\", \"SHOW_404\" => \"Y\", \"MESSAGE_404\" => \"\", \"PAGER_BASE_LINK\" => \"\", \"PAGER_PARAMS_NAME\" => \"arrPager\", \"AJAX_OPTION_JUMP\" => \"N\", \"AJAX_OPTION_STYLE\" => \"Y\", \"AJAX_OPTION_HISTORY\" => \"N\", \"AJAX_OPTION_ADDITIONAL\" => \"\" ));","type":"unstyled","key":"dngo5"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"?>","type":"unstyled","key":"b3930"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Теперь, если открыть наш файл /ajax.php в браузере, то должны отобразится новости.","type":"unstyled","key":"2cu37"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":11,"offset":0,"style":"BOLD"}],"text":"AJAX-запрос","type":"header-two","key":"edcg0"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"AJAX-запросы мы будем отправлять с помощью jQuery. Код можно использовать на любой странице:","type":"unstyled","key":"f27g8"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":3,"offset":1,"style":"BOLD"},{"length":3,"offset":17,"style":"BOLD"}],"text":"

","type":"unstyled","key":"9uoff"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":6,"offset":1,"style":"BOLD"},{"length":6,"offset":82,"style":"BOLD"}],"text":"","type":"unstyled","key":"40lm8"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":6,"offset":1,"style":"BOLD"}],"text":"","type":"unstyled","key":"5g7o2"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Как видите все довольно просто, мы отправляем AJAX-запрос к файлу ajax.php и выводим ответ в

. В запросе как обычно можно передавать GET и POST параметры, например для указания номера страницы и т.д.","type":"unstyled","key":"30rak"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"marker","key":"5KqwlNWyVHY9rjUTswMX"}],"entityMap":{}},"mentions":[]}