Меня всегда интересовало, почему при разработке сайтов так редко используется Ajax в навигационной системе? Ведь преимущества на мой взгляд очевидны! Ajax-сайт работает в разы быстрее любого обычного сайта, и даже если принять во внимание кеш браузера, это заметно.
Я решил копнуть глубже и разобраться, какие подводные камни меня ждут, и в чем настоящая сложность.
Когда я изучил вопрос более детально, то все же столкнулся с некоторыми трудностями, но не могу сказать, что они были существенными.
Все решаемо и очень просто, и сейчас я хочу поделиться с вами своим опытом создания полноценной Ajax-навигации.
С чего начать? Теория
Что мы хотим получить в результате? Мы хотим получить полноценный сайт, который смогут индексировать поисковые системы, с нормальной системой навигации и главное – быстрый.Решение я выбрал следующее: сайт обычный (без Ajax), с обычными ссылками (/новости/ или /контакты/), всё, что я сделал, это добавил перехватчик для навигации.
При переходе по ссылке программа просто отправляла POST-запрос на ту же страницу, только с параметром ajaxLoad , который сообщал серверу, что нужно отдать только часть страницы (без шапки, стилей, скриптов и т. д.), и этот кусок просто вставлялся в нужное место.
В качестве примера можно посмотреть сайт, для которого я реализовал данную систему: wicegoal.com .
(сайт еще в разработке, поэтому рекомендую просто переходить по навигационным ссылкам и странам в самом верху).
В качестве библиотеки JavaScript я выбрал jQuery. Первой проблемой, которую необходимо было решить, были ссылки и навигация в браузере.
Вам необходимо перехватывать нажатия кнопок браузера вперед и назад и, конечно же, следить за тем, чтобы пользователь мог добавить сайт в закладки.
Здесь есть два варианта, и каждый имеет свои недостатки:
- Хэш-ссылки.
Они хороши тем, что совместимы со всеми браузерами, но имеют большой недостаток — с ними невозможно работать в PHP, и это приводит к ряду проблем, таких как невозможность определить страницу после ее перезагрузки.
На самом деле можно придумать несколько извращенных методов решения этой проблемы, например такой: когда пользователь заходит по ссылке /#page=/новости/ , просто перенаправьте его на страницу /Новости/ , но вариант явно не лучший, но тем не менее, он имеет место быть.
- API истории HTML5. Этот вариант намного лучше.
Нет смысла его представлять это уже было сделано для меня , но у этого варианта есть одно большое НО: он не поддерживается ни одной версией IE.
Плюс должна быть версия сайта без Ajax, с которой смогут работать поисковые системы.
Я решил ограничиться только History API и версией без Ajax, чтобы не создавать себе лишних проблем.
Разработка навигационного двигателя
Первое, что я сделал, это создал файл навигатор.js , который должен обрабатывать ссылку, и поместил туда событие:
Теги: #jQuery #Ajax #php #удобство использования сайта #разработка сайта #jQueryif (history.pushState) { $('.navigation-menu').
live("click", function(){
-
Svg И Flash — Один И Тот Же Вид
19 Oct, 24 -
Линия Водопадов
19 Oct, 24 -
Миф Об Основных Работниках
19 Oct, 24 -
Пример Полезного Комментария
19 Oct, 24 -
Граната-Будильник
19 Oct, 24
