Tutorial 7: Einführung in Ajax Was ist Ajax? Ajax ist die Abkürzung für:

• Asynchronous • JavaScript • And • XML

Der Ausdruck wurde von Jesse James Garrett geprägt. Ajax bezeichnet ein Konzept der asynchronen Datenübertragung zwischen einem Server und dem Browser. Es ermöglicht innerhalb einer HTML-Seite eine HTTP-Anfrage (HTTP-Request) durchzuführen, ohne dabei die komplette Seite neu laden zu müssen. Die benötigten Daten werden, je nach Bedarf, nachgeladen, somit ist Ajax eine Schlüsseltechnik zur Realisierung des Web 2.0. Ajax ist keine einzelne, sondern besteht aus mehreren Technologien. Folgende Basis-Technologien werden in Ajax-Anwendungen eingesetzt:

• (X)HTML und CSS • JavaScript – Herzstück des Codes für Ajax-Anwendungen • XMLHTTPRequest – Schnittstelle zum Datentransfer über HTTP-Protokoll • DHTML – Dynamisches HTML • DOM – Repräsentation von Daten bzw. Inhalten

Welche Browser unterstützen Ajax? Folgende Webbrowser sind in der Lage Ajax-Anwendungen auszuführen:

• Microsoft Internet Explorer (und IE-basierte Browser) ab Version 5.0 und höher • Mozilla Firefox (und Gecko-basierte Browser) ab Version 1.0 und höher • Opera ab Version 8.0 und höher • Apple Safari ab Version 1.2 und höher • Netscape ab Version 7.1 und höher • Konqueror ab Version 3.2 und höher

Welche Vorteile hat die Verwendung von Ajax?

• Zeitersparnis, es muss nicht immer die komplette Webseite neu geladen werden, sondern nur einzelne, benötigte Teile

• Ajax verwendet freie Web-Technologien und ist somit kostenlos • Große Nutzergruppe, Ajax wird von vielen Nutzern weiterentwickelt, dadurch wird der Einsatz

komfortabler und umfangreicher • Erhöhte Usability • Minderung der Serverlast • Im Gegensatz zu anderen Technologien, wie z.B. Shockwave oder Flash, kein zusätzliches

Browser-Plugin nötig Welche Nachteile hat die Verwendung von Ajax?

• Der „Zurück“-Button des Browsers funktioniert nicht mehr effektiv, da die dynamischen Ajax-Schritte nicht in der Historie des Browsers gespeichert werden

• Ajax basiert auf JavaScript, was bei manchen Browsern deaktiviert ist, JavaScript muss aktiviert sein, um die Funktionen zu nutzen

• Die Dynamik macht auch den Bookmarks zu schaffen - bestimmte Zustände können nicht als Bookmark abgespeichert werden

• Fehlende Feedbacks - man muss selbst in seine Anwendungen visuelle Feedbacks für Ladezeiten integrieren, um die Usability zu erhöhen

www.homepage.t-online.de 1

Ein Beispielprogramm – „Hello World“ Das folgende kleine und sehr vereinfachte Beispiel zeigt Ihnen Ajax im Einsatz. Was benötigen Sie dazu? Erstellen Sie sich mit einem Editor drei Dateien. Sie können hierzu den Standard Windows Editor, welchen Sie im Windows Startmenü unter Programme/Zubehör/Editor finden, verwenden. Erstellen Sie zuerst eine Textdatei, deren Inhalt aus einem „span-Tag“ besteht. Im Tag steht nichts weiter als „Hello World!“. Das ist der Satz, der später im Browser angezeigt werden soll. Speichern Sie diese Datei, in diesem Beispiel wird sie mit „newcontent.txt“ bezeichnet. <span>Hello World!</span>

