Когда возникает потребность в обновлении блоков текущей страницы без её перезагрузки, получая содержимое для этих блоков на других страницах веб-сайта, следует использовать технологию Ajax. Библиотека JQuery значительно упрощает задачу, предоставляя необходимые методы для обработки Ajax запросов.

В контексте рассматриваемой темы интерес представляет метод JQuery.load(). На странице описания метода приведены примеры его использования, достаточные для понимания работы с ним в общем случае. Я же хочу рассмотреть вариант практического использования Ajax запроса фрагмента страницы при реализации постраничной навигации, осуществляемой без перезагрузки текущей страницы. Это может быть полезно в тех случаях, когда у вас уже есть работающая постраничная навигация, но для реализации Ajax запросов с помощью специального API нет возможности внести изменения в работу скрипта, выполняемого на стороне сервера.

В качестве примера предлагаю использовать следующую базовую HTML разметку страницы.

<div id="content"><!-- Содержание блока, подлежащее замене --></div>
<ul>
  <li><a class="link-paginate" href="/notebook?p=1">1</a></li>
  <li><a class="link-paginate" href="/notebook?p=2">2</a></li>
  <li><a class="link-paginate" href="/notebook?p=3">3</a></li>
  <li><a class="link-paginate" href="/notebook?p=4">4</a></li>
</ul>

В блоке #content выводится содержимое страницы, подлежащее обновлению с использованием Ajax. Элементы .link-paginate – элементы постраничной навигации. Все страницы, на которые ссылаются элементы .link-paginate – это полноценные HTML страницы веб-сайта, формируемые на стороне веб-сервера. Таким образом, посетитель может просматривать веб-сайт, используя постраничную навигацию без Ajax.

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

1. изменить поведение элементов постраничной навигации при клике;
2. заменить содержимое целевого блока содержимым такого же блока с запрошенной страницы.

Перечисленные действия могут быть выполнены с использованием следующего фрагмента JavaScript кода:

<script>
  $('.link-paginate').on('click', function(e) {
    e.preventDefault();
    $('#content').load($(this).attr('href') + ' #content');
  })
</script>

Ajax запросы к страницам веб-сайта при помощи рассмотренного кода имеют тип XMLHttpRequest и выполняются методом GET. Учитывая это, добавив дополнительный параметр к запрашиваемому URL, вы можете указать скрипту специальные условия для формирования HTML кода возвращаемой страницы. Например, в шаблоне страницы темы оформления в GetSimple CMS вы можете добавить условие проверки на тип запроса и наличие специального параметра в $_GET. В результате такой проверки шаблон оформления может формировать упрощённую версию страницы, не содержащую элементов оформления и не требующую подключения CSS и JavaScript ресурсов.

Теперь вы знаете, как добавить интерактивности страницам своего веб-сайта, не прибегая для этого к внесению изменений в программный код, выполняемый на стороне сервера. Но работа с Ajax в библиотеке JQuery не ограничивается рассмотренным методом JQuery.load(). Для иных сценариев использования Ajax запросов следует ознакомиться со списком доступных методов на странице официальной документации JQuery в разделе Ajax.