Просмотр кода страницы Использование AJAX для подгрузки контентных страниц (CMS)

<div style="width: 800px;">
Данная статья ставит своей целью описать основные принципы загрузки контентных страниц через AJAX.

Для удобства загрузки контентных страниц можно использовать AJAX, он используется для взаимодействия с сервером без перезагрузки страницы, таким образом пользователю не придется лишний раз ожидать перезагрузки страницы в браузере. 

Рассмотрим использование AJAX-а на примере страницы новостей. Допустим мы создали 3 контентные страницы: 
* страница на который мы хотим выводить новости <syntaxhighlight lang="text" enclose="none" style="font-size: 1.2em; padding: 0 3px; background: #F0F0F0; border: 1px dashed #2F6FAB;">/news.html</syntaxhighlight>
* страница на которой находятся новости авиакомпаний <syntaxhighlight lang="text" enclose="none" style="font-size: 1.2em; padding: 0 3px; background: #F0F0F0; border: 1px dashed #2F6FAB;">/avia-news.html</syntaxhighlight>
* страница с новостями сервиса <syntaxhighlight lang="text" enclose="none" style="font-size: 1.2em; padding: 0 3px; background: #F0F0F0; border: 1px dashed #2F6FAB;">/service-news.html</syntaxhighlight>

{{Attention|Для страниц <syntaxhighlight lang="text" enclose="none" style="font-size: 1.2em; padding: 0 3px; background: #F0F0F0; border: 1px dashed #2F6FAB;">/avia-news.html</syntaxhighlight> и <syntaxhighlight lang="text" enclose="none" style="font-size: 1.2em; padding: 0 3px; background: #F0F0F0; border: 1px dashed #2F6FAB;">/service-news.html</syntaxhighlight> необходимо использовать макеты без шапки и подвала.}}

На странице <syntaxhighlight lang="text" enclose="none" style="font-size: 1.2em; padding: 0 3px; background: #F0F0F0; border: 1px dashed #2F6FAB;">/news.html</syntaxhighlight> выводим список новостей (например списком <syntaxhighlight lang="text" enclose="none" style="font-size: 1.2em; padding: 0 3px; background: #F0F0F0; border: 1px dashed #2F6FAB;">ul</syntaxhighlight>) и блок в который будут выводится новости:

<syntaxhighlight lang="xml" line enclose="div" style="font-size:9pt;background: #F9F9F9; border: 1px dashed #2F6FAB; padding: 10px 5px; margin: 10px 0;">
<ul>
   <li class="js-news" data="visa">Новости виз</li>
   <li class="js-news" data="service">Новости сервиса</li>
</ul>
<div class="results">
   Вводное описание для страницы новостей.
</div>
</syntaxhighlight>

А в разделе '''«Администрирование» ⇨ «Настройка внешнего вида»''' необходимо разместить js-код:

<syntaxhighlight lang="xml" line enclose="div" style="font-size:9pt;background: #F9F9F9; border: 1px dashed #2F6FAB; padding: 10px 5px; margin: 10px 0;">
$(".js-news").on("click", function() {
   var data = $(this).attr("data");
   $.ajax({
      url: '/' + data + '-news.html',
      success: function(data) {
         $('.results').html(data);
      }
   });
});
</syntaxhighlight>

В атрибуте <syntaxhighlight lang="text" enclose="none" style="font-size: 1.2em; padding: 0 3px; background: #F0F0F0; border: 1px dashed #2F6FAB;">data</syntaxhighlight> хранится префикс названия страницы и по клику на новость в блок <syntaxhighlight lang="text" enclose="none" style="font-size: 1.2em; padding: 0 3px; background: #F0F0F0; border: 1px dashed #2F6FAB;">results</syntaxhighlight> подгружается нужная страница.
</div>

== См. также ==
* [[Система управления порталом (ЦМС)]]
* [[Фронт-энд]]
* [[Веб-сайт]]
* [[Редактор структуры]]
* [[Алиас]]
* [[Короткие ссылки]]
* [[Файловый_менеджер_(ЦМС)|Файловый менеджер]]