Blog zu den Themen Webentwicklung, technisches Online Marketing und Suchmaschinenoptimierung

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:

  1. Was ist AJAX?
  2. Ein einfacher AJAX-Request
  3. Request mit Event verknüpfen
  4. Daten an den Server senden

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 pTag 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!

Dieser Artikel wurde am 15.04.2011 veröffentlicht

Wer schreibt hier?

Torben Leuschner - Webentwickler

Hi, ich bin Torben und baue leidenschaftlich gerne Webseiten. Also habe ich mein Hobby zum Beruf gemacht und bin seit 2008 als Webentwickler Selbständig tätig. Obwohl ich schwerpunktmäßig für Kunden arbeite habe ich auch sehr viel Freude an der Realisierung eigener Projekte. Daraus resultierend hat sich eine große Affinität zu den Themen Online Marketing und Suchmaschinenoptimierung entwickelt. Gelegentlich schreibe ich auf Twitter, viel aktiver bin ich allerdings auf Facebook. Gerne können wir uns dort vernetzen!

Wie stehst du dazu?

  1. Gute Reihe Torben. Interessant wäre noch, welche Sicherheits-Aspekte man beim arbeiten mit AJAX Request beachten muss, z.B. das sicherstellen, dass der Request auch wirklich vom eigenen Server kommt etc.

  2. Hallo Jan,

    da wäre ich mir in diesem Fall nicht so sicher. Wie im ersten Artikel beschrieben, geht es hier wirklich um die reinen Basics. Diese wurden von einigen Twitter-Followern gewünscht und ich vermute, wenn ich jetzt hier mit Sicherheitsaspekten und Co. anfange, dass manche damit überfordert wären.

    Gerne kann im Anschluss aber noch ein „Profi-Artikel“ erscheinen, der solche Aspekte behandelt.

    Aber mal was anderes: In den allermeisten Fällen ist es doch absolut nicht notwendig zu überprüfen, ob die Anfrage vom eigenen Server kommt? So etwas macht meines Erachtens nur bei Logins und ähnlichen Funktionalitäten Sinn. Wobei ich diese aber auch eher über andere Methodiken schützen würde.

  3. Auch wenn es „um die absoluten Basics“ geht, vermisse ich doch die Grundlagen. Ich hab leider keine Gliederung der Reihe gesehen, deshalb weis ich nicht ob es noch vorkommt, mit Grundlagen meine ich: das XMLHttpRequest Objekt (auch im Hinblick für alle Browser), konkurrierende Requests und Timeout-Behandlung – bevor gleich mit der jQuery Bib. gestartet wird. Klar ist es einfach und bequem darauf aufzusetzen, nur es nimmt einem zu viel Arbeit ab, bevor man eigentlich weis, was das alles macht.

  4. Sehe ich entschieden anders: Die Leser, die sich diese Artikel-Reihe gewünscht haben, möchten nichts über das XMLHttpRequest Objekt, konkurrierende Requests und Timeout-Behandlung wissen.

    Ich hatte im ersten Artikel erwähnt, dass es für Personen, die bereits AJAX-Anwendungen geschrieben haben, absolut nichts Neues geben wird.

  5. Das sich die Serie an Beginner orientiert finde ich gut, dass es für mich nix neues zu lernen gibt, weil ichs kann, macht mir nichts aus; lesen kann ichs ja trotzdem. Wenn du allerdings am Ende explizit nach Feedback/Kritik/Lob frägst und ich meine das könnte vielleicht nützlich sein es aber „enschieden“ anders gesehen wird – dann haben wir wohl beide einen konkurrienden Request ^^

  6. Hehe hoffe du hast das nicht falsch verstanden – ich bin über Jans und Dein Feedback sehr glücklich und respektiere es natürlich! Gerne bin ich auch bereit, im Anschluss an diese Serie noch weitere (spezifischere) Fachartikel zu schreiben.

    Ich sehe es eben nur explizit anders, wenn es um diesen Punkt geht. Jeder der sich wirklich mit solchen Themen wie du sie genannt hast ausernanden setzen möchte, der sollte sich eher ein gutes AJAX-Buch kaufen. Diesen Themen in aller Fülle gerecht zu werden ist nicht mein Anspruch!

    Und ich bin mir sehr sicher, dass es den meisten einfach „too much“ wäre. Es soll ja gerade gezeigt werden, wie simpel es ist, per jQuery einen AJAX-Request auszuführen. Aus diesem Grund habe ich auch absichtlich auf den nativen Quellcode verzichtet.

    Gruß, Torben

  7. Hallo Torben,
    ich finde Ihren Artikel spitze. Das sagt einer, der schon viele Jahre Webseiten baut und monatlich 40000 Besucher hat. Fies habe ich bis heute nur mit PHP und HTML erreicht.
    Wegen der kryptischen Schreibweise habe ich noch nie eine Zeile Javascript geschweige denn JQUERY geschrieben. Für mich ist das ein guter Einstieg.
    Als Bauingenieur kann ich Dich nur bestätigen. Man fängt immer am Fundament an und erklärt erst einmal die einfachen Bauweisen.
    Wer diese dann beherrscht, kann sich den Rest selbst aneignen.

    Des weiteren möchte ich Ihr Design löblich erwähnen. Ich kümmere mich im Augenblick gerade darum wie man seine Webseiten auch für mobile Geräte zugänglich macht. So bin ich über Sie gestolpert und lese jetzt ganz andere interessante Dinge.

    Besten Gruß aus Barsinghausen

Schreibe einen Kommentar zu Torben Leuschner Antworten abbrechen

Deine E-Mail-Adresse wird nicht veröffentlicht.

* Die Checkbox für die Zustimmung zur Speicherung ist nach DSGVO zwingend.

Ich stimme zu.