Переход на страницы без перезагрузки на AJAX
Сегодня рассмотрим тему создания навигации по сайту без обновления страницы, и кроме переходов мы так же будем менять URL страницы, именно сам адрес без хэша. Это будет полноценной навигацией с использованием технологии AJAX.
Я покажу пример переходов без pjax, которая встроена в библиотеку jQuery, и если тема будет актуальной - так же покажу примеры с библиотеками Mootools и на чистом JavaScript.
Для начала нам нужно подключить библиотеку jQuery, если она не подключена:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>И пишем сам код:
$(document).ready(function() {
$('a[attr^=\"noreload\"]').click(function(){ // Захватываем все ссылки с атрибутом attr="noreload"
var toLoad = $(this).attr('href')+' .wrapper';
var toLoadTitle = $(this).attr('href')+' title';
var toLoadUrl = $(this).attr('href');
loadContent();
$('.wrapper').html('<center><span id="load">Загрузка...</span></center>'); // Добавляем надпись во время загрузки
function loadContent() {
$('body').load(toLoad,'',changeURL());
$('title').load(toLoadTitle,'', changeTitle());
}
function changeURL() {
history.pushState($('title'), null, toLoadUrl); // Меняем URL страницы и добавляем в историю (поддерживают не все браузеры)
}
function changeTitle() {
document.title = $('title').html().replace(/<title>(.*?)<\/title>/, "$1"); // Меняем заголовок страницы
}
return false;
});
});Все страницы после тэга body должны быть между тэгами <div id="wrapper"></div>, пример: <body><div id="wrapper">контент</div></body>, чтобы каждый раз мы не загружали всю страницу вместе со стилями и скриптами. Все скрипты лучше использовать вне данного тэга. Далее чтобы навигация работала, нам нужно ко всем ссылкам, которые нужно грузить без перезагрузки добавить атрибут attr="noreload", пример: <a href="page.php" attr="noreload">Страница</a>. Если вам необходимо использовать скрипты в body - то вы можете преобразовать полученные страницы в json и выполнять после получения.
Вот и всё.