jQuery AJAX

  • So, da AJAX immer mehr um sich greift und auch jQuery enorm verbreitet ist, möchte ich hier mal zeigen, wie man beides effizient verschmelzen kann.
    Dazu baue ich heute Schritt für Schritt ein jQuery Skript, welches einmal eingebaut, jedes beliebige Textformular der Seite asynchron über AJAX an das entsprechende verarbeitende Skript auf den Server weiterleitet und die Antworten abfängt.


    Wozu das gut ist? Nun, durch diese Technik muss beim Absenden eines Formulars nicht mehr die komplette Seite neu geladen werden, sondern AJAX holt im Hintergrund nur noch die für die Bearbeitung benötigten Informationen vom Server und fügt die Antwort dynamisch in die bereits bestehende Seite ein. D.h. weniger Traffic, d.h. schnellere Seite, d.h. zufriedene Besucher. Und modern ist es auch noch :)


    Dazu fängt am am Besten mit einem kleinen HTML Formular an:

    Ich gehe einfach mal davon aus, dass wenn man sich diese Tut durchliest, man schon Ahnung von HTML hat. Wenn nicht, http://www.html-seminar.de/ Da werden Sie geholfen :)


    So, Was passiert jetzt bei Aufruf des Skripts? Es gibt eine Fehlermeldung. Warum? Es gibt keine validate.php!

    Dies ist jetzt natürlich kein richtiges Validierungsskript, sondern nur zu Demonstration gedacht und da es auch um JavaScript geht, werde ich es nicht näher erläutern, als ohnehin schon.
    ACHTUNG!!! Es wird IMMER mit PHP validiert! Man kann mit JavaScript und HTML5 Formulare vorvalidieren um Traffic zu sparen, aber die einzig wirklich verlässliche, da nicht vom Nutzer manipulierbare Validierung findet auf den eigenen Servern mit PHP statt!!!


    Das JavaScript
    Nun zum eigentlichen JavaScript.
    Zuerst müssen wir gucken, ob ein Formular abgesendet wurde:

    JavaScript
    1. $("form").submit(function(event) {
    2. });

    Was macht das? Nun, wenn ein beliebiges Formular abgesendet wird, greift das Event .submit und startet eine anonyme Funktion.


    Danach muss man erstmal verhindern, dass das Formular trotz JavaScript Abfang normal gesendet wird:

    JavaScript
    1. // Das eigentliche Absenden verhindern
    2. event.preventDefault();

    Das ist die "moderne" und empfohlenere Variante des return false; am Ende des Skripts :)
    Und damit das "event" auch verhindert werden kann, muss es vorher auch mitgegeben werden. Was wir bei der anonymen Funtion gemacht haben.


    Nun brauchen wir die Infos, die das Formular liefert, also, wohin gehts, wie gehts dahin und was geht dahin. Oder anders: action, method und Daten:

    JavaScript
    1. // Das sendende Formular und die Metadaten bestimmen
    2. var form = $(this);
    3. var action = form.attr("action"),
    4. method = form.attr("method"),
    5. data = form.serialize();

    Um es mir einfacher zu machen, habe ich das aktuell aufrufende Formular erstmal in eine Variable gepackt. Das hat den Vorteil, dass man ggf. das Formular an andere Funktionen, zB zur JS Zwischenvalidierung weiterreichen kann.


    Als nächstes kommt nun der eigentliche AJAX Aufruf und die größte Stärke von jQuery in diesem Skript:

    JavaScript
    1. $.ajax({
    2. }).done(function(data) {
    3. }).fail(function() {
    4. }).always(function() {
    5. });

    Das ist der Grundaufbau, um einen AJAX Aufruf via jQuery zu senden, zu empfangen und den Transfer zu prüfen. Nun lasst uns die oben vom Formular erhaltenen Daten nutzen:

    JavaScript
    1. $.ajax({
    2. url: action,
    3. type: method,
    4. data: data
    5. })

    Das ist alles, was es braucht, um für ein beliebiges Textformular via AJAX zu senden.


    Was macht man mit dem, was zurückkommt?

    JavaScript
    1. .done(function(data) {
    2. // Transfer erfolgreich
    3. alert("Der Name: " + data);
    4. }).fail(function() {
    5. // Transfer fehlgeschlagen
    6. alert("Fehler");
    7. }).always(function() {
    8. // Vom Transferstatus unabhängig
    9. alert("AJAX beendet!");
    10. });

    Also, man hat zwei Ereignisse und eine unabhängige Funktion, die aufgerufen werden können. Hierbei ist die erste die einzige, die wirklich Daten empfangen muss, dies ist nämlcih die Funktion, die bei einem erfolgreichen Transfer die Daten des Serverskriptes erhält.
    Die zweite wird nur angesprochen, wenn beim AJAX Call etwas schief lief. Dies kann man dann zB. dem Nutzer mitteilen.
    Die dritte und letzte ist von Erfolg oder Misserfolg des Calls unabhängig, sie wird immer ausgeführt. Nutze ich zB. sehr gerne, um evt. Ladesymbole wieder zu verstecken.


    Nun das JavaScript als Ganzes noch einmal, mit Kommentaren:

    Wie man sieht, reichen ein paar Zeilen jQuery, um jedes Textformular gleichzeitig auf AJAX zu trimmen 8o
    jQuery spielt hierbei seine Rolle, um uns das Erhalten der Formulardaten und das Senden via AJAX enorm zu erleichtern. Irgendwo im Forum fährt noch ein ähnliches JavaScript rum, welches allerdings nicht auf jQuery aufbaut. Ist ungefähr fünfmal so viel Code.


    Das Besondere?
    Folgende Besonderheiten hat dieses Skript:

    • Es funktioniert für jedes Textformular gleichzeitig
    • Es ist komplett als Progressive Enhancement Script gestaltet, d.h. hat der Nutzer kein JavaScript aktiviert, funktionieren die Formulare trotzdem einwandfrei
    • Im eigentlichen HTML Code ist keine weitere Auszeichnung durch Klassen, oder zusätzliches JS notwendig.
    • Es lässt sich beliebig erweitern, zB durch eine rudimentäre Validierung des Formulars vor dem Senden (einfach den gesamten Ajax Call in eine if Bedingung packen)


    Das einzige, was mit diesem Skript nicht aynchron möglich ist, sind Fileuploads, da jQuery ohne weitere Plug-Ins keine Unterstützung dafür bietet. Vielleicht schreibe ich oder jmd. anders noch eine reine JavaScripterweiterung dieses Skripts um auch Fileuploads zu ermöglichen, aber ich zumindest nicht so bald.


    Wie man sieht, ist AJAX durch jQuery wirklich enorm verinfacht worden, vor allem durch die zwei von jQuery gestellen Funktionen .serialize() und $.ajax(). Diese nehmen uns 90% der Arbeit ab, die man bei reinem JavaScript machen müsste. Und nun viel Spaß beim Rumprobieren :thumbsup:

    Dieser Beitrag wurde bereits 4 Mal editiert, zuletzt von The Scout () aus folgendem Grund: 1) Hinweis zum Nutzen von AJAX, danke wolf 2) Schon wieder Bedankomat vergessen :) 3) Code geändert, offenbar hat da jQuery wieder ein wenig die API Vorgaben verschärft.

  • So, jetzt buddele ich mal selber ein bisschen in Gräbern rum, aber ich habe mal an einer Vanilla JS Variante gebastelt, die auch relativ schlank geblieben ist:


    Warum Vanilla?
    Weil schneller.


    Nachteile?
    Im Grunde wurde das Senden auf die POST Methode beschränkt, weil FormData die Stringifizierung nicht beherrscht. Soll heißen, man kann schönes key1=value1&key2=... bauen lassen. Dieser String wird aber bei GET benötigt, da er an die URL angehängt wird.


    Warum dann FormData? Weil man sonst für jedes einzelne Form Element prüfen müsste, was es ist, um damit dann den String zusammen zu bauen. Also, falls Textinput, nimm Name und Wert, falls Radiobutton, gucke ob gecheckt, ...


    Hat da jemand eine bessere Idee für Vanilla, oder findet jemand einen Bug in obigem Code?

  • Zu deinem JQ Teil dieses Tut's
    Wenn die Daten nicht aus einem Formular kommen sondern aus verscheidenen Variablen oder wie auch immer kann man data auch folgendermaßen aufbauen:

    JavaScript
    1. var KompletterName = 'John Meyer';
    2. //So kann »data:« manuell gebaut werden:
    3. data: { name: KompletterName, location: "St. Tropez" }
  • Ich habe mir mal den Code von Mozilla geschnappt, und ein bisschen hintendran gehängt. Ich stelle hier zwei Versionen rein, eine (auf en) kommentierte und eine, die (minimal) komprimiert wurde.


    Mit Kommentaren:


    Ein bisschen minimiert:

  • Hallo,


    Leider klappt das nicht :(


    Der erste Fehler wird bei event.preventDefault(); angezeigt:
    Expected : but found .
    event.preventDefault();
    ^
    Das script läuft dann nicht....

  • Stimmt, habs aktualisiert. Das Witzige: als ich es getestet hatte, funktionierte auch die "abgespeckte" Variante einwandfrei :)
    Offenbar hat jQuery da die Vorgaben in der API wieder ein wenig verschärft um die Codes übersichtlicher zu halten, oder so...

  • Ich erlaube mir mal ein Doppelpost ^^


    Habe mal eine native AJAX Funktion geschrieben (nicht speziell für Formulare)..
    Ist sehr an die jQuery.ajax() Funktion angelehnt und noch durchaus überarbeitbar .. :D

  • Hallo,
    ich habe das Tutorial nachgebaut jedoch funktioniert es nicht. Das Formular ruft immer wieder die PHP-Datei auf und leite auf diese Weiter.


    Meine Idee ist es das es an dieser Zeile liegt:

    HTML
    1. <script src="jquery.ajaxform.js"></script>



    Leider ist diese Zeile im Tutorial nirgendwo erklärt. Wo bekomme ich diese Datei her?


    Ist das ein spezielles Plugin für Jquery?