Auf Grundlage der schnellen Javascript-Bibliothek DOMAssistant, über die wir vor kurzem berichteten, hab ich ein Ajax-Formular entwickelt. Es besitzt auch einen Fallback-Modus für den Fall, dass der Besucher Javascipt im Browser deaktiviert hat.
Entsprechend der DOMAssistant-Kompatibilität funktioniert das Ajax-Formular mit den Browsern Internet Explorer 5.5 (und höher), Firefox 1.5 (und höher), Opera 9 und Safari 2.
Bevor ich auf die Besonderheiten meiner Implementierung eingehe, kann sich jeder selber ein Bild meiner Anwendung machen, indem er sich meine Demonstration anschaut.
Mein Script besteht aus 4 Javascript-Funktionen, deren Namen sich größtenteils selbst erklären: initAJAX, sendData, getData und resData. Die letzte Funktion wertet die Antwort der aufgerufenen PHP-Datei aus, an die die Daten geschickt worden.
DOMAssistant bietet die Möglichkeit Daten sowohl per post- als auch per get-Methode zu übertragen. Da man bereits im form-Element von HTML eine Methode zur Datenübertragung wählt, lasse ich in dem Script die Art der Übermittlung auslesen und dann entsprechend die Funktion DOMAssistant.AJAX.post beziehungsweise DOMAssistant.AJAX.get ausführen.
Um die zu übertragenden Daten zu bestimmen, habe ich die Funktion getData geschrieben, in der ich Gebrauch von CSS-Selektoren mache um den Inhalt und die name-Attribute aller Eingabefehler auszulesen.
function getData(id) {
data = ""; // Datenstring
// für alle input-Felder innerhalb des ausgewählten form-Elements
//, die nicht das Attribut name mit dem Wert ref_page haben
$("#" + id + " input:not([name=ref_page])").each(function () {
// wenn input type nicht radio
if ($(this).type === "radio") {
// wenn radio-Button ausgewählt
if ($(this).checked) {
// Zusammensetzen des Datenstrings
if (data != "") data += "&";
data += $(this).name + "=" + $(this).value;
}
// wenn input-type nicht radio
} else {
if ($(this).type !== "submit") {
// Zusammensetzen des Datenstrings
if (data != "") data += "&";
data += $(this).name + "=" + encodeURIComponent($(this).value);
}
}
});
// für alle select-Boxen und Textfelder
$("#" + id + " select, #" + id + " textarea" ).each(function () {
// Zusammensetzen des Datenstrings
if (data != "") data += "&";
data += $(this).name + "=" + $(this).value;
});
// Rückgabe des Datenstrings
return data;
}
Der Datenstring erhält anschließend die Form vorname=wert&nachname=wert&… und wird an die save.php geschickt.
Die save.php hat es in sich, da sie multifunktionell ist:
- Es ist egal, ob Daten per get oder post übertragen wurden, da sowohl das $_POST- als auch das $_GET-Array nach übergeben Werten überprüft werden. Ist eines der Arrays nicht leer, wird ein Zeiger mit dem Variablennamen $myData auf das entsprechende Array gelegt, wodurch der Inhalt des jeweiligen Array über $myData verfügbar wird.
- Diese eine Datei verarbeitet einerseits die Datenübertragungen per Ajax und anderseits auch die gewöhnlichen – sprich ohne Javascript. Entscheidend hierfür ist das versteckte input-Feld mit dem name-Attribbut ref_page, das die Adresse des jeweiligen Formulars durch den Aufruf echo $_SERVER[„PHP_SELF“]; enthält. Im Falle einer Ajax-Übermittlung wird dieses Feld nicht mit übertragen, bei der geläufigen Form schon und dient als Weiterleitungsadresse (header: Location), wodurch man die save.php nicht zu Gesicht bekommt.
- In allen Übermittlungsfällen (get oder post, ajax oder regulär) wird sowohl bei erfolgreicher als auch fehlgeschlagener Übertragung eine Meldung zurückgegeben. Im Ajax-Fall in Form eines Strings, im regulären Fall in Form der Weiterleitung mit übergebener get-Variable.
Auf welche Art die Daten auch übertragen wurden, es erfolgt in jedem Fall eine Benachtigung des Benutzers. Sollte der Datentransfer per Ajax geschehen sein, wird über Javascript ein h3-Element mit der entsprechenden Meldung angezeigt. Bei einer gewöhnlicher Übermittlung geschieht dies über PHP und die übergebene get-Variable.
Ich habe alle verwendeten Dateien in ein rar-Archiv gepackt, somit kann jeder interessierte Entwickler das Formular ausprobieren und anpassen.
