Einführung in AJAX - Tutorial

[Sam Fisher]

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
• ...
  

Diese Seite ist mit Bildern 0,5 MB groß. (Das ist sehr viel, aber es veranschaulicht AJAX besser) Jetzt soll auf dieser Seite nur ein kleiner Teil geändert werden.
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
  

Mit AJAX: Der User ändert etwas an der Homepage(Beispiel: E-Mail Adresse. Jetzt soll die Aktuelle Mail Adresse fix eingetragen in der Info-Box stehen). Dank AJAX wird jetzt nicht die ganze Seite wie oben beschrieben neu geladen, sondern nur die Info-Box. Diese hat möglicherweiße nur ein paar Zeilen anstatt 0,5 MB.

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

[e-phy]

Zunächst einmal danke das du dich bereit erklärt hast, hier ein wenig zu AJAX zu sagen und entsprechend diese Informationen zusammenzutragen.
Ich habe bereits ein paar Änderungen in deiner Formatierung vorgenommen, da du die Angewohnheit hast, immer massig überflüssige Zeilenumbrüche einzubaun. Weniger ist übersichtlicher

[Sam Fisher]

Danke für die Formatierungsausbesserungen. Ich weiß, dass ich öfters zu viele Umbrüche mache.

Mein Tutorial ist noch keineswegs fertig, aber es wächst. Ich hoffe, dass ihr verständnis habt, dass ich nicht alles auf einmal schreiben kann. Des weiteren hoffe ich, dass ihr mit den Stil des Tutorials zufrieden seid. Ich habe versucht es leicht verständlich zu erklären. (Komplizierte Tutorials gibt es genug)


Geplannt habe ich noch:

Beispiele für AJAX
Veranschaulichung der technik
...



Gruß

Sam

[~Christian]

Ich hab mal nen Einwand:

Zitat:Nachteil:

* Hoher Servertraffic
* Trafficbelastung für den User sehr hoch
* Modemuser deutlich im Nachteil
* lange Ladezeit

Die genannten Punkte laufen ja alle fast aufs selbe hinaus. Ich behaupte, um den Problemen aus dem Weg zu gegen braucht man kein Ajax. Außerdem behaupte ich, dass diesen Punkten

Zitat:# Deutlich weniger Traffic
# Modemunser sind nicht langen Wartezeiten ausgesetzt
# schnellere Ladezeiten

auch ohne Ajax gerecht werden kann. Wie wäre es mit einem simplen Caching System mit PHP ?

== Ist natürlich ein dummer Vergleich, aber ich glaube wir haben die Vorteile von Ajax noch nicht ganz auf den Punkt gebracht.

Dennoch dir erst einmal vielen Dank für deine Mühen Sam Fisher, nur so kann etwas in gang rollen. Ist ja auch ganz informativ was du so getippt hast.

[Sam Fisher]

Hallo !

Du hat recht, da muss ich wohl noch etwas in die Veinheiten gehen. Aber ich habe das deshalb so einfach gemacht, da es sonst zu kompliziert wird.

Aber du hast recht, ein bischen genauer schadet nicht.


Ich schrieb ja:

Zitat:// FEEDBACK ist immer willkommen.

Deshalb bin ich dir dankbar, dass du was gesagt hast.


THX

Sam

PS: Bin mit dem erklähren des Request schon fast fertig. Comming soon

[Sam Fisher]

Neuer Teil zum Tutorial hinzugefügt ^^

Sam

[~Christian]

Genau dieser XMLHttpRequest interessiert mich. Ich weis nicht wie das geht.

Es muss doch möglich sein, einen Div-Container per Button klick zu aktualisieren. Code mir mal einer das passende Script bitte

[Sam Fisher]

greg schrieb:Genau dieser XMLHttpRequest interessiert mich. Ich weis nicht wie das geht.

Es muss doch möglich sein, einen Div-Container per Button klick zu aktualisieren. Code mir mal einer das passende Script bitte

Das mit den div-Container per klick reloaden ist genau der richtige Fall für AJAX, wart noch ein bischen und es steht im Tutorial.

Da das etwas Komplexer ist, versuche ich das so einfach wie möglich wiederzugeben.

Könnte noch ein paar Tage dauern.

Gruß

Sam

PS: Ich hoffe der Ketchup-Vergleich war gut.

[~Christian]

Zitat:Das mit den div-Container per klick reloaden ist genau der richtige Fall für AJAX

Jo, genau das ist mein Problem. Ich kann mir recht gut ausmalen was möglich ist, nur nicht wie man das macht

---

Ok habe hier was unheimlich praktisches gefunden was auf jeden Fall in ALLE meiner Seiten (die ich so pvt. mache) reinkommt.

http://www.cyberdummy.co.uk/test/dd.php

[Sam Fisher]

Hallo !

Wegen dem Code für dich, ne frage: Wie soll der Kontainer aktuallisiert werden?

Es gibt 2 möglichkeiten:

1. Alle x Sekunden
2. Beim Button klick
   

Bitte sage mir, wie du es willst, damit ich den Code richig fertigstellen kann.

Gruß

Sam