AJAX und die Zurück-Schaltfläche"

AJAX Anwendungen haben den schönen Vorteil, dass sie sparsame Ladezeiten haben, da Inhalte im Hintergrund nachgeladen werden und auch nach Nutzerinteraktionen sofort die gesamte Seite neugeladen wird.

Dabei kommt aber recht schnell ein Problem auf: Was ist wenn z.B. Suchergebnisseiten mit AJAX realisiert wurden, die Person auf ein Ergebnis klickt und dann wieder zurück will? Was ist wenn jemand einfach nur die Adresse an einen Freund verschicken will? Hier hört die Schönheit der AJAX Anwendungen auf. Asynchrone Interaktionen ändern nicht die URL und verursachen auch keinen Eintrag in der Browser History  - wie auch, die URL ist ja gleichgeblieben.

AJAX arbeitet in vielen Fällten mit HTTP GET Parameter – diese werden als Querystring einfach an die URL dran gehängt. Jetzt könnte man auf die Idee kommen über JavaScript window.location.search  mit entsprechenden Parametern zu aktualisieren.  Das funktioniert – man kann window.location.search schreiben – aber der Browser läd sofort die gesamte Seite mit den Parametern neu. Das ist nicht das was man sich vorstellt.

Eine andere Technik sind die so  genannten “Anker”. Eigentlich sind Anker eher zur Navigation innerhalb von Seiten gedacht.  Deswegen wird der Teil der URL nach (und einschließlich mit dem) # nicht an den Server geschickt und nach Änderungen wird auch nichts neugeladen, allerhöchstens zum entsprechenden Anker auf der Webseite gescrollt.  Seltsamerweise heißt das korresondierende Javascript Element dazu window.location.hash.

Das schöne ist mit jedem Ändern von window.location.hash wird ein neuer Eintrag im Browser Verlauf angelegt. Vor und Zurück  im Verlauf wäre somit möglich. Auch die Adresszeile wird aktualisiert.

Wie aber schon erwähnt wird der Anker nicht mit an den Server geschickt beim Aufrufen der URL. Damit wäre man also genauso weit wie vorher. Die Lösung hierfür heißt direkt beim window.onload Ereignis den Anker zu parsen und einen Entsprechenden AJAX Request zu starten. Dazu kann man z.b. bei den Suchergebnissen die Anzahl der Ergebnisse hineinkodieren oder die Seitenummer der Ergebnisse, die man sich gerade ansieht. So wird bei window.onload geprüft ob Standardeingaben vorliegen oder ob man z.b. eigentlich Seite vier haben will. Wenn dies der Fall ist wird der Code aufgerufen, der sonst vom User ausgeführt werden würde, wenn dieser zur besagten Seite will.

Eigentlich eine sehr einfache Lösung  - man muss nur erst mal drauf kommen. 

Hier ein kleines Beispiel:

window.onload = loadhashrequested;

 

function loadhashrequested()
{
    if(window.location.hash.length > 0)
    {
        var newhash = window.location.hash;
        newhash = newhash.replace(/#amount=/g, "");
        if(newhash.length>0)
        {
            newhash = parseInt(newhash);
            newhash = newhash -10;
            loadmore(10, newhash);
        }
    }
}

 

Hier bei wird geprüft ob in der URL “#amount=” vorkommt. Anschließend wird geschaut ob der Rest eine Zahl ist. Darauf werden die Suchergebnisse ab 11 nachgeladen. Normalerweise würde der User über  den Loadmore Button nach und nach 10 weitere Ergebnisse laden.