Ajax @ PS-Trainer

Ajax Live-Demo

●

Ihr Browser kann Ajax verwenden.
Live Demo-Daten mit Ajax anfordern:

Zeitaufwand:

Ajax-Anforderung ihres Browsers an den Server:

Die vom Server erhaltenen Rohdaten:

Verarbeitung der erhaltenen Daten

Das Javascript-Programm erhält vom Webserver die angeforderten (Roh)-Daten. Das Programm kann sinnvoll darauf reagieren. In diesem Beispiel durch eine einfache Aufbereitung und Ausgabe der Daten (rechts).

Muster der verarbeiteten Daten:

Oben werden die Ajax-Daten mit Klick auf eine der Tasten angefodert. In einer 'echten' Ajax-Anwendung wird die Anforderung meist durch andere → Ereignisse (Events) ausgelöst.

Typische Ajax-Anwendungen werden Zeit-gesteuert (z.B. alle 30 Sekunden) oder sie reagieren auf Maus-Bewegungen.

Beispiel: Bewegen sie den Mauszeiger über diesen Text !

Leider keine Ajax Live-Demo

● Ihr Browser darf Ajax nicht verwenden.

Die Live-Analyse ergab einen Fehler beim Versuch, ein "XMLHTTP"-Objekt zu erzeugen.

Da alle gängigen Browser Ajax technisch unterstützen, liegt die Ursache vermutlich in der Konfiguration ihres Browsers.

● Selbstverständlich können sie diese Webseite auch unter Verzicht auf die Ajax Live-Demo ansehen. Die gleiche Entscheidung müssen sie in diesem Fall jedoch für jede der immer zahlreicher werdenden interaktiven Webseiten treffen, die Ajax einsetzen.

Für eine Ajax Live Demonstration:
● Sie müssen die Verwendung von Javascript zulassen.

● ActiveX Code ist aus Rücksicht auf Microsoft in den meisten Ajax Programmen enthalten, wird jedoch nur von älteren M$IE-Browsern <7 verwendet. Alle modernen Browser kommen ohne ActiveX aus.

● In einigen Fällen müssen sie die Verwendung von Scripts auf dieser Webseite ausdrücklich zulassen. Alternative: Einen modernen und sicheren Browser verwenden (z.B. Chrome, Firefox, Opera, Safari, ...).

