- Метки урока:
- оптимизация
- ajax
- jquery
- javascript
- html
Создаем 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> вид.
В демо версии используется простой бесплатный шаблон. Вы можете переделать все на более красивом варианте.
Данный урок подготовлен для вас командой сайта ruseller.com
Источник урока: www.malbecmedia.com
Перевел: Максим Шкурупий
Урок создан: 31 Марта 2010
Просмотров: 94202
Правила перепечатки
5 последних уроков рубрики "Разное"
-
Как выбрать хороший хостинг для своего сайта?
Выбрать хороший хостинг для своего сайта достаточно сложная задача. Особенно сейчас, когда на рынке услуг хостинга действует несколько сотен игроков с очень привлекательными предложениями. Хорошим вариантом является лидер рейтинга Хостинг Ниндзя — Макхост.
-
Как разместить свой сайт на хостинге? Правильно выбранный хороший хостинг - это будущее Ваших сайтов
Проект готов, Все проверено на локальном сервере OpenServer и можно переносить сайт на хостинг. Вот только какую компанию выбрать? Предлагаю рассмотреть хостинг fornex.com. Отличное место для твоего проекта с перспективами бурного роста.
-
Разработка веб-сайтов с помощью онлайн платформы Wrike
Создание вебсайта - процесс трудоёмкий, требующий слаженного взаимодействия между заказчиком и исполнителем, а также между всеми членами коллектива, вовлечёнными в проект. И в этом очень хорошее подспорье окажет онлайн платформа Wrike.
-
20 ресурсов для прототипирования
Подборка из нескольких десятков ресурсов для создания мокапов и прототипов.
-
Топ 10 бесплатных хостингов
Небольшая подборка провайдеров бесплатного хостинга с подробным описанием.