Ajax:
Die Web 2.0 Technologie
Interaktivität durch das Asynchrone Javascript And XML - HttpRequest-Objekt
Ajax ermöglicht einen Datenaustausch zwischen Client (Browser) und Server. Im Hintergrund, ohne, dass der User auf etwas geklickt hätte, ohne untätig auf Antwort warten zu müssen und ohne Reload/Neuaufbau der gesamten Webseite. Das verkürzt die Ladezeiten, vermindert Trafficvollumen und die Website wirkt wie eine lokal installierte Anwendung, ohne Spuren in der Browser History zu hinterlassen.
Damit kann beispielsweise ein Texteingabefeld mit Vorschlägen vom Server ergänzt werden, während der User das Suchformular ausfüllt; eine laufende Aktualisierung der Seite (nicht synchron zum Seitenaufbau) findet statt. Auf solcher Art dynamisch erzeugten Inhalts, kann ich aber schwehrlich ein Bookmark (Lesezeichen) setzen.
Ayax ist keine neue Technologie, sondern eine verbesserte Methode die JavaScript, DOM, CSS und XML oder PHP kombiniert, es wird quasi DHTML mit dem HTTPRequest-Objekt ergänzt. Das HTTPRequest-Objekt wurde 1999 als ActiveX-Objekt im IE implementiert und als solches bis IE6 beibehalten, in allen anderen Browsern wird es als 'native object' unterstützt, obwohl es kein W3C-Standard ist. Dieses Objekt wird mittels JavaScript erzeugt.
Einschränkungen
- JavaScript des Browsers muss eingeschaltet sein
- Ausführung von ActiveX-Objekten muss erlaubt sein
- IE bis 6 muss besonders behandelt werden ActiveX-Objekt, erst IE 7 kennt auch HTTPRequest-Objekt
- Die "Zurück-Schaltfläche" macht nicht die AJAX-Veränderungen rückgängig
- Suchmaschinen können dynamisch zusammengestellte Inhalte nicht indexieren und Lesezeichen können nicht auf solche Zustände gesetzt werden
- Der Server darf nicht bereits überlastet sein, hohe CPU-Leistung und Arbeitsspeicher-Resourcen werden benötigt (je nach Grösse der JavaScript-Bibliothek)
- Wie für PHP und Co. ist ein Server als lokale Testumgebung notwendig
- ausführliche Dokumentationen lesen und lernen
Arbeitsablauf beim erstellen einer AJAX Anwendung
new XMLHttpRequest()
- Instanz von HTTPRequest-Objekt erstellen
- Konfiguration der Request-Parameter
- Definition einer Rückruf-Funktion (Callback bei Zustandsänderung im Request)
- asynchroner Aufruf einer Serverseite (PHP oder andere), Ausführung des Request und automatische Ausführung der Rückruf-Funktion (Empfang und Verarbeitung der Server-Antwort)
- Loop to 4.
Das HttpRequest-Objekt
function process()
// wird durch <body onload="process()"> ausgelöst
// 1. new
xmlHttp = new XMLHttpRequest(); // alle anderen Browser
xmlHttp = new ActiveXObject("MSXML2.XMLHTTP.6.0"); // IE bis 6
// 2. open()
// mit GET (POST oder PUT), Was soll geöffnet werden, true für asynchron, es können auch noch userName und password übergeben werden
xmlHttp.open("GET", "async.txt", true);
// 3. onreadystatechange
xmlHttp.onreadystatechange = handleRequestStateChange; // automatischer Aufruf der callback funktion
// readyState
// es gibt 5 Stadien: 0=uninitialised, 1=loading, 2=loaded, 3=interactive, 4=complete
// 4. send()
xmlHttp.send(null);
// 5. function handleRequestStateChange()
// responseText -Antwort als String, responseXML -Antwort als XML Dokument
// abort(), getResponseHeader(headerLabel"), getAllResponseHeaders(),
// Status -Statuscode, statusText -Statusmeldung
// 6. setTimeout, setInterval, clearTimeout, clearInterval
Frameworks - erfinde das Rad nicht neu
Frameworks und Widgets sind vorgefertigte Programmier-Funktionen und -Routinen inkl. Objekten und Variablen etc. die als JavaScript-Datei eingebunden in den Seiten-Heads geladen werden.
Bekannte Frameworks heissen Prototype (riesig), Dojo (mit Widget für den Zurück-Knopf),
Script.aculo.us (sitzt auf Prototype auf und erweitert diese) oder moo.fx (mad4milk ist eine abgespeckte Version von Prototype).
Schon bisher konnte man auf solche JavaScript-Bibliotheken (goLive oder Dreamweaver) zurückgreiffen,
aber AYAX-Funktionalität gibt es erst seit 2005.
Anwendungsbeispiele
Rasmus, das einfachste Ajax
Rasmus (Ajax kurz und bündig erklärt!)
Cristian Darie
Asynchron (Zeigt die 5 readyState)
XML in Ajax (Zugriff auf XML-Datei)
Ralph Steyer
Suggest (Suchformular macht Vorschläge beim Tippen)
http://script.aculo.us
Zip entpacken und Dateien in Ordner legen. Verkürzte Javascriptanweisungen lernen.
(Pardon, Beispiele sind in Arbeit ...)
Check den Code.