Das W3C Konsortium hat nun einen einheitliche Definition für das XMLHttpRequest-Objekt zur Standardisierung vorgeschlagen. Des Weiteren wird eine Spezifikation in Betracht gezogen, die die Domain-übergreifende Abfragen erlauben soll.

Lassen wir uns überraschen ob und wann die Standardisierung kommt und wie sie aussehen wird. Ich befürworte diesen Schritt jedoch grundsätzlich.

FancyUpload ist eine einfach zu handhabende Anwendung, die es ermöglicht mehrere Uploads nacheinander auszuführen und diesen Vorgang graphisch darzustellen. Es ist leicht einzurichten, serverunabhängig, lässt sich mit Hilfe von CSS und XHTML vollständig frei gestalten und basiert auf MooTools, um auf allen aktuellen Browsern (Internet Explorer 6+, Opera 9, Firefox 1.5+ und Safari 2+) zu laufen.

Die Featureliste liest sich wie folgt:

• Auswählen und Uploaden von mehreren Dateien
• Herausfiltern von Dateitypen durch einen Auswahldialog
• Optionale Events um eigene Ereignisfunktionen einzubinden
• Anzeigen von nützlichen Dateiinformationen noch vor Beginn des Uploadvorgangs
• Begrenzen der Uploads über die Dateigröße oder – anzahl
• plattform- und serverunabhängig, setzt nur Flash 9+ vorraus
• Abbrechen laufender Uploads, Hinzufügen neuer Uploads während eines laufenden Hochladevorgangs
• Alles ist optional, dokumentiert und lässt sich leicht anpassen
• Serverantwort nach dem Uploaden zum Anzeigen zusätzlicher Dateiinformationen oder einer Bildvorschau
• Angabe der aktuellen Uploadgeschwindigkeit und der verbleibenden Zeit
• Senden zusätzlicher Informationen über Variablen mittels GET und POST
• Bestimmen des Dateinamens nach dem Uploadvorgang

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.

Microsoft bietet sein mächtiges Entwicklungswerkzeug in 4 verschiedenen Express-Editionen an. Neben Basic, C# und C++ gibt es zur Entwicklung von dynamischen Webanwendungen Visual Web Developer 2008 Express. Entwicklern steht das neue ASP.NET AJAX zum schreiben von ajaxbasierten Webseiten zur Verfügung.

Zusätzliche Web-Komponenten und -Controls bietet das ASP.NET AJAX Toolkit, welches als Open Source Software auf CodePlex veröffentlicht ist. Einige Beispiele, welche Art von Ajax-Anwendungen sich mit diesem Toolkit realisieren lassen, sind hier zu finden.

Visual Web Developer 2008 Express herunterladen

AJAX Control Toolkit herunterladen