Ajax bezeichnet eine Technologie, mit der es möglich ist z.B. nur Teile einer Webseite dynamisch nach zu laden, ohne die komplette Webseite neu zu laden und dabei sogar noch Usereingaben zu verarbeiten. Damit erleichtert diese Technologie Web-Usability ganz erheblich und kommt in immer mehr Webanwendungen zum Einsatz. Die Programmierung dahinter, war lange Zeit durch die unterschiedliche Implementierung in den Browsern, schwierig. Das bekannte Javascript Tool jQuery macht es nun aber leicht in wenigen Zeilen einen funktionierenden Ajax-Befehl zu programmieren. 

Ziel ist ein Script, welches anhand der Postleitzahl, die entsprechende Stadt ermittelt und ausgibt.

Auf der Webseite gibt es dazu ein Eingabefeld für Postleitzahlen und ein Sendebutton.
Nach dem Klick auf den Sendebutton, soll dann das Eingabefeld und der Button verschwinden und der Name der gesuchten Stadt angezeigt werden.

Der Code

HTML Code (index.html)

Wichtig bei diesem Code ist, dass Einbinden der jQuery-Bibliothek welche z.B. von Google bereitgestellt wird (Zeile 9) .
Dann erfolgt der Aufruf unseres Ajax Scriptes (Zeile 12). Im HTML Code selber definieren wir ein DIV mit der ID=“Suchfenster“ welches später ausgetauscht wird und das Formular mit der ID=“plz_formular“

Javascript Code (ajax_plz.js):

In Zeile 1 erfolgt der für jQuery übliche Initialisierungsbefehl, welcher nach dem Laden aller Elemente auf der Webseite ausgeführt wird.

Nun muss das Standartverhalten der Form beim Absenden des Formulares abgefangen und durch unser Ajaxscript ersetzt werden. In Zeile 2 und 5 erfolgt dazu das Überschreiben der Standart submit Reaktion. Nun müssen die Übergebenen Formulardaten, für den Versand vorbereitet werden. Dieses geschieht in Zeile 11 durch einen Serialize-Befehl. Zusätzlich wird der Pfad zum PHP-Script welches die Ausgabe übernimmt angegeben (Zeile 8) und der Datentyp der Übermittlung auf „html“ gesetzt (Zeile 14).

Nun wird eine kurze Austauschfunktion geschrieben, die den Inhalt des DIVs Suchfenster durch die Ausgabe des PHP-Scriptes ersetzt (Zeile 14-19).

Als letztes folgt der eigentliche Ajax Befehl in Zeile 22 . Hier in Form von post. Dabei wird das PHP Script „ort_ausgabe.php“ aufgerufen. Diesem stehen dann die übergebene Variable in gewohnter „$_POST[plz] Form zu Verfügung. Diese Variable kann nach erfolgreicher Validierung dazu genutzt werden z.B. mit einer MySQL Datenbank abgeglichen zu werden. Das Ergebnis ($ort) wird dann mit einem simplen echo Befehl ausgegeben.

PHP-Code (ort_ausgabe.php gekürzt)

Diese Ausgabe stellt nun den Rückgabewert des PHP-Scriptes dar, der ans Javascript zurückgeliefert wird.

Natürlich können hier auch Fehlermeldungen zurückgeliefert werden, z.B. wenn die Validierung fehlschlägt.

Wichtig: Die aufgerufen PHP-Scripte innerhalb der Ajax Funktion sollten immer gut abgesichert und gegen fremde Verwendung geschützt sein. Deshalb gilt es hier vor allem auf die gute Vorabvalidierung der Variablen innerhalb des Scripts zu achten.

Und nun wünsche ich viel Spaß bei der Anwendung dieser tollen Technik.