Ajax - Aufbau und Ablauf

0 | 23984 Aufrufe
Sie können diese Wikiseite nach der Anmeldung auf Webmasterpro bearbeiten. Helfen Sie mit und verbessern Sie "Ajax - Aufbau und Ablauf" mit Ihrem Wissen!

Anzeige Hier werben

Unterschied: klassische und Ajax-Webanwendungen

Klassische Web-Anwendungen benötigen für jede Änderung oder Aktion des Benutzers ein komplettes Neuladen der Webseite, es muss also eine HTTP-Verbindung zum Server aufgebaut werden, welcher dann die neuen, aktualisierten Daten zurück an den Browser schickt. Die Grafik unterhalb verdeutlicht dieses Verhalten:

Bild zu Ajax - Aufbau und Ablauf
Normale HTTP-Anfrage

Setzt man für die gleiche Anwendung Ajax ein, wird nur noch ein kleiner Teil der Webseite neu geladen. Mit dem Anklicken des "Hinzufügen-Buttons" aus unserem Beispiel, baut auch die Ajax-Version eine Verbindung mittels JavaScript zum Webserver auf. Auch die Antwort des Webservers kann dann im Javascript ausgewertet werden und somit nur ein Teil der Webseite aktualisiert werden. Deswegen muss die Webseite nicht mehr komplett neu geladen werden.

Die Ajax-Anfrage ist hierbei ein normaler HTTP-Request, der große Vorteil gegenüber dem klassischen Neuladen der Seite liegt aber darin, dass die übertragenen Daten geringer sind, da nur Änderungen übertragen werden müssen.

Bild zu Ajax - Aufbau und Ablauf
HTTP-Anfrage mithilfe von Ajax

Ajax ist Dynamik

Durch die Möglichkeit von Ajax immer nur bestimmte Teile einer Webanwendung oder Webseite nachzuladen, werden Anwendungen deutlich dynamischer und lassen sich schneller handhaben. Daher empfinden Besucher Webseiten die AJAX-Technologien einsetzen oft als schneller und dynamischer. Zusätzlich vermitteln sie oft das Gefühl, als ob die Anwendung vollständig auf dem Rechner des Anwenders laufen würden.

Ajax Webtechnologien

AJAX selbst basiert auf vielen bestehenden Webtechnologien.

  • (X)HTML - Auszeichnungssprache für Webseite
  • CSS - Zur Formatierung vom HTML
  • JavaScript - Grundlage der Interaktion, Darstellung von Daten, Zur Arbeit mit dem DOM
  • DOM (Document Object Model) - Objektorientierter Zugriff auf Struktur der Webseite
  • XMLHttpRequest-Objekt - Zentrales Objekt für AJAX, benötigt um Anfragen an den Webserver zu stellen
  • XML - Standardisierte Datenstruktur, das "X" in AJAX

Außerdem lässt sich AJAX in Verbindung mit vielen bestehenden Technologien einsetzen.

  • Übliche Scriptsprachen im Web, wie:
    • PHP - Dynamische Programmiersprache (Erzeugung von JSON-Objekten, Datenbank-Zugriffe, etc.)
    • Python
    • Perl
    • Java
    • etc.
  • XSLT - Zur Fomatierung von XML-Antworten
  • SOAP/XML-RPC

Neben den grundlegenden Techniken sind auch neue Technologien hinzukommen, die wichtigsten dabei sind:

  • JSON - alternative Struktur/Schreibweise für Datenübertragung vom/zum Webserver

Wikiseite bearbeiten

Diese Seite kann von jedem registrierten Benutzer bearbeitet werden. Bisher haben 5 Personen an der Seite "Ajax - Aufbau und Ablauf" mitgewirkt.

Sie haben einen Fehler entdeckt oder möchten etwas ergänzen? Dann können Sie nach der Anmeldung "Ajax - Aufbau und Ablauf" hier bearbeiten.

Mitarbeiter
  • Meine Schwerpunkte liegen im Bereich Grafikdesign, SEO und Management. Seit sieben Jahren bin ich als Geschäftsführer der Team23 GbR tätig, die Webdesign in Augsburg anbietet, sowie Webmasterpro.de betreut.
  • Kinderturnen - Sport Spiele für Kinder
  • David Danier arbeitet seit mehr als neun Jahren im Bereich Web Programmierung und ist unter anderem Geschäftsführer der Webagentur Team23 sowie Webmasterpro.de.
  • Als Student (Master of Computer Science) und Diplom-Oecotrophologe(FH) beschäftige ich mich mit Sport, Ernährung und dem Internet - hier insbesondere mit Blogs, CSS, PHP, SEO, WordPress, XHTML. Zur Finanzierung meines Studiums suche ich nach Arbeit rund ums Thema 'Websites'. Website: Jochen Bauer
  • Student der Biochemie und seit einigen Jahren im Hobby-Entwicklerbereich tätig. Stärken in XHTML/CSS und PHP, alles was mit Grafik zu tun hat, gehört nicht dazu.