AJAX Total #4: Daten an den Server senden

Nachdem wir gestern im dritten Teil der Serie AJAX Total Aktionen ins Spiel gebracht haben – zum Beispiel den Klick auf einen Button – gehen wir heute wieder einen Schritt weiter. Diesmal lesen wir Daten aus dem DOM aus, senden diese an den Server und bekommen eine entsprechende Antwort. Praxisnahe Einsatzmöglichkeiten gibt es mehr als ich in 32.000 Pixeln Höhe aufzählen könnte, weshalb ich mich für folgende entschieden habe…

Teile der Serie:

Man nehme ein handelsübliches Formular wie es Millionenfach im Internet vorkommt. Dort haben wir ein Input-Feld, in der der Benutzer seine Emailadresse eintragen kann. Nun müssen wir nach dem Absenden des Formulares überprüfen, ob es sich um eine valide Email handelt beziehungsweise ob überhaupt etwas eingetragen wurde.

Da wir aber auf Usability großen Wert legen, möchten wir dem Benutzer größtmöglichen Komfort bieten und überprüfen bereits während der Eingabe, ob es sich um eine valide Emailadresse handelt – natürlich wieder per AJAX. Falls nicht, wird das entsprechende Feld rot umrahmt und der Button zum Abschicken des Formulares wird deaktiviert.

Bitte beachtet: Jegliche Überprüfung von Formularfeldern durch Javascript- bzw. AJAX-Funktionen sind immer ein nettes Plus für den Benutzer und spart ihm im Regelfall Zeit (und bringt euch dadurch eine höhere Conversion Rate). Dennoch ist es immer essentiell die Eingaben nach dem Abschicken nochmals serverseitig zu überprüfen. Ansonsten kann jedes „Script Kiddie“ in wenigen Sekunden das System zum Fall bringen – egal in welcher Form.

Die HTML- & Javascript-Datei

Ein Sprung ins kalte Wasser ist meines Erachtens nie verkehrt, also schauen wir uns direkt den kompletten Quellcode der HTML-Datei an. Logisch, dass wir im vierten Teil der Serie AJAX Total das Tempo etwas anziehen müssen – also bitte nicht vom Code abschrecken lassen, im Anschluss wird natürlich alles wieder detailliert erklärt!

Ich glaube nicht, dass es notwendig ist, den unteren Teil des Quellcodes – nämlich die HTML-Ausgabe – detailliert zu erklären. Wer AJAX-Request mit jQuery schreiben möchte, muss in der Lage sein das bisschen HTML zu verstehen ;-)

Springen wir also direkt zum spannenden Teil, dem Javascript- beziehungsweise jQuery-Quellcode:

