© 2006 Tim Baumgarten
Ajax setzt sich aus mehreren Bestandteilen zusammen, die im Zusammenspiel Funktionen ermöglichen die man in einfachen Internetseiten vorher nicht kannte.
Dabei handelt es sich um folgende schon länger eingesetzte Basistechnologien:
Im folgenden sollen diese Bestandteile relativ kurz und für sich erläutert werden.
JavaScript ist eine ist eine objektbasierte Skriptsprache, die als Ergänzung zu HTML entwickelt wurde. Skripte bzw. Anweisungsfolgen werden in (X)HTML-Dokumente eingebunden und dann vom Browser interpretiert bzw. ausgeführt. JavaScript hat dabei neben einer Grundbibliothek nicht nur Zugriff auf das dargestellte Dokument sondern auch auf bestimmte Browsereigenschaften und -funktionen. Durch die Ereignissbehandlung wird es außerdem möglich in die Abläufe des Browsers einzugreifen.
Die Firma Netscape veröffentlichte 1995 die erste Version, damals noch unter dem Namen LiveScript und entwickelte diese in den folgenden Jahren ständig weiter. Ziel war es einfache Arbeiten bereits im Browser anstatt erst auf dem Server auszuführen. Beispielsweise sollte es ermöglicht werden Formulareingaben vor dem Absenden bereits im Client zu überprüfen.
Bereits 2 Monate später wurde die Sprache aus Marketinggründen in JavaScript umbenannt und die Syntax stark an Java angelehnt. Ziel war es vom Hype um die Java-Applets zu profitieren.
In den folgenden Jahren wurde ständig weitere Funktionalität hinzugefügt und in immer mehr Browsern JavaScript-Unterstützung eingebaut. Die schnelle und ständige Weiterentwicklung hat dazu geführt, dass die gebotenen Möglichkeiten ("Dynamic HTML") schon nach ein paar Jahren weit über die einfachen Formularprüfungen der Anfangszeit hinaus gingen und JavaScript als clientseitige Skriptsprache nicht mehr wegzudenken ist.
Einen schlechten Ruf hat JavaScript vor allem durch "Nervereien" die häufig auf Webseiten zu finden sind, dazu gehören zum Beispiel das Überschreiben der Informationen in der Statusleiste, das Deaktivieren der rechten Maustaste oder die Abänderung der Fenstergröße oder -position des Browsers. Dies spielt aber in Zeiten von Web2.0 in denen der Nutzer im Vordergrund steht, weit weniger eine Rolle, sodass JavaScript aufgrund anderer Fähigkeiten wieder positiver wahrgenommen wird.
prototype
dem ein anderes Objekt zugewiesen werden kann. Das Objekt "erbt" durch diese
Zuweisung alle Felder und Methoden des zugewiesenen Objekts.
string,
number, boolean und undefined,
alle anderen Typen sind Objekte und basieren auf Object.
ifif ... elseswitch ... casewhiledo ... whileforfor ... intry ... catchtry ... catch ... finally
Typischerweise werden längere JavaScript Blöcke wie z.B. Funktionen mit dem
<script>-Tag im <head>-Bereich
eines HTML-Dokuments angegeben und so mit dem Dokument verknüpft. So kann
entweder eine externe Datei laden, oder die Anweisungen direkt angeben.
<html><head>
<!-- Externe Datei -->
<script type="text/JavaScript" src="jquery.js"></script>
<!-- Direkte Angabe -->
<script type="text/JavaScript">
function stringReverse (str)
{
var s = typeof this.valueOf() == 'string' ? this : str;
var r = '';
for (var i = s.length - 1; i >= 0; i--)
r += s.charAt(i);
return r;
}
String.prototype.reverse = stringReverse;
function Manipulate()
{
var textelem = document.getElementById('javascriptdemo').firstChild;
textelem.nodeValue = textelem.nodeValue.reverse();
}
</script>
</head><body>
<a href="javascript:Manipulate(); void 0;">Manipulation durchführen</a>
</body><html>
Test Eins Zwei Drei.
Desweiteren ist es möglich, mit dem "JavaScript:"-Prefix, kurze
Anweisung direkt in einem Tag anzugeben bzw. einem Eventhandler zuzuweisen.
Beispieltag (Link): http://www.fh-wedel.de/~si
<a onclick="javascript:confirm('Wirklich zu dieser Seite wechseln?');" href="http://www.fh-wedel.de/~si">http://www.fh-wedel.de/~si</a>
JavaScript wird in einer "Sandbox" innerhalb des Browsers ausgeführt, um zu verhindern dass JavaScript auf Systemresourcen oder andere Browserinstanzen zugreifen kann. Nach unzähligen Bugs in dieser Sandbox in verschiedenen Browsern gilt das Prinzip mittlerweile als sicher. Zudem lässt sich JavaScript in allen Browsern auch komplett deaktivieren.
Die Hauptarbeit jeder Ajaxanwendung leistet das sogenannte XMLHttpRequest-Objekt (im folgenden XHR genannt), welches es dem Aufrufer ermöglicht über das HTTP mit einem Webserver Daten auszutauschen. Ein wesentlicher Aspekt ist dabei die Möglichkeit die Anfrage an den Webserver asynchron abzusetzen und über Events benachrichtigt zu werden wenn sich der Status der Anfrage ändert.
XHR wurde ursprünglich von Microsoft entwickelt und steht dem IE seit 1999 mit der Version 5.0 unter dem Namen XMLHTTP als ActiveX Control zur Verfügung. Seinen Namen hat XMLHTTP dabei mehr oder weniger dem Zufall zu verdanken, bei der Entwicklung ging es nämlich allein um die HTTP-Übertragung. Da aber XMLHTTP erst kurz vor der Veröffentlichung des Internet Explorer 5.0 entstand, bestand die einzige Möglichkeit den IE noch zu erweitern darin den Code in der MSXML Bibliothek unterzubringen. Außerdem war es mit dem Hype den es 1999 um XML gab nicht gerade hinderlich XML im Namen zu haben. (Näheres dazu findet man hier.)
Die erste Anwendung von XHR war dann mit "Exchange 2000" auch ein Microsoft Produkt, welches aus heutiger Sicht die erste Ajax-Anwendung darstellt. Danach dauerte es einige Jahre bis auch andere Browser die gleiche Funktionalität integrierten, beispielsweise brachte Mozilla 1.0 im Jahr 2002 erstmalig XHR-Unterstützung mit. Mittlerweile wird XHR aber von allen gängigen Browser unterstützt.
Wie bei fast allen Browsertechnologien gibt es auch bei XHR Unterschiede in verschiedenen Browsern. Der wohl größte Unterschied liegt im Instanzieren eines XMLHttpRequest-Objektes. Opera und Firefox bieten XHR als natives JavaScript Object an, der Aufruf
var xmlHttp = new XMLHttpRequest();genügt. Erst im IE 7.0 gibt es XHR ebenfalls als natives Objekt, in älteren Version muss der Weg über ein ActiveX Objekt gegangen werden.
var xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
Während schon die Instanzierung mit einer Browserweiche beginnt, gibt es noch weitere Unterschiede in den jeweiligen Implementierungen. Dennoch ist mit Hilfe diverser Frameworks und Bibliotheken die Arbeit mit XHR im Allgemeinen sehr komfortabel zu handhaben, nicht nur was Browserunterschiede angeht.
Wenn vom Nutzer unbemerkt Daten von einem Server übertragen werden können, stellt sich natürlich auch die Frage nach der Sicherheit. Das bei XHR benutzte Sicherheitskonzept ist die sogenannten "Same Origin Policy". XHR darf damit nur auf Resourcen mit gleichem Ursprung zugreifen: Protokoll, Domainname und Port müssen übereinstimmen.
Das sogenannte Document Object Model ist heute ein zentraler Bestandteil von JavaScript, da es eine einheitliche Schnittstelle festlegt um auf die strukturierten Daten in (X)HTML- und XML-Dokumenten zugreifen zu können. DOM bildet das Dokument in einer Baumstruktur ab und definiert Zugriffsmethoden für einzelne Elemente und deren Attribute.
Teile der Baumstruktur dieser Seite:
DOM erweitert JavaScript um einige neue Objekte
Der Zugriff über das DOM ist zwar in allen Browsern gleich, in den meisten
Fällen ist die Arbeit mit den Zugriffsfunktionen jedoch langwierig und
unkomfortabel. Die einzige Möglichkeit direkt auf ein Element zuzugreifen
bietet die Funktion document.getElementById(), außerdem gibt es
die Möglichkeit Elemente über ihr HTML-Tag abzufragen document.getElementsByTagName().
Alles weitere muss über die Eigenschaften und Methoden der Elementknoten erfolgen, einige sind im Folgenden aufgelistet:
function AddContent()
{
var element = document.getElementById('dombeispiel');
var ielem = document.createElement('i');
ielem.appendChild(document.createTextNode('und'));
var strongelem = document.createElement('strong');
strongelem.appendChild(document.createTextNode('Text '));
strongelem.appendChild(ielem);
strongelem.appendChild(document.createTextNode(' Text'));
element.appendChild(strongelem);
}
Diese Zugangsmöglichkeiten sind zwar umfassend aber umständlich in der Benutzung.
Eine Form der Erleichterung bietet hier die nicht standardkonforme Eigenschaft
innerHTML, die beliebigen HTML-Code aufnehmen kann und dem
Element als Kindknoten hinzufügt. Allerdings funktioniert dies vor allem im
IE nicht immer z.B. bei Tabellen.
function AddContent2()
{
var element = document.getElementById('dombeispiel2');
element.innerHTML += '<strong>Text <i>und</i> Text</strong>';
}
Die häufigste Aufgabe ist es bestimmte Elemente zu finden mit denen gearbeitet werden soll. Da für den Direktzugriff nur die getElementById()-Funktion zur Verfügung steht, sieht man häufig mit id's übersähte HTML-Dokumente. Sinnvoll ist diese Ansatz aber nicht, z.B. dann wenn mehrere Elemente auf die gleiche Art und Weise behandelt werden sollen.
Antworten bieten hier einige Frameworks (z.B. jQuery) die durch Integration von CSS-Selektoren oder XPath das Finden von Elemente sehr einfach und flexibel machen.Damit via XHR übertragende Daten auf der Clientseite weiterverarbeitet werden können, müssen diese vor der Übertragung in ein definiertes Format gebracht worden sein. Zwar steht das X in Ajax (und XHR) für XML, trotzdem lassen sich beliebige textbasierte Formate einsetzen.
Die verbreitesten Alternativen sind im folgenden aufgelistet.
XML ist ein Regelsatz zur Erstellung von textbasierenden Dokumenten in denen strukturierter Daten gespeichert werden können. Solche XML Dokumente können sowohl von Maschinen als auch von Menschen verstanden werden kann.
Ein Beispieldatensatz:
<?xml version="1.0" encoding="utf-8" ?>
<mitarbeiter>
<person>
<art><![CDATA[Dozenten]]></art>
<nachname><![CDATA[Schmidt]]></nachname>
<url><![CDATA[http://www.fh-wedel.de/~si]]></url>
<vorname><![CDATA[Uwe]]></vorname>
<titel><![CDATA[Prof. Dr.]]></titel>
<email><![CDATA[si]]></email>
<telefon><![CDATA[04103 - 80 48 - 45]]></telefon>
<fax><![CDATA[04103 - 80 48 - 91045]]></fax>
<raum><![CDATA[N19]]></raum>
</person>
</mitarbeiter>
Auf den ersten Blick scheint XML als Übertragungsformat die erste Wahl zu sein, schließlich wurde es genau für diesen Zweck entwickelt. Doch die Strukturierung und Lesbarkeitaspekte haben ihren Preis, wenn das Ziel wie bei Ajax eine möglichst schnelle Übertragung und Verarbeitung ist.
Nachteile von XML beim Einsatz mit Ajax:
Exemplarische Methodenaufrufe bei der Vearbeitung:
(01) var mitarbeiterxml = originalRequest.responseXML.getElementsByTagName("mitarbeiter")[0].childNodes;
(09) var value = personxml[j].firstChild.nodeValue;
(11) persondata[personxml[j].nodeName] = value;
Bei JSON handelt es sich um eine Untermenge von JavaScript, Daten werden in JavaScript Syntax dargestellt, die direkt ohne sonstige Verarbeitung von einem JavaScript Interpretierer ausgewertet/geparst werden kann.
Ein Beispieldatensatz:
[{"art":"Dozenten","nachname":"Schmidt","url":"http:\/\/www.fh-wedel.de\/~si","vorname":"Uwe","titel":"Prof. Dr.","email":"si","telefon":"04103 - 80 48 - 45","fax":"04103 - 80 48 - 91045","raum":"N19"}]
Mit JSON hat sich ein Format gefunden das die Schwachstellen von XML
vermeidet und sich daher für die Verwendung mit Ajax besser eignet.
Im Vergleich zu XML können mit JSON Daten viel kompakter repräsentiert werden
und gleichzeitig viel komfortabler verarbeitet werden, ein einziger
eval(jsondaten) Aufruf reicht aus.
JSON hat aber noch weitere Vorteile, es können nicht nur Daten übertragen werden sondern gleich ganze vom Server erstellte Funktionen die auf dem Client ausgeführt werden. Mit dem X-JSON Header in der Server-Response gibt es auch einige Möglichkeit mit einem einzigen Aufruf Anweisungen und Daten komplett getrennt an den Client zu übertragen.
JSON dürfte in Zukunft XML in Ajax-Anwendungen weitestgehend verdrängen.
Ein älteres, simples Format zur Speicherung und Übertraung einfach strukturierter (nicht verschachtelter) Daten, dass wegen seiner Einfachheit immernoch häufig eingesetzt wird.
Da es keinen Standard für CSV Dateien gibt, sind verschiedenste Ausprägungen anzutreffen. Diese unterscheiden sich in den Trennzeichen und darin ob einzelne Werte von Anführungszeichen umschlossen werden oder nicht. Am gebräuchlichsten ist der folgende Aufbau:
Ein Beispieldatensatz: "Dozenten";"Schmidt";"http://www.fh-wedel.de/~si";"Uwe";"Prof. Dr.";"si";"04103 - 80 48 - 45";"04103 - 80 48 - 91045";"N19"
Die Verarbeitung basiert auf einfachen Stringoperationen, in JavaScript
z.B. die String.split() Methode. Zuerst wird der gesamte String in einzelne
Zeilen bzw. Datensätze aufgetrennt, beispielsweise mit csvdata.split("\r\n").
Pro Zeile müssen dann zuerst die Anführungszeichen am Anfang und am Ende
entfernt werden, um anschließend die Zeile in Werte aufzutrennen,
z.b. mit line.split("\";\"").
Die Daten die sich mit CSV gut abbilden lassen sind beschränkt, das Format ist unflexibel wenn mal Werte fehlen sollten und schwieriger zu verarbeiten als JSON. In den meisten Fällen sollte man deshalb JSON vorziehen.
Da (X)HTML auch ein Textformat ist, kann man natürlich auch den zu ersetzenden Inhalt direkt in Form des fertigen HTML-Codes schicken. Für weniger komplexe Fälle ist dies auch tatsächlich die einfachste und womöglich schnellste Möglichkeit mit Ajax zu arbeiten.
Die Verarbeitung umgeht die üblichen DOM-Zugriffsfunktionen
und arbeitet mit der innerHTML-Eigenschaft eines Elementes. So ist es z.B.
möglich den Inhalt eines div-Elements durch eine einzeige Zuweisung auszutauschen:
divelement.innerHTML = ajaxresponse;
Auf Hindernisse bei diesem Ansatz stößt man allerdings bei bestimmten Browsern wie z.B. dem IE, der es beispielsweise nicht erlaubt den Inhalt einer existierenden Tabelle zu ändern. Die innerHTML-Eigenschaft ist bei Tabellen im IE grundsätzlich read-only. Zudem ist innerHTML nicht standardisiert.