Опитът за създаване на система за навигация Аякс

Винаги съм се чудил защо при проектирането на уеб сайтове, така че рядко в навигационната система използва Ajax? В крайна сметка, ползите са очевидни по мое мнение! Site Аякс работи много пъти по-бързо от който и да е обикновен сайт, а дори и като се вземат предвид кеша на браузъра, е забележима.

Реших да копаем малко по-дълбоко и да разберете какво са капаните, които ме чакат, и това, което е действителната сложността на цялото. Когато учех въпроса по-подробно някои трудности все още са изправени, но не казват, че те са били значителни. Всичко се решава много просто, а сега искам да споделя моя опит с вас, за да се изгради пълна Аякс-навигация.

Откъде да започнем? теория

Това, което искаме да се получи като резултат? Ние искаме да получим, пълен сайт, който може да индекс търсачки, с нормална навигация, и най-важното - бързо.

• Hash справка. Са добри, защото те са съвместими с всички браузъри, но има голям недостатък - те не могат да работят в PHP, и това предполага редица проблеми, като например невъзможността да се определи на страницата, след като се рестартира. Всъщност, може да се сетя за няколко извратени методи за решаване на този проблем, например, така че, когато потребител посети връзката / # страница = / Новини /. просто да го пренасочи към страницата / Новини /. но като опция очевидно не е най-добрият, но въпреки това, ние трябва да бъдем.
• HTML5 API на историята. Тази опция е много по-добре. Пуснете го няма смисъл, той вече е направил за мен. Сега само този вариант има едно голямо НО: той не поддържа всяка една версия на IE.

Изход разбира се може да се намери, например, да го направят, защото съвременни браузъри, изберете API на история, но и за IE - препратка хашиш. Плюс това, тя със сигурност ще бъде версия на сайта, без Аякс, с които търсачките ще могат да работят.

Реших да ограничи API на историята и версията без Аякс, за да не се създават излишни проблеми за себе си.

Развитие на навигация двигател

Първото нещо, което направих - създаден navigator.js файл. които трябва да се занимава с обработването на линкове и сложи на събитието:

Ето, като за начало, проверете дали или не API браузъра история, ако е така, виси манипулатор на всички връзки с класа за навигация меню. setPage манипулатор ще извикате функция:

Тази функция изпраща след искане да ни необходимата страница. Струва си да се обръща внимание на ajaxLoad на опцията. Тази опция изисква от страна на сървъра скрипт, който ще ни даде на страницата. Ако има параметър ajaxLoad, сървърът ще ни даде само дясната част на страницата, ако не е, сървърът ще даде цялата страница, със заглавие, мазето, навигация и др. Г.
Това е необходимо, за да се гарантира, че при въвеждане на такава site.com/news/ страница директно, имаме цялата страница, а ако се върнем на тази страница, като основните от Аякс-връзка, трябва да получи част от него, която ние и поставете в блок # съдържание вътрешната. ние нямаме нужда от цялата страница, плъзнете цял куп допълнителни код е безсмислена.

Има и още едно нещо, което със сигурност ще се интересуват, аз говоря за този ред:

Тази линия, ние сме получили страница записи в кеша. Въпросът защо това е необходимо, вече не е сам, когато става дума за сърфиране на браузъра. В края на краищата, тя ще бъде много по-добре, ако натиснете бутона за връщане назад, ще получите незабавен отговор от кеша, отколкото да чака, докато страницата ще се зареди отново. За кеш работил в началото на файла, който трябва да добавите следния код:

Сега трябва да се затвори манипулатора, за да се движите браузър. Той е отговорен за това събитие API на историята onpopstate. Тук ние ще използваме кеша:

Това събитие ще се задейства с натискане на бутоните напред и назад в браузъра, всичко, което се изисква от него - вмъква в съдържателно-вътрешната съдържанието на блок # на кеш паметта, когато потребителят се връща на предишната страница.

Това, което всички се случи?

Всички navigator.js файл изглежда така:

Превод на сайта е много проста за такъв подход. Ние просто трябва да се работи със сървъра, и я научи да се даде част или цялата страница при определянето ajaxLoad там и когато не е. Трябва ли да използвам Аякс или не, това е въпрос на лично мнение, но аз не съм виждал още един-единствен знак минус в този подход.