Zeile 11 und 12
In den beiden Variablen submit und email_feld speichern wir die beiden Input-Felder aus dem DOM. Hierbei ist wichtig zu wissen, dass wir nicht direkt den Wert oder eine andere Eigenschaft in der Variablen speichern, sondern das HTML-Element selber. Die Variable submit wäre somit ein direkter Verweis auf das HTML-Submit-Input-Element.
Die verschiedenen Schreibweisen sollen zeigen, wie mächtig der jQuery-Selektor ist. Im Falle des Email-Feldes liegt eine ID vor, womit wir direkt auf diese zugreifen können. Beim Submit-Element hingegen fehlt diese, weshalb wir alle Input-Felder vom Type „submit“ selektieren.
Nochmal der Hinweis: Die jQuery-Selektoren sind grundlegend identisch mit den CSS-Selektoren, bieten aber dennoch einige Zusatzfeatures. Wer effektiv mit jQuery und AJAX arbeiten möchte, sollte sich diese Regeln dringend verinnerlichen.
Zeile 14
Wir geben dem submit-Element das HTML-Attribut disabled, damit man es nicht mehr anklicken kann. Dies könnten wir natürlich auch direkt im Quelltext machen – Besucher, die Javascript aber deaktiviert haben, könnten das Formular dann nicht mehr Abschicken.
Zeile 16
Im Prinzip kennen wir diese Funktionalität schon aus dem dritten Teil der Artikelserie. Dort verwendeten wir bereits das jQuery-Event click() um auf einen Button-Klick zu reagieren. Da wir in diesem Fall aber gleich zwei Events auf das Email-Eingabefeld anwenden wollen, müssen wir bind() verwenden. „change“ löst immer ein Event aus wenn Änderungen am Email-Feld vorgenommen werden, „blur“ tut dies falls das Feld seinen Fokus verliert.
Zeile 17
Auch wenn es nur eine Kleinigkeit ist, gegenüber den AJAX-Befehlen aus den letzten Artikeln hat sich etwas verändert: Wir führen den AJAX-Request nicht mehr per $.get() sondern per $.post() aus. Dieses Verhaltes steuern wir in einem klassischen Formular mit method=“post“ beziehungsweise method=“get“. An der weiteren Funktion ändert sich jedoch nichts.
Nochmals der Hinweis: Es gibt keine klaren Regeln wann man GET und wann man POST verwenden sollte. Ich verwende folgende Faustregel: Schicke ich keine oder nur wenig Daten an den Server, verwende ich GET. Bei Dateiuploads oder längeren Texten muss es eine POST-Variable sein. Falls ein Profi mitliest, kann er auch gerne seine Meinung zu diesem Thema in den Kommentaren hinterlassen – ich bin gespannt!
Zeile 17 bis 20
Und wieder hat sich etwas verändert: Die geschweifte Klammer {} war in den vorherigen Beispielen noch nicht da. Dieser zweite Funktions-Parameter wird nämlich nur gebraucht, wenn man Daten an den Server schicken möchte.
Die Schreibweise ist dabei recht simpel: Zuerst kommt ein frei definierbarer Bezeichner, dann ein Doppelpunkt und danach der entsprechende Javascript-Wert. Folgen weitere Variablen, ist ein Kommata am Ende der Zeile notwendig.
In Zeile 18 überliefern wir einen festen String; in Zeile 19 den Wert des Email-Eingabefeldes. Diesen bekommen wir durch die jQuery-Funktion .val() zurückgeliefert.
Zeile 21 bis 27
Wir überprüfen, ob der von der angeforderten Datei validate.php ausgegebene Wert der Zeichenkette „error“ entspricht. Ist dies der Fall, nutzen wir die jQuery-Funktion .css() um dem Email-Eingabefeld einen roten Rahmen zu verpassen und die Funktion .attr() um den Submit-Button zu sperren.
Dies haben wir zwar oben bereits getan, dennoch könnte es ja sein, dass er in der Zwischenzeit wieder durch eine valide Eingabe freigeschaltet worden ist.
Genau das ermöglichen nämlich die Zeilen 25 und 26. Falls validate.php kein „error“ ausgibt, bekommt das Email-Feld einen grünen Balken und der Button zum Absenden des Formulares wird wieder freigegeben.

Die PHP-Datei validate.php

Kluge Köpfe können sich wahrscheinlich schon denken, was hinter der validate.php steckt. Dennoch möchte ich euch deren Inhalt natürlich nicht vorenthalten.

Ihr seht, auf die oben definierten Variablen können wir hier nun wieder zugreifen. Und zwar per $_POST[].

Erwähnenswert wäre noch die in PHP5 hinzugefügte Funktion filter_var(), welche zusammen mit dem Filter „FILTER_VALIDATE_EMAIL“ eine native Emailvalidierung bereit stellt. Falls diese fehlschlägt, gibt die Datei „error“ aus. Simpel, oder?

Vielleicht ist dem ein oder anderen ebenfalls aufgefallen, dass die Variable $action eigentlich überhaupt nicht benötigt wird. Doch diese ermöglicht euch, die Datei validate.php mehrfach für verschiedene AJAX-Requests zu nutzen, zum Beispiel um eine URL oder einen Benutzernamen zu validieren. Nun ist eure Kreativität gefragt.

Ende der Artikelserie AJAX Total?

Meines Erachtens haben wir mit dem vierten Teil der Artikelserie AJAX Total nun alle wichtigen Einsatzgebiete abgesteckt. Oder anders ausgedrückt: Ich wüsste nicht, was ich in einem fünften Teil noch schreiben könnte, ohne mich massiv zu wiederholen.

Du siehst das anders? Du hast nicht alles verstanden? Tausend Fragezeichen im Kopf? Dann lass es mich wissen!

Falls es einen fünften Teil der Artikelserie geben wird, gehört dieser ganz euch. Lasst mich wissen was euch interessiert, wo ihr noch Schwierigkeiten habt oder welchen konkreten Einsatzzweck ihr nachgebaut haben möchtet.

Ich bin auf eure Kommentare gespannt und wünsche nochmals ein frohes und besinnliches Osterfest!