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:
<!DOCTYPE html>
<html lang="DE">
<head>
<meta charset="UTF-8" />
<title>jQuery Formularajax</title>
</head>
<body>
<h1>Testformular</h1>
<form action="validate.php" method="post">
<label>Vorname: <input type="text" name="vorname" /></label><br />
<label>Nachname: <input type="text" name="nachname" /></label>
</form>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="jquery.ajaxform.js"></script>
</body>
</html>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!
<?php
// Namen aus den übertragenen Daten auslesen
$vorname = $_POST["vorname"];
$nachname = $_POST["nachname"];
// Leerzeichen vor und hinter den namen entfernen, sowie alles zu Kleinschreibung ändern
$vorname = trim(strtolower($vorname));
$nachname = trim(strtolower($nachname));
// Namen zusammenfügen
$name = $vorname . $nachname;
// Name ausgeben (in Kleinschreibung)
echo $name;
?>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:
$("form").submit(function(event) {
});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:
// Das eigentliche Absenden verhindern
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:
// Das sendende Formular und die Metadaten bestimmen
var form = $(this);
var action = form.attr("action"),
method = form.attr("method"),
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:
$.ajax({
}).done(function(data) {
}).fail(function() {
}).always(function() {
});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:
$.ajax({
url: action,
type: method,
data: data
})Das ist alles, was es braucht, um für ein beliebiges Textformular via AJAX zu senden.
Was macht man mit dem, was zurückkommt?
.done(function(data) {
// Transfer erfolgreich
alert("Der Name: " + data);
}).fail(function() {
// Transfer fehlgeschlagen
alert("Fehler");
}).always(function() {
// Vom Transferstatus unabhängig
alert("AJAX beendet!");
});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:
$("form").submit(function(event) {
// Das eigentliche Absenden verhindern
event.preventDefault();
// Das sendende Formular und die Metadaten bestimmen
var form = $(this); // Dieser Zeiger $(this) oder $("form"), falls die ID form im HTML exisitiert, klappt übrigens auch ohne jQuery ;)
var action = form.attr("action"), // attr() kann enweder den aktuellen Inhalt des gennanten Attributs auslesen, oder setzt ein neuen Wert, falls ein zweiter Parameter gegeben ist
method = form.attr("method"),
data = form.serialize(); // baut die Daten zu einem String nach dem Muster vorname=max&nachname=Müller&alter=42 ... zusammen
// Der eigentliche AJAX Aufruf
$.ajax({
url : action,
type : method,
data : data
}).done(function (data) {
// Bei Erfolg
alert("Erfolgreich:" + data);
}).fail(function() {
// Bei Fehler
alert("Fehler!");
}).always(function() {
// Immer
alert("Beendet!");
});
});Wie man sieht, reichen ein paar Zeilen jQuery, um jedes Textformular gleichzeitig auf AJAX zu trimmen 
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 
