Themen
Tutorials
Tools
Uhrzeit mit PHP/AJAX
Nun erstellen wir eine Uhr. Damit diese auch wirklich von selbst läuft müssen wir einen kleinen Trick anwenden. Vom Grundprinzip her funktioniert das folgendermaßen:
Beispiel
Wie spät ist es jetzt?
Schauen wir uns nun einmal die Technologie an die dahinter steckt..
Schritt 1: Bestimmung der aktuellen Zeit
Dieser Schritt wird mit PHP erledigt. Dazu erstellen wir eine Datei (z.B. uhrzeit.php) mit folgendem Inhalt..
Hier wird die aktuelle Zeit bestimmt und gleich richtig formatiert, in diesem Fall H:i:s, was soviel wie Stunde:Minuten:Sekunden bedeutet. Falls es notwendig sein sollte könnte die Zeitausgabe insofern manipuliert werden indem man z.B. eine Stunde (H) hinzuaddiert.
Schritt 2: Das AJAX-Script
Jetzt haben wir die aktuelle Zeit, allerdings aktualisiert diese sich noch nicht automatisch. Um das zu erreichen setzen wir AJAX ein. Dabei handelt es sich um eine Javascript-Anwendung, die wir in einer weiteren Datei (z.B. zeitabfrage.js) erstellen..
Zu sehen sind hier zwei Javascript-Funktionen, die erste kümmert sich um den HTTP-Request, greift auf die Datei mit der Uhrzeit zu und verhindert das cachen, ansonsten würde das Ganze nicht funktionieren. Der Pfad zur PHP-Datei muss entsprechend angepasst werden, wenn beide Dateien nicht im selben Ordner liegen. Die zweite Funktion bezieht sich auf einen ID-Namen (z.B. time). Später wird ein DIV-Element erstellt, welches diesen ID-Namen erhält. Die Bedingung http.readyState == 4 bedeutet fertig, es gibt noch 4 weitere mögliche Zustände: 0 = nicht initialisiert, 1 = lädt, 2 = fertig geladen, 3 = wartet.
Das Geheimnis liegt nun in Zeile 34, wo durch setInterval() alle 1000 Millisekunden (= 1 Sekunde) das DIV-Element time automatisch aktualisiert wird ohne dass die gesamte Seite neu lädt. Da ja nun jede Sekunde eine andere Zeitausgabe erfolgt, haben wir den Effekt mit der laufenden Uhrzeit.
Schritt 3: Das HTML-Formular
Nun brauchen wir das Ergebnis nur noch auszugeben, dazu legen wir noch eine Datei an (z.B. zeit.html)...
Und hier taucht jetzt auch das DIV-Element mit der ID time auf, welches wir in der Javascript-Funktion angesprochen haben.