Ajax - Grundlagen und Schlagworte
AJAX ist die Abkürzung für Asynchronous Javascript And XML Das bedeutet soviel wie "Anforderung und Verarbeitung von XML-Daten im Hintergrund".	Asynchron ist top-aktuell, aber statt mit XML arbeiten heute die meisten Ajax-Anwendungen mit einfachem Text.
Ajax bietet u.a. diese Vorteile: Hintergrund-Arbeiten an Webseiten Verlagerung von Prozessor-Arbeit zum Client-PC Die Programmierung beider Anwendungen erfordert einige Erfahrung mit Javascript. AnfängerInnen sollten besser nur fertige Ajax-Programme verwenden.	Ajax ist ein Umweg für angeforderte Daten. Auch beim Anklicken eines Links werden Daten vom Webserver angefordert. Diese gelangen zu ihrem Browser, der daraus eine Webseite erzeugt und am Monitor anzeigt. Bei Ajax gelangen die Daten dagegen an ein Javascript-Programm. Das Programm kann intelligent auf die Daten reagieren, muss sich jedoch selbst umd die Anzeige allfälliger Ergebnisse kümmern.
Hintergrund-Arbeiten Javascript-Programme können per Ajax Daten anfordern, während die Webseite angesehen wird. Dabei entsteht keine merkbare Verzögerung, weil Javascript nicht auf die Daten wartet, sondern erst bei deren Eintreffen aktiv wird (asynchrones Verhalten). Polling Eine typische Anwendung ist die periodische Abfrage (Polling). Ein Javascript-Programm könnte beispielsweise alle 15 Sekunden neue aktuelle Daten von einem Ajax-Server anfordern. Es wäre unrentabel und störend, dazu jedesmal die ganze Webseite neu zu laden. • Mit Ajax werden rasch und unauffällig nur die Daten aktualisiert. • Ajax kann nur vom Client aktiviert werden, d.h. ohne Anfrage sendet der Server keine Daten. Bei dieser Methode werden ziemlich viele Anfragen an den (Web)-Server gestellt. Es ist daher wichtig, die zurückgesendeten Daten so knapp wie möglich abzufassen. Programme und Daten Bei Verwendung der → JSON-Syntax kann man mit Ajax nicht nur Daten sondern auch → Objekte inkl. der darin enthaltenen Programme (Methoden) übertragen.	Live-Daten zum Kontext Eine weitere Anwendung ist die interaktive Reaktion auf das BesucherInnen-Verhalten. Wenn sie z.B. einen bestimmten Teil der Webseite ansehen oder den Mauszeiger darüber stellen, dann können im Hintergrund genau zu diesem Thema Live-Daten angefordert werden. Diese Daten werden mit → DOM-Methoden auf der Webseite angezeigt. Als Verzögerung wird nur die Übertragungs-Zeit wirksam, die Arbeitrszeit von Javascript ist normalerweise unmerkbar kurz. Aktualisierung mit wenigen Live-Daten Hintergrund-Anfragen sind sinnvoll, wenn die geladene Webseite mit wenigen Daten aktualisiert wird. Der Schwerpunkt liegt daher bei Daten kleineren Umfangs, die sich relativ rasch ändern. Zur Anzeige der Daten auf der Webseite werden am besten → DOM-Methoden eingesetzt. Es ist nicht sehr klug, mit Ajax HTML-Code zu senden. Dazu sind → Innenrahmen (<iframe>-Elemente) wesentlich besser geeignet. Datenbank Die ersten großen Ajax-Anwender waren Google und Yahoo. Mit Ajax können sehr rasch (Teil)-Ergebnisse von Datenbank-Abfragen transportiert werden.
Verlagerung von Prozessor-Arbeit Die Attraktivität von Webseiten hängt stark von ihrer Lade-Zeit ab. Diese wiederum hängt stark von der Auslastung des Servers und von der Zeit für den Transport der Daten ab. ● Als Server werden zwar besonders schnelle PC eingesetzt, ihre Leistung wird jedoch auf alle BesucherInnen aufgeteilt - Das sind in der Regel einige 1000 (Rechnen sie mit allen BesucherInnen aller Seiten aus allen verwalteten Webs). ● Auf der anderen Seite sind typische Client-PC (von Webseiten - BesucherInnen) nur sehr wenig beschäftigt. Mehr als 90% der Leistung ist ungenutzt, während man z.B. auf das Laden einer Webseite wartet. ● Wenn es gelingt, möglichst viel Rechenleistung vom Webserver zu den vielen unterbeschäftigten Client-PC zu verlagern, kann man die Geschwindigkeit insgesamt bedeutend erhöhen. Davon profitieren alle BesucherInnen des Webservers, nicht nur jene von besonders aufwändigen (dynamischer) Webseiten.	● Man kann Ajax gezielt dazu verwenden, um die Last zu verteilen und den Durchsatz eines Webservers zu erhöhen. Dafür eignen sich viele dynamische Webseiten, und zwar umso mehr, je komplizierter ihre Erstellung ist. • Am Webserver bleibt nur ein stark verkleinertes Programm, welches die Rohdaten zur Verfügung stellt. Das bedeutet Spezialisierung auf den Kern der Aufgabe. • Das gesamte Programm zur Aufbereitung der Daten und Anzeige der Ergebnisse wird auf Javascript und damit auf den Client-PC verlagert. • Nach dem Laden der Webseite fordert ein Javascript-Programm die Daten an und kann danach sehr komplexe Arbeiten ausführen (z.B. Sortieren, Auswerten, Tabellen erzeugen ...). • Als besonderer Vorteil wird die Anfangs-Webseite viel schneller geladen und während der Verarbeitung der Daten bereits angezeigt. ● Ein interessanter Aspekt ist die Erzeugung von Produkten mit → XSL: Jeder Browser kann aus den Rohdaten selbst Elemente von Webseiten herstellen, z.B. Tabellen, → SVG-Objektgrafik usw. Diese Anwendung ist besonders schnell, da Rohdaten meist nur wenige Bytes benötigen, Tabellen jedoch typisch das 10fache, Grafik-Dateien das 1000fache Transport-Volumen.
Bedingung = Webserver Ajax sendet eine → HTTP-Anfrage (Request) an einen → Webserver, um von ihm Daten zu erhalten. Nur ein Webserver antwortet darauf. Ohne Webserver ist kein Ajax möglich. Webserver-PC im eigenen LAN Sie können Ajax zum Anlass nehmen, einen eigenen kleinen Server zu betreiben. Ein ausrangierter PC genügt meistens, dazu ein Standard Linux Paket (kostenlos aus dem Internet oder um einige € als DVD in fast jedem Linux Magazin). In jeder gängigen Linux-Distribution ist der professionelle → Apache Webserver enthalten. Damit funktioniert (nicht nur) Ajax am eigenen Server !	Webserver-Software am eigenen PC Webserver für den eigenen Arbeits-PC (für jedes gängige Betriebssystem) gibt es kostenlos im Internet. Am besten ist → Apache, es funktionieren aber auch viele andere Produkte. Damit funktioniert (nicht nur) Ajax am eigenen PC ! Webserver bei ihrem Provider Jeder Webspace-Provider betreibt einen Webserver. Das genügt bereits zur Anforderung einfacher (Text oder HTML) Dateien mit Ajax. Für eine sinnvolle Anwendung von Ajax sollte der Provider jedoch eine Programmiersprache (PHP) anbieten.
Zeit In der ↑ Live angezeigten Zeit wurden folgende Arbeiten ausgeführt: • Ajax-Anforderung wird an ihrem PC formuliert und an den Server gesendet. • Server startet das Empfangs- und Antwort-Programm. • Die erzeugten Daten werden zu ihrem PC geleitet. • Ihr Browser reagiert, z.B. durch eine Änderung der Webseite. - Vor allem dieser letzte Punkt läuft wesentlich rascher ab als der komplette Aufbau einer neuen Webseite !	Ajax macht nur deshalb überhaupt Sinn, weil diese Technologie wesentlich rascher funktioniert als das erneute Laden einer Webseite. ● Der Unterschied beim Transport der Daten ist gering (außer wenn die Webseite Bilder enthält). Man merkt davon jedoch viel weniger, weil die Webseite bereits angezeigt wird. ● Der Unterschied beim Aufbau der Seite (Rendering) durch den Browser ist ein großer Vorteil von Ajax.
Alternative iframe Wenn es darum geht, fertige HTML-Seiten in einer Art Wechsel-Rahmen anzuzeigen, dann ist die Anwendung von <iframe> Innen-Rahmen wesentlich effizienter als Ajax. Innen-Rahmen sind vor allem zum einfachen und raschen Austausch von Mini-Webseiten (auch von dynamischen Seiten) ideal geeignet. Die Technik kommt mit Standard HTML aus und erfordert kein Javascript. Damit können kleine wiederverwendbare Texte oder Tabellen bei Bedarf in beliebig viele andere Webseiten eingebettet werden. ♦ Details zu Innenrahmen	Alternative XML+XSL Wenn Daten bereits in → XML-Form vorliegen, dann werden sie am besten mit → XSL zur Anzeige gebracht. • Ein XSL-Text enthält Anweisungen (ein 'Programm'), um damit die XML-Daten in die gewünschte Form zu bringen, z.B. eine HTML-Tabelle oder eine → SVG-Grafik. Die Verarbeitung erfolgt durch die Client-PCs, entlastet daher den Webserver. Die Programmierung mit XSL erlaubt außerordentlich kompakte und vielseitige Programme zur Umwandlung von XML-Daten in alle möglichen Ausgabe-Formate. ♦ Details zu XML+XSL
Ajax als Paket-Bestandteil Eine steigende Anzahl neuerer Software-Pakete oder Schlagworte (Web 2.0) stützt sich zumindest teilweise auf Ajax. Besonders verlockend ist die Verwendbarkeit sämtlicher Browser ohne irgendwelche Plugins und die hohe Geschwindigkeit, mit der kleine Mengen von Daten im Hintergrund transportiert werden können.	Die Produkte bieten zusätzliche Funktionalität an, vorwiegend für schnelles interaktives Verhalten. Auch dafür gilt: Man muss nicht alles tun, was technisch möglich ist. Gute Lösungen nutzen die Vorteile einer Technologie und vermeiden es, alles in ein einziges Konzept zu zwängen.

