Understanding Ajax

Preface

In diesem ersten Basic-Tutorial versuche ich die Aufruf-Phasen einer Webseite zu erklären. Je besser du diese Aufruf-Phasen verstehst, umso leichter wird es dir fallen, an der richten Stelle Ajax und insbesondere Jybrid einzusetzen.

Die erste Grafik stellt den Ablauf eines Webseitenaufrufs dar. Alle folgenden Erklärungen beziehen sich auf dieses Diagramm und die dargestellten Aufruf-Phasen. Vielleicht gehst du vorab alle Schritte einmal in Gedanken durch. Gleichst die Schritte im Diagramm mit deiner Vorstellung von Webanwendungen ab. Solltest du Abläufe nicht verstehen, schreibe mir bitte eine E-Mail. Lasse mich wissen, was ich konkret in der Beschreibung verbessern soll.

Request Response diagram for regular page load

Regular Requests

Der User wird einen Klick ausführen. Der Server bearbeitet die Anfrage und gibt eine Webseite zurück. Der Browser liefert die Webseite dem User frisch geparsed auf den Monitor.

Aber Moment mal! Fehlt hier nicht etwas? Ja genau, etwas Entscheidendes. Es fehlt, was du als Programmierer zu tun musst, um die Abläufe im Diagramm zu ermöglichen.

Der User bist du nicht, der Browser ebenso wenig. Bleibt noch der Server übrig, der du ja eher auch nicht bist. Aber, du müsstest hier deine PHP-Skripte hinterlegen. So verweilen wir gedanklich auf dem Server. Wir sind bei den Skripten, die du so programmierst, dass im Ergebnis eine fertige Webseite an den Browser zurückgegeben wird. Am besten auch so wie du dir die Seitendarstellung auf dem Endgerät wünschst.

Spielen wir den Ablauf anhand zweier Beispiele durch:

Example Blog:

Damit wir eine Blog-Seite ausgeben können, erstellen wir diese Blog-Seite oder geben den Inhalt in die Datenbank ein. Setzen einen Link mit dem Ziel der Blog-Seite in das Skript. Geben die Webseite an den Browser zurück. Der User kann den Link klicken. Wir geben die Blog-Seite an den User zurück. Und so weiter und sofort.

Example Newsletter:

Bei der Anmeldung zu einem Newsletter zeigen wir dem User ein Formular. Er füllt das Formular aus und sendet es. Deine Skripte erkennen die Anmeldung zum Newsletter. Prüfen ob der User bereits angemeldet war oder nehmen ihn in die Newsletter-Datenbank auf. Die Rückgabe an den Browser erfolgt wiederum recht einfach. „Schön, dass du unseren Newsletter abonniert hast“ oder „Du hattest dich bereits angemeldet“.

Example Registration:

Der Ablauf ist bei der Registrierung ist ähnlich wie bei der Anmeldung zum Newsletter. Das Registrierungsformular ausgeben. Den User das Formular ausfüllen lassen. Deine Skripte empfangen und verarbeiten Registrierung. Deine Rückgabe-Antwort an den Browser wird „Willkommen“ oder „Registrierung nicht möglich“ sein.

Conclusion

Die regulären Requests haben wir besprochen. Wir fassen den Programm-Ablauf so zusammen, dass wir ein generelles Vorgehen für die Verwendung von Ajax ableiten können.

Ajax-Flow-Atlas

Akteuer jybrid relevant technisch wörtlich regular
Server x prepare possible request einen möglichen Request vorbereiten Url für einen Link erstellen
Server x response possible request den möglichen Request zum Browser senden Den Link in einem a-Tag bereitstellen
User x request den möglichen Request(Klick durch den User) tatsächlich ausführen und an den Server senden Klick auf den Link
Server x receive request den tatsächlichen Request empfangen Server-Skript starten
Server - do what ever you want ;-) den tatsächlichen Request verarbeiten Prüfen was der User wollte und die entsprechende Seite raussuchen
Server x prepare response aus dem tatsächlichen Request eine Rückgabe an den Browser erstellen Den Inhalt in Html-Tags setzen
Server x response Rückgabe an den Browser und die Rückgabe an den Browser (echo)

Wie du erkennen kannst, habe ich in der Tabelle die Schritte zur Verarbeitung ausführlicher als im obigen Beispiel dargestellt. Diese Tabelle soll als Atlas oder Wegweiser durch die Ajax-Entwicklung gelten. Wenn alles gut läuft, müsstest du jederzeit feststellen können, in welcher Phase du dich mit deinem Programmablauf befindest.