AJAX

AJAX

Zielgruppe sind fortgeschrittene StudentInnen und Informatik-Amateure

Kenntnisse von HTML und Javascript (DOM-Methoden) werden vorausgesetzt.



AJAX-Intro


Bei einer AJAX-Anforderung bleibt die bereits geladene Webseite erhalten. Man vermeidet damit, die gleich bleibenden Elemente vom Server neu anzufordern und erneut vom Client-Browser zu laden:
Mit AJAX werden nur jene Daten angefordert, die man aktuell braucht, um die angezeigten Daten zu ersetzen oder zu ergänzen.

Bei kluger Anwendung kann man mit AJAX die Menge der im Netzwerk transportierten Daten stark reduzieren.
Sowohl der Server als auch der Client werden entlastet und können schneller arbeiten.

Die mit AJAX erreichbaren Vorteile sind insbesondere für interaktive Anwendungen wichtig, bei denen in einer großen Webseite mehrfach kleinere Daten-Mengen zu ändern oder zu ergänzen sind.

Live AJAX Beispiel


In das hellblau unterlegte Feld werden einige Status-Daten des aktuellen AJAX-Auftrags angezeigt. Diese Daten sind nur für EntwicklerInnen interessant und werden bei normaler Anwendung nicht angezeigt.
Der Server antwortet - wenn überhaupt - mit einem HTTP-Status-Code als Zahl und Text.


 Fehler:


Status des letzten Auftrags

Es wurde noch kein AJAX-Auftrag erteilt.


Im Status-Feld wird die Zeit ihres Client-PC angezeigt, die sich von der Server-Zeit unterscheiden kann.

Der Button Keine Antwort sendet einen AJAX-Auftrag an ein Server-Programm, welches keine Daten sendet. Damit wird ein Abbruch nach der Wartezeit von 4 Sekunden provoziert.

Der Button Kein Server-Programm sendet einen AJAX-Auftrag an ein nicht vorhandenes (oder nicht erreichbares) Server-Programm.

AJAX-Diagramm


AJAX-Modell

Annahme: Eine dynamische Webseite wird angefordert. Danach werden 2mal unterschiedliche Daten mit AJAX angefordert.

Der HTML-Quelltext wird nur 1mal von Server (oben) zum Client (unten) übertragen und gerendert.

Danach werden nur die jeweiligen Daten übertragen und in die bereits geladene Webseite eingesetzt.

AJAX Antwort-Daten


XML+XSL
Die 'Programmiersprache' → XSL ist auf die Verarbeitung von XML-Daten spezialisiert.
Das Javascript-Programm fordert dazu nicht nur die XML-Daten vom Server an sondern auch das passende XSL-Programm (ebenfalls eine XML-Datei).
Dieses erzeugt fertige Objekte, die man direkt in eine Webseite einsetzen kann, z.B. eine HTML-Tabelle oder eine SVG-Grafik.
Die Methode ist sehr effizient und mit Javascript einfach anzuwenden. Sie bietet u.a. die Möglichkeit, aus den gleichen XML-Daten unterschiedliche Produkte (HTML-Tabelle oder SVG-Grafik) herzustellen.
Programmier-Kenntnisse von XSL sind allerdings derzeit nur wenig verbreitet.

JSON
Beispiel: {'inhalt':'Hier ist AJAX'}
JSON ist eine Syntax-(Grammatik)-Variante von Javascript. JSON-Text lässt sich etwas einfacher und schneller verarbeiten als XML und liefert fertige Javascript-Objekte.

Binäre Daten
In Ausnahme-Fällen kann ein AJAX-Server auch binäre Daten senden. Diese werden am Server meistens mit → Base64 codiert und daher ebenfalls als Text übertragen. Diese Methode kann sinnvoll sein, wenn man die Daten auf Client-Seite nicht decodieren muss, sondern direkt verwenden kann.
Hinweise kann man aus den Beispielen → Inline-Pixel-Grafik und → Inline-Audio entnehmen.

AJAX-Server-Programme


Die Programmierung ist einfach und erfordert nur minimale Kenntnisse der jeweiligen Programmiersprache.

Man kann allerdings kein Standard-Beispiel angeben, weil die Möglichkeiten unendlich zahlreich sind. Daher werden hier lediglich die im ↑ Live‑Kapitel dieser Seite verwendeten Programme als Beispiele gezeigt.



