Experiența de a crea ajax sistem de navigație

M-am întrebat mereu de ce, atunci când proiectarea site-uri web, atât de rare în sistemul de navigație utilizează Ajax? La urma urmei, beneficiile sunt evidente, în opinia mea! Site-ul Ajax funcționează de multe ori mai rapid decât orice site-ul obișnuit, chiar și luând în considerare cache-ul browser-ului, este de remarcat.

Am decis să sape un pic mai adânc și de a afla care sunt capcanele de așteptare pentru mine, și ceea ce este complexitatea reală a întregului. Când am studiat problema mai în detaliu, unele dificultăți cu care se confruntă încă, dar nu a spus că au fost semnificative. Totul se decide foarte simplu, iar acum vreau să împărtășesc experiența mea cu tine pentru a construi un sistem complet Ajax-navigare.

În cazul în care pentru a începe? teorie

Ceea ce vrem să obțineți ca rezultat? Dorim să obțineți, site-ul complet, care poate indexa motoarele de căutare, cu navigarea normală, și cel mai important - rapid.

• referință Hash. Sunt bune, deoarece acestea sunt compatibile cu toate browserele, dar au un mare dezavantaj - ele nu pot lucra în PHP, iar acest lucru implică o serie de probleme, cum ar fi incapacitatea de a determina pagina dupa ce reporneste. De fapt, vă puteți gândi la câteva metode perverse pentru a rezolva această problemă, de exemplu, astfel încât, atunci când un utilizator accesează link-ul / # page = / news /. pur și simplu redirecționare la pagina / stiri /. dar opțiunea nu este în mod clar cel mai bun, dar cu toate acestea, trebuie să fim.
• Istoricul HTML5 API. Această opțiune este mult mai bună. Trimite aceasta nu are nici un sens, este deja făcut pentru mine. Acum, această opțiune are un mare DAR: nu are suport pentru orice versiune unul dintre IE.

curs de ieșire poate fi găsit, de exemplu, pentru a face acest lucru: pentru browserele moderne, selectați API History, dar pentru IE - o referință hash. În plus, acesta va fi cu siguranță versiune a site-ului, fara Ajax, cu care motoarele de căutare va fi capabil să lucreze.

Am decis să limiteze API Istoria și versiunea fără Ajax, astfel încât să nu creeze probleme inutile pentru ei înșiși.

Dezvoltarea motorului de navigare

Primul lucru pe care am făcut-o - a creat fișierul navigator.js. care ar trebui să fie implicate în procesarea de link-uri, și a pus evenimentul:

Aici, pentru început, să verificați dacă browser-ul API Istoric, dacă da, atârnă handler la toate legăturile cu clasa de navigare-meniu. manipulant setPage va apela o funcție:

Această funcție trimite post-cerere pentru a ne pagina necesară. Este demn de atenție la opțiunea ajaxLoad. Această opțiune necesită script server-side, care ne va da pagina. Dacă există un parametru ajaxLoad, serverul ne va da doar partea dreapta a paginii, în cazul în care nu este, serverul va da întreaga pagină, cu titlul, subsol, navigare și așa mai departe. D.
Acest lucru este necesar pentru a se asigura că, atunci când intră în mod direct o astfel de site.com/news/ pagină, avem toată pagina, iar dacă vom merge pe această pagină, cum ar fi principal pe ajax-link-ul, aveți nevoie pentru a obține o parte din ea, pe care noi și se introduce în bloc conținutul interior #. nu avem nevoie de întreaga pagină, trageți o grămadă de cod suplimentar este lipsită de sens.

Există, de asemenea, încă un lucru care te va interesa cu siguranta, vorbesc despre această linie:

Această linie, am primit pagina de înregistrări în cache. Întrebarea de ce acest lucru este necesar, nu mai este singur atunci când vine vorba de navigare a browserului. La urma urmei, acesta va fi mult mai bine, dacă apăsați butonul din spate, vom primi un răspuns imediat din cache decât va aștepta până când pagina se va încărca din nou. Pentru a cache a lucrat la începutul fișierului, trebuie să adăugați următorul cod:

Acum trebuie să închideți handler pentru a naviga browser-ul. Acesta este responsabil pentru acest eveniment istoric API onpopstate. aici vom folosi cache:

Acest eveniment va fi declanșat prin apăsarea butoanelor înainte și înapoi într-un browser, tot ceea ce a fost cerut de el - inserat în conținutul blocului # conținut interior al cache atunci când utilizatorul revine la pagina anterioară.

Ce se întâmplă toate astea?

Toate fișierul navigator.js arată astfel:

Traduceți site-ul este destul de simplu pentru o astfel de abordare. Avem nevoie doar de a lucra cu serverul, și învață-i să dea o parte sau întreaga pagină la setarea ajaxLoad acolo și atunci când nu este. Ar trebui sa folosesc ajax sau nu, este o chestiune de opinie, dar nu am văzut încă un singur semn minus în această abordare.