Ajax - Sicherheit
Alle modernen Browser beschränken die Verwendung von Ajax-Befehlen auf den gleichen Server, von dem die Webseite stammt. Damit soll verhindert werden, dass ohne Wissen des Users im Hintergrund Daten von einem fremden Webserver bezogen werden.	Eine Ausnahme stellen M$IE Browser dar. Derzeit erlauben alle gängigen Versionen den Zugriff auf beliebige Webserver, bzw. ist dieser Zugriff mit Menü Extras \| Internetoptionen einfach zu konfigurieren.
Beispiel: Diese Webseite stammt vom Server ? Alle Webseiten des gleichen Servers können (zumindest unter dem Aspekt der Sicherheit) mit Ajax angefordert werden. Die Daten zum Live-Beispiel dieser Seite stammen vom gleichen Server und sollten daher (zumindest mit ihrer Zustimmung) erlaubt sein.	Webseiten von anderen Servern, z.B. Yahoo, Lycos, Google, ... fallen unter die Sicherheits-Sperre. Moderne Browser unterbinden Ajax-Anforderungen mit einer Fehlermeldung. M$IE-Browser reagieren je nach Konfiguration: Sie sperren den Zugang oder verlangen eine ausdrückliche Zustimmung.
Konsequenzen: Mit Ajax wäre es theoretisch möglich, beliebige Webseiten anzufordern und mit Javascript deren Inhalt zu "lesen". So könnte man unbemerkt Inhalte fremder Webseiten auf der eigenen Seite anzeigen. Das ist wegen der Sicherheits-Sperre nicht möglich - allerdings nur am eigenen PC.	Der gleiche Vorgang ist für Server-Programme (→ Perl, → PHP, ...) ohne Einschränkung möglich. Mit solchen Programmen können Webseiten, Mails usw. gelesen und ausgewertet werden. Der Inhalt oder ausgewählten Teilen davon können auf dynamischen Webseiten angezeigt werden.