PHP-Quelltext der Datei ajax_cet_server.php
Im Programm sind keinerlei Hinweise auf die Verwendung nötig. Man kann es daher auch ohne AJAX mit einem einfachen  ▶ HyperLink anfordern.



PHP-Quelltext der Datei ajax_ip_server.php
Mit diesem  ▶ HyperLink wird das Programm alternativ angefordert und in einem eigenen Browser-Tab geladen.



PHP-Quelltext der Datei ajax_dn_server.php
Mit diesem  ▶ HyperLink wird das Programm alternativ angefordert und in einem eigenen Browser-Tab geladen.


Praktische Beispiele nutzen meist weitere Möglichkeiten, z.B.

AJAX-Client-Programme


Ein typisches AJAX-Client-Programm muss diese Arbeiten ausführen:
  1. (1)  Erzeugung eines AJAX-Objekts
  2. (2)  Formulierung und Absenden eines HTTP-GET-Auftrags
  3. (3)  Verarbeitung eintreffender Daten
  4. (4)  Reaktion bei Timeout
Diese Arbeiten sind hier auf 4 einzelne Funktionen aufgeteilt. Man kann sie auch in einer einzigen Funktion oder in einem Objekt zusammenfassen.

Die Programmierung erfordert fortgeschrittene Kenntnisse.

Der AJAX-Prozess läuft in Echtzeit ab, d.h. inerhalb einiger Millisekunden. Ein Debuggen mit Meldungsfenstern (alert) ist daher ausgeschlossen, man verwendet besser die ↓ Web-Konsole.

Der Ajax-Prozess wird durch Faktoren beeinflusst, die man nicht kontrollieren kann: Der Transport der Daten kann behindert werden, der Server kann überlastet sein, usw.
Das Client-Programm muss auf alle denkbaren Probleme sinnvoll reagieren - Das ist zwar auch für andere Programme wünschenswert, in diesem Fall jedoch unbedingt notwendig.

Die für das Live-Beispiel verwendeten Programme sind im Quelltext dieser Webseite enthalten. Die folgenden Beispiele sind zum besseren Verständnis gekürzt.



Globale Variable werden außerhalb der Funktionen definiert und sind in allen Funktionen verwendbar:
var obj = null;
var tevt = null;
var tms = 4000;


function ajax_init() {
obj = null;
try{
obj = new XMLHttpRequest();
if(!obj) {console.log('Browser-Fehler');}
}
catch(e) {
obj = null;
console.log('init-Fehler: '+e);
}
}


function ajax_get(path) {
ajax_init();
if(obj) {
tevt = window.setTimeout('ajax_cancel()',tms);
try{
obj.open('GET',path,true);
obj.onreadystatechange = ajax_receive;
obj.send(null);
}
catch(e) {
console.log('get-Fehler: '+e);
}
}
}

AJAX arbeitet asynchron: Die Funktion wartet nicht auf das Eintreffen der angeforderten Daten.
Diese lösen ein readystatechange-Ereignis aus, welches mit einer eigenen Event-Handler-Funktion verarbeitet wird.


function ajax_receive() {
if(obj.readyState == 4) {
window.clearTimeout(tevt);
console.log('HTTP-Code: ' + obj.status);
console.log('HTTP-Text: ' + obj.statusText);
if(obj.status == 200) {
console.log('Response-Text: ' + obj.responseText);
alert(obj.responseText);
}
else{
var txt = obj.statusText;
if(!obj.status) {txt = 'Abbruch';}
alert('Empfangs-Fehler: ' + txt);
}
}
}



function ajax_cancel() {
try{
obj.abort();
window.clearTimeout(tevt);
}
catch(e) {console.log('cancel-Fehler: '+e);}
alert('Abbruch');
}



Mit der Methode log() kann man beliebige Daten an der Web-Konsole ausgeben:
console.log('Hier ist die Konsole');
Die Web-Konsole ist schnell genug, um auch in Echtzeit Daten aufzuzeichnen.

Die oben vorgestellten Beispiele enthalten einige Anweisungen zur Konsolen-Ausgabe. Man kann weitere Anweisungen einfügen, um den Ablauf eines AJAX-Prozesses detailliert zu verfolgen.



HyperLink zum Start eies AJAX-Auftrags:
<a href="javascript:ajax_get('ajax_server.php')">
AJAX-Anforderung
</a>

Verschiedene Möglichkeiten zum → Starten von Javascript-Funktionen.