Listing 1: Quelltext – newcontent.txt Die zweite Datei, die Sie erstellen, ist eine JavaScript-Datei. Verwenden Sie auch in diesem Fall einen Editor. Die JavaScript-Datei beinhaltet drei Funktionen. Die erste Funktion (createRequestObject) erzeugt nach der Abfrage, welcher Browser zum Einsatz kommt, eine Instanz der Klasse, die browserspezifisch die Funktionalität bietet, einen HTTP-Request an einen Server zu schicken. Die zweite Funktion löst die Ajax-Funktionalität getNewContent aus, die den Inhalt der erzeugten Textdatei newcontent.txt einliest. Mit der dritten und letzten Funktion updateNewContent wird das Ergebnis des XMLHTTPRequests überprüft. var http = createRequestObject(); function createRequestObject() { var objAjax; var browser = navigator.appName; if(browser == "Microsoft Internet Explorer"){ objAjax = new ActiveXObject("Microsoft.XMLHTTP"); }else{ objAjax = new XMLHttpRequest(); } return objAjax; } function getNewContent(){ http.open('get','newcontent.txt'); http.onreadystatechange = updateNewContent; http.send(null); return false; } function updateNewContent(){ if(http.readyState == 4){ document.getElementById('mySentence').innerHTML = http.responseText; } }

Listing 2: Quelltext – ajax.js Diese JavaScript-Datei wird in die zu erstellende HTML-Datei (default.htm) eingebunden, die Sie ebenfalls mit dem Editor erstellen. Der Aufruf erfolgt durch das „script-Tag“. Wenn Sie die folgende HTML-Datei im Browser starten, erhalten Sie eine Seite, die über einen Link verfügt. Wenn Sie diesen Link anklicken, wird der gesamte Inhalt durch den Inhalt der newcontent.txt ersetzt.

www.homepage.t-online.de 2

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html> <head> <title>Hello World introduction to Ajax</title> <script type="text/javascript" src="ajax.js"></script> </head> <body> <p id="mySentence"><a href="#" onclick="javascript:getNewContent();">Click here to update the page</a>. When you click the link, this content will be replaced.</p> </body> </html>

Listing 3: Quelltext – default.htm Die Startseite hat den im Screenshot angezeigten Inhalt. Durch Anklicken des Links wird die Funktion getNewContent aktiviert.

Abbildung 1: Screenshot – Ajax – Startseite Der Inhalt der Startseite wird ersetzt, indem die Informationen aus der Textdatei newcontent.txt nachgeladen werden. Auf der folgenden Seite wird dann „Hello World!“ angezeigt.

Abbildung 2: Screenshot – Ajax – Inhalt ersetzt

www.homepage.t-online.de 3

Quellen zum Nachlesen und Nachschlagen: Ressourcen im Internet

• Das Buch „JavaScript und AJAX“ von Christian Wenz steht Ihnen unter: http://www.galileocomputing.de/openbook/javascript_ajax/ als eBook und als Download zur Verfügung

• Auf http://www.oreilly.de/topics/ajax_about.html findet man eine Einführung zu Ajax und eine

kommentierte Linkliste zu weiteren Seiten zu diesem Thema • Unter http://de.wikipedia.org/wiki/Ajax_(Programmierung) finden Sie eine Einleitung zu Ajax

inklusive Hintergrundinformationen über die Entstehung

• Die Liste der Webseiten, die eine Einführung in Ajax bieten, ist lang, hier ist eine kleine Auswahl daraus:

o http://ajax.frozenfox.at/ o http://developer.mozilla.org/de/docs/AJAX:Getting_Started o http://webdesignblog.de/uncategorized/ajax-einfuhrung/ o http://www.admin-wissen.de/tutorials/eigene-tutorials/webentwicklung/ajax-tutorial/

• Auf der Seite: http://www.ajax-community.de/ kann mit anderen Usern über das Thema Ajax

diskutiert und Erfahrungen können ausgetauscht werden

• Eine Liste mit weiteren Seiten rund um das Thema Ajax finden Sie hier: http://www.drweb.de/weblog/weblog/?p=454 oder unter http://www.drweb.de/programmierung/ajax-tutorials.shtml

• Hier finden Sie das „Hello World“ Beispiel aus diesem Tutorial, die Seite ist in englischer

Sprache: http://www.openhosting.co.uk/articles/webdev/5899/

• Eine JavaScript Bibliothek mit deren Hilfe man Ajax-Funktionalität in eine Webseite einbinden kann, die Seite ist in englischer Sprache: http://jquery.com/

www.homepage.t-online.de 4