Создаем jQuery AJAX сайт, работающий также без JS

В этом уроке я покажу Вам простой способ (с помощью AJAX) обновления содержания страниц. При этом сайт будет нормально работать также при отключенном JavaScript.

Кроме этого полученный сайт будет также абсолютно дружелюбен в плане поисковой оптимизации.

Идея

Сайт, который мы создаем в этом уроке будет иметь обычную навигацию, состоящую из обычных ссылок, которые ведут на разные страницы. Если JavaScript включен тогда поведения после нажатия на ссылки будет изменено (т.е не будет перехода на новую страницу) на новое - загрузка контента используя AJAX и обновление страницы без перехода по новому УРЛ.

Для всего мы будем использовать функцию jQuery load. Эта функция будет извлекать новые страницы. У нее есть очень полезное свойство (жизненно важное в нашем случае), которое позволяет загрузить только фрагмент страницы, а не всю страницу целиком. В нашем случае нам интересен только div с контентом.

HTML

<ul id="menu">
<li><a href="index.html">Home</a></li>
<li><a href="link2.html">Link 2</a></li>
<li><a href="contact.html">Contact</a></li>
</ul>

Выше у нас навигация. В ней ничего особенного. Нам необходимо добавить лишь id к нашему элементу, чтобы можно было добавить специальное поведение.

<div id="ajax-wrap">
<div id="text">
</div>
</div>

Также важный шаг - это создание div, в котором будет находится контент. Именно в нем будет меняться текстовая информация при нажатии на ссылки в навигации. Обратите внимание, что у нас два элемента - обертка и непосредственно сам элемент в котором контент (с id - text).

Также обратите внимание, что все страницы с контентом являются сами по себе полноценными html документами. Мы загружаем их с помощью AJAX и используем только часть с текстом. Если кто-то обратится к такой странице напрямую, он увидит полный вариант страницы, а не только текст. Это ключ для верного отображения сайта без JS и для поисковиков.

JavaScript

Был создан маленький javascript объект, который справляется со всем:

var AjaxContent = function(){
var container_div = '';
var content_div = '';
return {
getContent : function(url){
    $(container_div).animate({opacity:0}, //Прозрачность на 0
        function(){ // загружает контент с помощью ajax
        $(container_div).load(url+" "+content_div, //загружает только выбранную часть
        function(){
            $(container_div).animate({opacity:1}); //возвращает прозрачность обратно на  1
            }
        );
    });
},
ajaxify_links: function(elements){
    $(elements).click(function(){
        AjaxContent.getContent(this.href);
        return false; //предотвращает нажатие на ссылку
    });
},
init: function(params){ //задает первоначальные настройки
    container_div = params.containerDiv;
    content_div = params.contentDiv;
    return this; //выводит объект
    }
    }
}();

Мы вставляем этот скрипт на страницах сайта вместе с фреймворком jQuery.

Теперь давайте детальнее взглянем на код:

При загрузке страницы нам необходимо идентифицировать ссылки и присвоить им события.

$(function(){
    AjaxContent.init({containerDiv:"#ajax-wrap",contentDiv:"#text"}).ajaxify_links("#menu a");
});

Этот вызов инициализирует объект AjaxContent нашего оберточного div и контентного div. Следующий запрос сообщает скрипту каким именно ссылкам мы хотим добавить специальные события (в нашем случае всем с id "menu").

ajaxify_links: function(elements){
    $(elements).click(function(){
        AjaxContent.getContent(this.href);
        return false;
    });
}

Это метод, который мы вызвали ранее. Он выбирает все элементы используя строку jQuery селектора. В нашем случае он берет все ссылки. Для каждой ссылки он прописывать событие при нажатии. Эта функция вызывает метод getContent  и предотвращает переход по ссылке.

getContent : function(url){
    $(container_div).animate({opacity:0}, //first, turn the opacity to 0
        function(){ //on the callback, load the content with ajax
            $(container_div).load(url+" "+content_div,
            function(){
                $(container_div).animate({opacity:1}); //and finally bring back the opacity back to 1
            }
        );
    });
}

Этот метод меняет прозрачность контейнера на 0. Далее обращается к методу load и вытаскивает только часть контента (ту которую нам необходимо). В нашем случае мы сообщили скрипту взять div с id "text" (jQuery на самом деле достает весь HTML документ и потом его парсит для выбора необходимой части). После загрузки контента прозрачность вновь меняется на 1.

Заключение

Как Вы видите, благодаря мощи jQuery, все это очень легко сделать. Теперь у нас есть классный способ извлекать контент и при этом сайт прекрасно работает при отключенном JS. И вдобавок  ко всему, сайт также СЕО дружелюбен, так как ссылки имеют обычный <a> вид.

В демо версии используется простой бесплатный шаблон. Вы можете переделать все на более красивом варианте.