Ajax Server
Bedingung = Webserver Ajax kann nur von einem Webserver Daten erhalten. Diese Voraussetzung gilt für jede Ajax Anwendung. Sehr einfache Webserver (oder billige Provider) können allerdings nur "statische" Dateien verwalten, d.h. jede Ajax-Anfrage mit dem gleichen Ziel liefert die gleichen Daten.	Webserver + PHP Standard Webserver können PHP- (und Perl)-Programme ausführen. In diesem Fall erweitern sich die Möglichkeiten bedeutend. Jede Ajax-Anfrage kann individuell bearbeitet werden. Das folgende Beispiel zeigt ein stark vereinfachtes Ajax Server Programm in der Programmiersprache → PHP.
Das Beispiel demonstriert, wie einfach es ist, einen Ajax Server (für Text-Daten) zu programmieren. Das → PHP-Programm erzeugt mit seinen Ausgabe-Befehlen einen Datenstrom, der an das Javascript-Programm des Empfängers gesendet wird. Zuerst werden allfällige Argumente decodiert - Hier das Argument zahl für die Variable $z) Danach werden die zu übergebenden Daten (hier $resultat) erzeugt. Die Ausgabe erfolgt mit einfachen print-Anweisungen. Es hat sich bewährt, die Daten zeilenweise auszugeben (Abschluss mit \n), das lässt sich auf Empfangs-Seite gut verarbeiten.	Modell eines Ajax Server Programms mit PHP, z.B. ajax.php <?php // Decodierung der erwarteten Argumente $z=0; if(isset($_GET["zahl"])) {$z=$_GET["zahl"];} // Verarbeitung $resultat = $z + 1; // Ausgabe der Daten print "daten=$resultat\n"; ?>
MIME-Type Man kann im HTTP-Header die → MIME-Type der zurückgesendeten Daten (z.B. text/plain) festlegen. Ohne diese Festlegung wird text/html verwendet - Das ändert normalerweise nichts an der Funktion.	header("Content-type: text/plain"); Wenn eine header-Anweisung verwendet wird, dann muss sie am Anfang des Programms stehen, vor der ersten Ausgabe-Funktion (print, echo).
Zeichensatz Als Zeichensatz wird ohne weitere Vereinbarung → Unicode in → UTF-8 Codierung angenommen. • Umlaute und Sonderzeichen werden daher beim Absenden sinnvoll UTF-8 codiert. • Die Verwendung nationaler, lokaler oder gar firmen-spezifischer Zeichensätze ist nicht ratsam. // Viele Grüße mit UTF-8: print "Viele Gr\xC3\xBC\xC3\x9Fe !\n"; ♣ Tipp: Gute Web-Editor Programme lassen sich (Stichwort Zeichensatz) auf UTF-8 einstellen.	JSON Ist ein Schlagwort für die Anwendung einer speziellen Variante der Standard Javascript-Syntax beim Transport von Daten oder Objekten. Als besondere Spezialität kann man mit JSON auch → Objekte und Methoden (Funktionen !) transportieren. Beispiel für JSON-formatierte Daten: 123,'Albert',23,34,'Berta','usw' ♦ Details zu JSON
XML Die Ajax Technologie wurde zwar mit der Bezeichnung XMLHttp eingeführt, hat jedoch mit → XML wenig zu tun. Mit Ajax kann jede Art von Text transportiert werden, darunter natürlich auch XML. Wenn man XML-codierte Daten sendet, dann muss man sie auf Empfangs-Seite mit Javascript decodieren. Das ist möglich, wird aber wenig verwendet. ♦ XML-Daten werden wesentlich effizienter mit → XSL verarbeitet.	Beispiel: Erzeugung von XML-Daten: print "<zahl>123</zahl>\n"; print "<zahl>4567</zahl>\n";
Java Die Mehrzahl komplexer Ajax-Lösungen verwendet auf Server-Seite die Programmiersprache → Java oder noch besser ein auf Java spezialisierter Webservers (z.B. → Tomcat).	♦ Details zu den hier verwendeten Begriffen und Themen: PHP, Decodierung von Argumenten, Datenstrom, MIME-Type, HTTP-Header, Unicode, UTF-8, JSON, XML

