Переход на страницы без перезагрузки на 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 и выполнять после получения.
Вот и всё.

Комменарии

Написать комментарий

Примечание: HTML разметка не поддерживается! Используйте обычный текст.
    Плохо           Хорошо
Защита от роботов