Teil 2: Ajax unter verschiedenen Browsern

Der Programmierer muss dem Browser übermitteln, wie der Anwender seine Maus bewegt hat und was er per Tastatur eingegeben hat. Bei statischen Seiten stellt jede neue Seite einen Verarbeitungsschritt dar. Daher können Sie mit dem back-Button zur vorherigen Seite zurück und mit forward zur nächsten Seite vorwärts schalten. Diese sequentielle Folge der besuchten und bearbeiteten Seiten heißt Browser-History.

Unter AJAX gaukeln Sie dem Browser vor, es würde nach jedem Arbeitsschritt eine neue Seite geladen. Einen tatsächlichen Ladevorgang stoßen Sie aber tunlichst nicht an, weil Sie damit auf die Vorteile von AJAX verzichten würden. Leider müssen Sie hierfür die verschiedenen Browser unterschiedlich behandeln.

Bei den meisten Browsern tragen Sie einen neuen Eintrag in der Browser-History dadurch ein, dass Sie mit JavaScript die window.location mit einem neuen Wert belegen. Um dabei die Seite nicht nachladen zu müssen, ändern Sie aber nur den so genannten Hash- Wert der URL. Der Hash-Wert ist die optionale Angabe mit einem Gartenzaun (#) am Ende der Adresse. Also stellt bei der URL https://bei spiel.de/index.html#Kap56 die Zeichenkette #Kap56 den Hash-Wert dar. Ursprünglich diente der Hash dazu, um innerhalb eines Dokuments Ziele anzuspringen. Daher war mit einem wechselnden Hash-Wert auch nicht vorgesehen, die Seite neu zu laden.

Für die meisten Browser können Sie mit der JavaScript- Zuweisung: window.location.hash = 'neuer hash wert'; einen neuen Arbeitsschritt markieren. Damit können Sie z.B. eine Variable erhöhen, um Adressen wie index.php#1, index.php#2, index.php#3 zu erhalten. Wenn der Anwender per back und forward in dieser Adressliste navigiert, ändert sich jedesmal der Wert von window.location.hash. Eine per Timer abgerufene JavaScript-Funktion fragt diesen Wert ab. Sie pollen also den Hash der Fenster-Adresse z.B. fünfmal pro Sekunde.

Leider macht der Internet-Explorer eine Ausnahme; ihn lässt es unbeeindruckt, wenn Sie den Hash der Dokument-Adresse ändern. Der IE trägt nur dann in der Browser-History etwas neu ein, wenn auch wirklich etwas nachgeladen wurde. Doch das wollen Sie ja bei AJAX vermeiden. Sie können jedoch ein neues Hilfsdokument in einen eingebetteten Frame nachladen und so den IE überreden, den Arbeitsschritt in der Browser-History festzuhalten. Dazu definieren Sie einen kleinen <iframe> im Hauptdokument und laden diesen mit einer sich ändernden Adresse immer neu, etwa durch die Anweisung $(iframe_name). src = 'dummy.php?h=neuer hash wert'; Der Beitrag Browsen mit Pfiff (PC Magazin 11/06, S. 174) hat mit der $()-Funktion aus prototype.js eine verkürzte Schreibweise für document.getElementById(iframe_name).src = ... eingeführt.

Der <iframe> selbst kann dabei für den User unsichtbar bleiben. Dazu bedienen Sie sich allerdings nicht der Syntax visibility: hidden, weil der IE sonst die Änderung des <iframe> ignorieren würde; anstatt dessen setzen Sie eine Höhe und Breite von 0 Pixeln ein. Bei jedem Arbeitsschritt laden Sie also eine neue kleine Seite in Ihren unsichtbaren <iframe>, was sich der IE in der Browser-History merkt. Navigiert der User mit back oder forward, ruft der IE die entsprechende Dummy-Seite wieder auf. Aus der Dummy-Seite können Sie gleich eine Java- Script-Funktionen in der Hauptseite aufrufen, denn die Dummy-Seite liegt ja in einem I-Frame der Hauptseite.

Damit ist sie also im Objekt- Baum ein Kind der Hauptseite. Über window.parent.hilfs_funktion() lassen Sie beispielsweise direkt in der Objekt-Umgebung der Hauptseite eine JavaScript-Funktion ablaufen. Und wenn dabei die Hilfsfunktion den Hash-Wert des Browser-Windows neu setzt, bekommt der Anwender dieselbe Oberfläche (den Hashwert der Adresszeile), um die Arbeitsschritte anzuzeigen. Komplizierter wird es, wenn Sie während der Arbeit die Seite nachladen müssen, weil der Anwender z.B. Dateien hochlädt oder die Arbeit unterbricht und später wieder aufnimmt.