Javascript	ECMAScript für HTML und XML
Live-Demo	Daten mit Javascript anfordern und verarbeiten (JSON)
Anwendung	Wofür ist Ajax gut geeignet ?
Sicherheit	Beschränkung auf den Webserver
Links	Ausgewählte Links zum Thema 'Ajax'
Weitere Seiten zum Thema 'Ajax'
Beispiele	Anzeige von HTTP+HTML Quelltext, Besuchs-Zähler und Statistik (Counter) mit Ajax
Programmierung	Einfache Beispiele für Ajax-Server und -Client
Ajax-Objekt	Methoden und Eigenschaften von Ajax-Objekten

Ausgewählte Links zum Thema 'Ajax'
Ajax Community (de) - Tutorial, Wiki Apple - The XMLHttpRequest Object (en)	Wikipedia: Ajax,
Ajax-Lösungen (als Beispiel interessant): AjaxWrite (Textverarbeitung), AjaxXls (Kalkulation), NexImage (Bildbearbeitung), NumSum (Kalkulation), PACMS (Content Management), QuickLookup (Entwickler Datenbank), Spreadsheets.Google (Kalkulation), ...	Sourceforge: ca. 1000 kostenfreie Ajax-Projekte Projekte (allerdings sehr unterschiedlicher Qualität)

Ajax

Daten mit Javascript anfordern und verarbeiten

Verarbeitung der erhaltenen Daten

Ajax - Grundlagen und Schlagworte

Hintergrund-Arbeiten

Polling

Programme und Daten

Live-Daten zum Kontext

Aktualisierung mit wenigen Live-Daten

Datenbank

Verlagerung von Prozessor-Arbeit

Bedingung = Webserver

Zeit

Alternative iframe

Alternative XML+XSL

Ajax als Paket-Bestandteil

Ajax - Sicherheit

Ajax Server

Bedingung = Webserver

Webserver + PHP

MIME-Type

Zeichensatz

JSON

XML

Java

Ausgewählte Links zum Thema 'Ajax'