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 XMLHttpRequest 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)

Wenn die Anfrage erfolgreich war liefert status den Wert 200
if(xhrObj.status == 200)

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, wie im vorigen Beispiel. Denken wir auch 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

Die JSON Notation habe ich hier erläutert.

Im folgendem Beispiel wird diese Datei filme.json per AJAX aufgerufen und in ein Javascript Objekt umgewandelt und angzeigt.

Beispiel 1 | Beispiel 2

let anzeige = document.getElementById( "anzeige" );
var xhrObj = new XMLHttpRequest();
xhrObj.open( 'get', 'filme.json', true );
xhrObj.onreadystatechange = handleResponse;
xhrObj.send();

function handleResponse ()
{
    if ( xhrObj.readyState === 4 && xhrObj.status === 200 )
    {
        let obj = JSON.parse( xhrObj.responseText );
        anzeige.textContent = obj.filme[0]title;    
    }
}

Hier ein Beispiel mit der gleichen filme.json Datei, aber der kompletten Anzeige des JSON Objekts

Ausführliches Beispiel

Siehe auch die Eigenschaften und Methoden des XMLHttpRequest Objekts auf der nächsten Seite

Infos zum Script:

In diesem Beispiel wird das onload Event statt onreadystatechange verwendet. Das onload-Event wird ausgeführt, wenn alles geladen ist. onload ist eine neuere Methode.

xhrObj.responseType = 'json';
Die Antwort soll als JSON Objekt erfolgen, damit man mit XMLHttpRequest.response ein Javascript Objekt bekommt, sofern der Browser das unterstützt. Siehe weiter unten.

obj = xhrObj.response;
Das let obj ist das Javascript Objekt, da es mit xhrObj.response direkt ein Javascript Objekt bekommt, denn der responseType wurde zuvor auf "json" gesetzt.

obj = JSON.parse( xhrObj.responseText );
Wenn der Browser das nicht unterstützt, wird es mittels parse() in ein Javascript Objekt umgewandelt

xhrObj.setRequestHeader( 'Accept', 'application/json' );
Der Header wird gesetzt, damit vom Server nur JSON Dateien geladen werden.

Script

let anzeige = document.getElementById( "anzeige" );
var xhrObj = new XMLHttpRequest();
xhrObj.open( 'get', 'filme.json', true );
xhrObj.responseType = 'json';
xhrObj.setRequestHeader( 'Accept', 'application/json' );
xhrObj.send();

let obj;
xhrObj.onload = handleResponse;

function handleResponse ()
{
    if ( xhrObj.status === 200 )
    {
        if ( xhrObj.responseType === "json" )
        {
            obj = xhrObj.response;
        } else
        {
            obj = JSON.parse( xhrObj.responseText );
        }
        //Anzeigen der  Eigenschaften des Javascript Objekts 
        //durchlaufen der Arrays
        for ( var i = 0; i < obj.filme.length; i++ )
        {
            anzeige.innerHTML += "<p>";
            anzeige.innerHTML += obj.filme[ i ].title + "<br>" + obj.filme[ i ].regie + "<br>" + obj.filme[ i ].jahr + "<br>";

            for ( var e = 0; e < obj.filme[ i ].schauspieler.length; e++ )
            {
                anzeige.innerHTML += obj.filme[ i ].schauspieler[ e ] + ", ";
            }
            anzeige.innerHTML += "</p>";
        }
    }
}

Javascript Tipps