04.06.2006, 14:14
![[Bild: ajax-logo.jpg]](http://www.ajax.org/_images/ajax-logo.jpg){kind=logo}
Hallo !
Ich habe mich jetzt in die AJAX - Technik eingelesen und verstanden wie diese funktioniert. Da dies sehr praktisch für Webdesigner ist, versuche ich hier einen kleinen Einblick in AJAX zu geben.
Im Internet gibt es eine Vielzahl von Tutorial zu AJAX. Ich versuche hier das wichtigste herauszufiltern und verständlich wiederzugeben.
1: Was ist AJAX?
AJAX steht für Asynchronous Javascript And XML. Frei übersetzt bedeutet das soviel wie: Aktuallisieren mit Javascript und XML.
AJAX ist keine neue Technologie wie PHP oder so, AJAX ist eine Mischung aus verschiedenen bekannten Techniken.
- HTML
- XML
- CSS
- JavaScript
- Document Object Model
- XHTML
- XSLT
- XMLHttpRequest Objekt
AJAX wird mittlerweile von bekannten Internet-Firmen genutzt.
Beispiele:
- Google Mail
- Google Suggest
- Google Calendar
- Google Earth
2: Wozu brauche ich AJAX?
Nehmen wir einmal an wir haben eine HTML-Seite. Diese Seite beinhaltet
- Logo
- Navigationsleiste
- Zugriffscounter
- ...
Ohne AJAX: Der User fordert die veränderte Datei an. Die Anfrage wird an den Webserver weitergeleitet. Darauf parst dieser die Webseite neu und sendet die ganze Seite (0.5 MB) an den Client zurück. Der Client (User) muss nun die ganzen 0,5 MB runterladen, nur um die Seite aktuell zu sehen.
Nachteil:
- Hoher Servertraffic
- Trafficbelastung für den User sehr hoch
- Modemuser deutlich im Nachteil
- lange Ladezeit
Vorteil:
- Deutlich weniger Traffic
- Modemunser sind nicht langen Wartezeiten ausgesetzt
- schnellere Ladezeiten
Zusammenfassung:
Sie sehen also den Vorteil von AJAX. Jedoch hat AJAX nicht nur Vorteile. Ein Nachteil ist, dass AJAX nur funktioniert, wenn JavaScript vom Browser her erlaubt ist. (Dafür ist jedoch kein Zusatzplugin nötig)
Ein weiterer Nachteil ist, dass es Probleme gibt, wenn der User den ZURÜCK-Button drückt. Aber dazu später mehr.
3.1: Der Aufbau von AJAX
Da wir jetzt wissen, wofür wir AJAX brauchen, interessiert uns jetzt wie man so was realisieren kann. Dies lässt sich mit einer Situation des echten Lebens vergleiche.
Folgende Situation: Ihr sitzt am Esstisch und braucht noch etwas Ketchup, damit die Pommes besser schmecken. Leider steht das Ketchup am anderen Ende des Tisches. Da der Mensch von Natur aus faul ist wollen wir nicht aufstehen und wollen, dass der Mitesser am anderen Ende des Tisches die Flasche rüberreicht.
Damit die andere Person uns die Flasche gibt, müssen wir danach fragen. (Es sei den der andere kann Gedanken lesen
)AJAX: Wenn wir jetzt die andere Person durch einen Webserver ersetzen und und als Browser sehen, herscht genau die gleiche Situation wie bei AJAX. Der Webserver kann uns nicht etwas bereitstellen (parsen), wenn wir nicht danach fragen.
Echtes Leben: Wenn wir jetzt beim Tisch sagen:"Gib mal bitte her", dann weiß der andere nicht was er geben soll. Er wüsste uns alles, was auf dem Tisch steht geben. Das wollen wir aber nicht, wir wollen nur die Flasche. Also müssen wir nur nach der Flasche fragen.
AJAX: Da wir vom Webserver nicht alles auf einmal haben wollen, müssen wir nur nach einem Teil fragen. Das ist dann AJAX.
Dieses Nachfragen machen wir mit einem XMLHttpRequest.
Comming soon...
Sam Fisher
