Blog zu den Themen Webentwicklung, technisches Online Marketing und Suchmaschinenoptimierung

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:

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

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!

Dieser Artikel wurde am 22.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. Hey,
    ich bin durch deine Artikelserie jetzt auch zu AJAX gekommen. Ich hab mir auch schon ein „kleines“ Projekt zum üben überlegt. Momentan hänge ich nur ziemlich und bin mir auch ehrlich gesagt gar nicht wirklich sicher, ob das überhaupt so machbar ist wie ich mir das vorgestellt habe.

    Ich möchte eine Art Bookmarksystem für mich schreiben. Das hinzufügen neuer Seiten stelle ich mir im Moment so vor:

    – hinzufügen als Liste möglich, getrennt durch Umbrüche, Kommas oder ähnliches
    – beim speichern, anpingen der Seite, auslesen des Titles, PR Abfrage etc
    – direktes anzeigen der gespeicherten Links

    Mein Problem ist jetzt einfach, ich hatte mir jetzt vorgestellt die Seiten einzeln abzuspeichern. Sprich, ich speichere alle Links einzeln in einem Array und rufe dann für jedes Array-Element die Speichernprozedure auf. Ich habe gerade etwas Probleme das zu erklären. Ich hoffe man versteht es trotzdem. Ich mach einfach mal ein Bsp:

    – Eingabe der Links als Liste
    – die einzelnen Links in einem Array speichern
    – Informationen zu dem ersten Link sammeln (anpingen, Title, etc) und speichern
    – Ausgabe der Informationen des 1. Links (als Tabelle)
    – Informationen zu dem zweiten Link sammeln, speichern
    – Ausgabe (Tabelle erweitern)
    – nächter Links
    – usw
    – Ausgabe der kompletten fertigen Tabelle

    Überlegt hatte ich mir das ganze um Timeouts bei vielen Links zu verhindern. Des Weiteren habe ich beim anpingen mittel fsockopen() Probleme bei mehreren Links.

    So, mein Problem ist jetzt einfach, wie mach ich das am cleversten ;)

    Vielleicht hast du da ja noch ein paar Tipps, Tricks und weiterführende Links für mich. Falls das ganze überhaupt machbar sein sollte. ;)

    Das reicht auch erstmal. Ich lass mir das ganze nochmal durch den Kopf gehen….

    Gruß Michael

    • Das mit dem Eintragen hat sich schon mehr oder weniger erledigt. Das mach ich jetzt so:

      $(‚#submit‘).click(function(e){
      e.preventDefault();

      var site = $(‚#adressen‘).val();
      var partsArray = site.split(„\n“);

      for(var i=0;i<partsArray.length;i++) {
      $.post('index.php', { adressen: partsArray[i] }, function(data){});
      }
      });

      Hab das eben mit 107 Adressen und dem anpingen ausprobiert. Das klappte soweit. Mal schauen, wie die anderen Sachen (Title, Pr, Alexa Rank, usw) klappen werden.

      Ich tüftel mal weiter…. ;)

  2. Du solltest noch erwähnen filter_var() ab der PHP Version 5.2 oder höher funktioniert. Leider gibt es noch viele Webhoster da draußen, die niedrigere PHP-Version verwenden. Ich wurde an deiner Stelle noch eine Alternative wie zum Beispiel eine Regx-Überprüfung erwähnen. Ansonsten echt schöner Beitrag und macht weiter so. Grüße Nico

  3. Hallo Torben!

    Ich habe PHP Version 5.4.35-0+deb7u2 aber bei mir funktioniert es nicht sofort.
    Bei einem Fehlerfall enthält data ein Leerzeichen am Ende.
    Damit also dein Code funktioniert, muss Zeile 21 in ajax-form.html wie folgt aussehen:
    if(data == ‚error ‚){

    Direkt nach dem Wort error muss also ein Leerzeichen sein.

    Liebe Grüße
    Erich

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.