AJAX

Asynchronus Javascript und XML

Mittels Javascript wird eine Kommunikation zwischen Client und Server aufgebaut, um Inhalte einer Seite zu laden. Mittels DHTML kann so eine Seite aufgebaut oder verändert werden ohne jedesmal die komplette Seite neu zu laden. Desweiteren kann man Daten im Hintergrund an den Webserver schicken.

Bei einer synchronen Datenübertragung könnte man während der Browser- Server- Kommunikation keine weiteren Anfragen stellen. Stattdessen müsste man warten, bis das Wechselspiel zwischen Browser und Server abgeschlossen ist.

Das bedeutet, es werden immer nur Datenpakete übertragen. Es wird nicht eine feste Leitung aufgemacht, wie bei einem Telefongespräch. Um aus diesen Datenpaketen so etwas wie eine gesamte Webseite zu machen, werden im Header eines Datenpakets Informationen übermittelt, worum es sich handelt.

Datenformat Klartext

Mittels Ajax wird immer Klartext vom Server geholt. Die Datei muss vom gleichen Webserver kommen. Das ist das Sicherheitsprinzip der Sandbox.

Ablauf einer AJAX Anfrage

  1. Es wird ein Objekt erzeugt, über welches die Kommunikation läuft
  2. Eine Callback Funktion wird auf einem Eventhandler dieses Objekts registiert.
  3. Die Verbindung zum Server wird geöffnet
  4. Nun wird die Anfrage abgeschickt und auf eine Antwort des Webservers gewartet.
  5. Die Daten werden verwertet, also in die Webseite eingebaut.

Beispiel

Ein neues XHR Objekt wird erzeugt
var xhrObj = new XMLHttpRequest();

xhrObj.open( get/post, URL, asynchron = true, user, passwort). Die Verbindung zum Server wird aufgebaut. Die Parameter user und passwort werden benötigt, wenn die Seite zugriffsgeschützt ist.
xhrObj.open('get', 'ajax.txt', true);

readystatechange ist ein Event des XMLHttpRequest Objekts. Hierbei werden jegliche Antworten des Webservers abgefangen.
xhrObj.onreadystatechange = handleResponse;

Es werden Antworten vom Server empfangen. Die Eigenschaft readyState == 4 bedeutet, dass die Antwort vom Server vollständig und korrekt da ist.
if(xhrObj.readyState == 4)

Eine weitere Eigenschaft des XHR Objekts ist responseText der empfangene Text.
document.getElementById("antwort").innerHTML = xhrObj.responseText;

Mittels send wird die Anfrage abgeschickt. Siehe nächste Seite, dort wird mittels send() eine Variable verschickt.
xhrObj.send();

Das komplette Beispiel

<script>
	var xhrObj = new XMLHttpRequest();
	function sendReq(){
		xhrObj.open('get', 'ajax.txt', true);
		xhrObj.onreadystatechange = handleResponse;
		xhrObj.send();
	}
	function handleResponse(){
		if(xhrObj.readyState === 4 && xhrObj.status === 200 ){
		document.getElementById("antwort").innerHTML = xhrObj.responseText; 
		}
	}
	function init(){
		document.getElementById("frage").onclick = sendReq; 
	}
	window.onload = init;
</script>

onload(evt)

Anstatt onreadystatechange kann man in heutigen Browsern den Event onload verwenden, dieser wird erst ausgeführt wenn alles geladen ist und bereit steht. 

<script>
var xhrObj = new XMLHttpRequest();
xhrObj.open('get', 'ajax.txt', true);
xhrObj.onload = (evt)=> document.getElementById("antwort").innerHTML = xhrObj.responseText;
xhrObj.send();
</script>

 

HTML Fragmente

Anstatt einen einfachen Text zu laden kann man in die Textdatei auch HTML Fragmente einfügen und diese in eine Seite laden. Denken wir an eine Hauptnavigation, welche das Menü der gesamten Website enthält und auf jeder Seite erscheinen muss. Eine Änderungen in dieser Navigation braucht dann nur an einer Stelle innerhalb der Textdatei vorgenommen werden und nicht auf allen Seiten des Projektes. Einige Webserver sind so eingestellt, dass derartige Seiten die Endung .html haben müssen anstatt .txt

JSON

Mit der Json Notation kann man Datenbankartige Strukturen erzeugen. Man schreibt sie in Dateien mit der Endung .json Es gibt ein paar Befehle, welche so geladene Inhalte in Objekte mit Punktnotation umwandeln und darstellen. So könnte der Inhalt einer .json Datei aussehen. Es gibt einen key info und ein Array mit 3 Strings.

Inhalt der Datei natur.json

{
	"info": ["Wald", "Feldweg", "See"]
}

Das Script ist das gleiche wie oben. Selbstverständlich muss die URL auf die natur.json verweisen und die Funktion handleResponse wird etwas abgeändert. Wie man hier sieht wird mit JSON.parse ein Objekt erstellt.

function handleResponse(){
    if(xhrObj.readyState == 4){
    daten=JSON.parse(xhrObj.responseText);
    document.getElementById("antwort").innerHTML = daten.info[0]+"<br>"+daten.info[1]+"<br>"+daten.info[2];	
    }
}

Javascript Tipps