AJAX Total #2: Mein erster AJAX-Request

Nachdem wir gestern zum Start der Artikelserie AJAX Total bereits geklärt haben, was AJAX eigentlich ist, steigen wir heute in den Quellcode ein und führen unseren (vielleicht wirklich) ersten AJAX-Request aus. Wer direkt auf diesem Artikel gelandet ist und noch keine Erfahrung mit AJAX-Anwendungen hat, dem empfehle ich, vorher den ersten Teil der Serie zu lesen. Dort erkläre ich die Basics und versuche das Phänomen Asynchronous JavaScript And XML zu erläutern.

Teile der Serie:

Das gute an Artikelserien ist, dass man einzelne Sachverhalte viel detaillierter erläutern kann. So möchte ich es in dieser Serie auch handhaben. Ich wünsche mir, dass auch Anfänger die Schritte verfolgen können und somit halte ich das Tempo bewusst niedrig.

Unsere Ausgangsbasis

Unsere Ausgangsbasis ist ein simples HTML5-Dokument – schauen wir uns den Quelltext im Detail an:

Eine kurze Erläuterung:

Zeile 1: In diesem Fall deklarieren wir die Datei als ein HTML5-Dokument. Das muss natürlich nicht sein, um AJAX-Anwendungen auszuführen; aber warum nicht nach vorne denken? ;-)
Zeile 4: Diese Zeile macht durchaus Sinn und sollte sowieso in jedem HTML-Dokument enthalten sein. Der Charset legt fest, wie die Zeichen dekodiert werden. UTF-8 ist immer eine gute Wahl.
Zeile 7: Wir binden das jQuery-Framework ein. Die entsprechende Datei liegt in unserem Fall auf dem Google-API-Server, was beispielsweise für schnellere Ladezeiten sorgt. Selbstverständlich könnt ihr jQuery auch herunterladen und direkt von eurem Server einbinden.
Zeile 13: Huch – das p-Element ist ja leer? Richtig, denn hier soll später dynamisch Inhalt per AJAX eingepflegt werden.

Unsere Aufgabenstellung

Unsere konkrete Aufgabenstellung sieht wie folgt aus: Sobald die Seite bzw. das DOM geladen ist, werden wir per Javascript auf eine zweite php-Datei zugreifen, deren Inhalt auslesen und in das leere p-Element einfügen. Das sollte für heute reichen, denn wer dieses Vorgehen begriffen hat, ist in der Lage, mit den folgenden Artikeln tiefer in die Materie einzusteigen.

Als erstes beginnen wir mit der zweiten Datei. Diese trägt die Endung .php und den Namen ajax.php und liegt im selben Verzeichnis wie unsere erste Datei von oben. Der Inhalt ist folgender:

Keine wirklich spektakuläre PHP-Datei, aber für den Anfang völlig ausreichend. Die Ausgabe könnte später in etwa so aussehen: „Hallo Welt, es ist 08:30 Uhr und 18 Sekunden„.

Ganz wichtig: In dieser Datei müssen wir kein neues HTML-Gerüst mit doctype, body oder head aufbauen! Wir wollen die Ausgabe ja in unser bereits fertiges HTML-Dokument einfügen und brauchen wirklich nur die entsprechenden Bausteine.

Der AJAX-Request

Nun wird es richtig spannend, denn wir werden aus unserer alten Datei auf die neue ajax.php zugreifen und dessen Inhalt in das leere p-Element einfügen. Dazu als erstes der komplette Quellcode:

Die entscheidenden Änderungen fanden in den Zeilen 9 bis 15 statt. Schauen wir uns Zeile für Zeile im Detail an.

