Делаем Ajax навигацию на jQuery без сторонних плагинов и проблем с поисковыми системами

9 Апр
2012

Недавно делал один маленький проект и решил в нем воплотить в жизнь все свои задумки по дизайну и функционалу. Одной из таких задумок была и Ajax навигация по сайту. Сказано — сделано. Вроде все просто — все ссылки оставляем как есть, прикручиваем обработчик и готово! Но есть же еще поисковые системы, пользователи с отключенным JavaScript`ом, а также кнопки «Назад» и «Вперед» в браузере. Об этом забыли? если нет, то смело под кат.

Обработчик кликов


Нетерпеливые могут сразу посмотреть демо.
Итак, начнем. Первым делом нужно сварганить сам обработчик ссылок:
$(document).ready(function() {

  $('a').live('click', function() {
    if($(this).attr('noajax') === 'true') return true;
    var link = $(this).attr('href');
    location.hash = link;
    return false;
  });

});

Да, вот так просто! Сначала мы проверяем, нет ли у ссылки атрибута «noajax» и равен ли он true, если да, то загрузка страницы происходит без ajax. Затем определяем куда ведет ссылка по которой кликнул пользователь и изменяем хеш страницы. Прошу заметить — я использую live, для того, чтобы ссылки, загруженные из ajax тоже работали.

Событие смены хеша страницы


После того как мы поменяем хеш, нужно как-то отследить это. Я использую стандартный набор средств jQuery:
$(window).bind('hashchange', function() {

  var link = location.hash.replace('#', '');

  $('.content_block').html('<img class="preloader" src="/patch/to/preloader.gif" alt="Loading..." title="Loading.." />');

  $.get(link, function(data) {
     $('.content_block').hide().html(data).fadeIn('slow');
  });

  });

Теперь, когда хеш меняется, в блок с классом «content_block»(мы же не будем скачивать ВСЮ страницу) будет помещаться прелоадер, сообщающий о том, что идет загрузка страницы, затем, когда страница загружена, контент на ней плавно поменяется на новый.

Загрузка страницы


Вроде все готово, но осталась одна маленькая засада — если пользователь поделится такой ссылка со своим другом, то он не увидит нужной страницы, т.к. загрузится главная страница, чтобы этого не происходило, нужно сделать проверку хеша не только при его изменении, но и при загрузке страницы.
$(document).ready(function() {

  if(location.hash !== '') {
    var link = location.hash.replace('#', '');

    $('.content_block').html('<img class="preloader" src="/patch/to/preloader.gif" alt="Loading..." title="Loading.." />');

    $.get(link, function(data) {
       $('.content_block').hide().html(data).fadeIn('slow');
    });
  }

});

Тут мы делаем то же самое что и в прошлом абзаце, но с проверкой существования хеша, а то вдруг он вообще не указан?

Системная часть


Загрузка сделана, как теперь нам определить что запрос сделан через Ajax(я использую PHP, по этому и примеру буду привдить для него). Все просто! Для этого есть глобальная переменная $_SERVER[‘HTTP_X_REQUESTED_WITH’].
Делаем простую проверку:
if(@$_SERVER['HTTP_X_REQUESTED_WITH'] === 'XMLHttpRequest') {
// чего нибудь делаем
};

Прошу заметить, то что я использую оператор @, он обеспечивает подавление ошибок в случае, если указанный заголовок попросту не передан(т.е. когда такого ключа нет в массиве $_SERVER).

Ну, и напоследок


Мы реализовали абсолютно полноценную ajax навигацию на сайте всего за несколько минут и с использованием только одного jQuery, без различных плагинов и прочего мусора. Думаю неплохо. Спасибо за внимание!

И еще… Надо же посмотреть как это выглядит!
По материалам Хабрахабр.



загрузка...

Комментарии:

Наверх