Problem med navigering när man använder AJAX

Att implementera AJAX och Web 2.0 funktioner i webbplatser har blivit självklart när man skapar nya eller fräschar upp gamla sajter. En vanlig webbplats har interna länkar som laddar om hela webbläsarfönstret och det är inte ovanligt att det tar några sekunder och att det flimrar till när hela sidan ska ritas om i fönstret. Men AJAX är ett sätt för webbläsaren att kommunicera med webbservern utan att ladda om själva sidan där man kan ladda om bara vissa delar av sidan eller komplettera med mer data. En vanlig förekommande funktion är en listbox med länder, och när man valt landet laddas via AJAX ytterligare listbox med alla orter och städer i det valda landet utan att ladda om hela sidan.

Denna webserverteknologi är väldigt fexibel och man kan anpassa den till att ladda om olika saker på sidan för att förenkla för besökaren. Idag använder majoriteten av webbplatser någon form av AJAX. Teknologin har blivit så populär eftersom den stöds av alla morderna webbläsare, mobiltelefoner och utvecklingsverktyg.  Teknologin har utvecklats vidare sedan några år tillbaka och nu finns en hel del ramverk som uttnyttjar detta för att göra mer användarvänliga gränssnitt.

Men det har gått lite fort för det finns en stor nackdel med AJAX som faktiskt går att lösa med lite trix. Nackdelen är att historiken för tidigare besökta sidor inte fungerar tillfredställande och klickar användaren på tillbakaknappen hamnar man på sidan där man var först, alla dessa AJAX klick därimellan registreras inte. Detta kan bli ganska förvirrande för den omedvetne besökaren och man upplever sidan som konstig. Alla vana surfare har lärt sig att flitigt använda Bakåt och Framåt knapparna i webbläsaren och därför är detta ett stort problem med den nya teknologin. Det finns även ett annat problem och det är om man vill bokmärka sidan man är på, de AJAX klick man gjort går inte att bokmärka utan man kan bara bokmärka sidan som den såg ut när man just kom till sidan vilket kanske inte besökaren uppmärksammar.

Lösningen på problemet är att med Javascript manipulera historiken samtidigt som AJAX används. Detta går faktiskt att göra med lite olika teknologier (ramverket Dojo har t.ex. en inbyggd dojo.back funktion). Eftersom ett klick på bakåt eller framåtknappen normalt sett laddar om hela webbläsarfönstret så går AJAX lösningen förlorad, men om man istället jobbar med ankarmärken t.ex. www.sajten.se/artikel5.html#ankar1 så hoppar bara webbläsaren mellan ankarmärkerna istället för att ladda om sidan och det kan man utnyttja för att lösa detta problem.

Det man då behöver göra är att vid varje AJAX klick även uppdatera historiken med ett unikt ankarmärke. Sedan kan man binda en funktion till händelsen när någon klickar på bakåt eller framåt knapparna och i den funktionen läsa av vilket ankarmärke som man vill till och på så sätt skicka korrekt AJAX förfrågan. På detta sätt kan man också redan vid sidladdningen kolla om det finns något ankarmärke som hör till AJAX och uppdatera sidan med nödvändigt material och då gör det inget att någon bokmärkt en sida med ankarmärken tillhörande AJAX funktionalitet eftersom man då hamnar på den korrekta uppdaterade sidan som avsågs.

Hur man sedan binder händelser i knapparna framåt och bakåt skiljer sig mellan olika webbläsare och i Internet Explorer 8 finns redan stöd för att hantera detta. De webbplatser vi nu bygger (www.byggdags.se, www.tradgardsdags.se och www.hemochharmoni.se) har stöd för allt detta så ni kommer snart att få testa och se hur vi gjort för att få allt detta att fungera.