Zeile 9:
Wir öffnen mit <script></script> einen Javascript-Bereich. Den folgenden Quellcode hätte man durch den Parameter src (wie in Zeile 7) auch in eine externe Javascript-Datei auslagern können. Bei größeren Projekten mit viel Javascript ist dies sogar von Vorteil, um die Datei cachen zu lassen und somit die Ladezeiten zu verringern. Ich denke in unserem Beispiel können wir uns dies aber sparen.
Übrigens: Auf das type=“text/javascript“ – Attribut im <script>-Tag können wir verzichten – in HTML5-Dokumenten ist diese Deklaration nicht mehr nötig.
Zeile 10:
Viele die bereits mit nativem Javascript gearbeitet haben, werden mit Sicherheit folgenden Aufruf kennen: <body onload=“doSomething();“>. Die Anweisung $(function(){}) lässt sich ungefähr damit vergleichen. Diese jQuery-Funktion wird nämlich gestartet, sobald jQuery erkennt, dass das DOM verfügbar ist und damit gearbeitet werden kann. Würde man diese Funktion in unserem Beispiel weglassen, passiert überhaupt nichts mehr, da der Javascript-Code bereits interpretiert würde, bevor der Interpreter überhaupt beim leeren p–Tag angekommen ist.
Klingt alles etwas kompliziert, ist es aber eigentlich gar nicht; für den Anfang genügt das Wissen, dass diese Funktion immer benötigt wird. Wer des englischen mächtig ist und sich detaillierter informieren möchte, ganz dies auf der Seite How jQuery Works: Launching Code on Document Ready tun.
Zeile 11:
Was bei nativem Javascript über 30 Zeilen lang wäre, können wir dank jQuery mit einem Dreizeiler realisieren. Selbstverständlich greift jQuery auch nur auf die Original-Funktionen zurück, stellt aber automatisch diverse Browserweichen parat und erleichtert uns das Leben alleine wegen der Schreibweise ungemein.
Der Funktionsaufruf $.get() startet den eigentlichen AJAX-Request; alternativ können wir hier auch $.post() verwenden. Falls man Datensätze an den Server schicken möchte (was wir in unserem Beispiel noch nicht tun) kann man so entscheiden, ob diese per POST- oder GET-Verfahren verschickt werden. Meine Faustregel: Kleine Datensätze per GET, große per POST – aber dazu im nächsten Artikel mehr.
Der erste Parameter dem wir der $.get()-Funktion übergeben ist die Datei, welche angesteuert werden soll. In unserem Beispiel ist dies natürlich die ajax.php, welche sich im selben Verzeichnis befindet. Wäre dies nicht so, könnte man der Funktion natürlich auch sowas wie ordner/ajax.php übergeben.
Eine sogenannte Callback-Funktion stellt der zweite Parameter dar. Callback-Funktionen kommen in jQuery sehr häufig zum Einsatz und stellen einen essentiellen Baustein dar, die Funktionsweise an dieser Stelle aber ausführlich zu erläutern würde den Rahmen sprengen. Wir genügen uns mit der Information, dass in diesem Fall eine sogenannten anonyme Funktion gestartet wird, die als Parameter die Variable data erhält. Und dreimal dürft ihr raten, was in der Variablen data drin steckt – richtig: der Inhalt aus der Datei ajax.php.
Zeile 12:
Mit dem Befehl $(„p“) steuern wir per jQuery-Selector bequem alle p-Elemente im HTML-Dokument an. In unserem Fall gibt es natürlich nur ein p-Tag, also wird auch nur dieses selektiert. Wer noch nie mit jQuery gearbeitet hat: Die Syntax bei den Selektoren ist fast die selbe wie bei CSS; man könnte beispielsweise $(„#meine_id“) oder $(„h1.eine_klasse“) ansteuern.
Die jQuery-Funktion .html(data) sorgt dafür, dass das gewählte Element den Inhalt der Variablen data als HTML-Inhalt bekommt.

Unsere endgültige Ausgabe dürfte also wie folgt aussehen:

Dass war er auch schon: Der zweite Teil der Artikelserie AJAX Total und möglicherweise euer erster AJAX-Request. Selbstverständlich ist das Einsatzgebiet noch begrenzt, da noch keine Interaktionsmöglichkeit besteht und der Inhalt lediglich beim Seitenaufruf einmal nachgeladen wird. Diesen Punkten nehmen wir uns dann im nächsten Teil der Serie an und bringen ein bisschen Action in die Sache. ;-)

Fragen, Kritik, Anmerkungen? Schreibt in die Kommentare, was ihr nicht verstanden habt oder wo ich in den nächsten Artikeln drauf eingehen soll – ich freu mich auf euer Feedback!