home  |  suche  |  kontakt/johner  |  institut 
studierende  |  tech-docs  |  mindmailer 

Was ist AJAX? Was kann AJAX?

AJAX steht für Asynchronous JavaScript and XML.Es ermöglicht das dynamische Nachladen von Inhalten auf HTML-Seiten. Dies erspart das Nachladen der Seite, und ermöglicht Server- und Datenbankzugriffe im Hintergrund.

Dabei wird meist schon fertiger HTML-Code statt XML übergeben, denn dies erleichtert die anschliessende Integration in den bereits bestehenden Code.Mit Hilfe von JavaScript und dem Document Object Model (DOM) werden die nachgeladenen Inhalte in die Seite eingebaut.AJAX funktioniert mit den wichtigsten Browsern, sofern JavaScript aktiviert ist. 

AJAX wird heute schon auf vielen Webseiten eingesetzt. So zum Beispiel bei Suchmaschinen, welche schon bei der Eingabe ähnliche Suchbegriffe anzeigen. Webseiten wie Last.fm, Studivz.de, delicious.com, flickr.com setzen an vielen weiteren Stellen AJAX ein. Dies hebt die Bedeutung dieser Technologie hervor.

Wie verwendet man AJAX?

AJAX ist relativ einfach zu verwenden. Es wird im Head einer HTML-Seite, mit Hilfe von JavaScript realisiert. Typischerweise benötigt man für Ajax eine Browserweiche, damit AJAX sowohl bei Mozilla Firefox als auch bei Internet Explorer etc. funktioniert.

Das Grundgerüst von AJAX inkl. Browserweiche sieht wie folgt aus:

 

 

var eingabe = document.getElementById("eingabefeld");
var url = "http://localhost:8080//?wert=" + escape(eingabe.value);
var req;
if (window.XMLHttpRequest) {
    req = new XMLHttpRequest();
} else if (window.ActiveXObject) {
    req = new ActiveXObject("Microsoft.XMLHTTP");
}
req.onreadystatechange = function() {
    if (req.readyState == 4) { //wenn die Anwort da ist
        if (req.status == 200) { //wenn die Antwort "okay" lautet
        //Hier wird der Inhalt nachgeladen und ausgetauscht.
        var ergebnis = req.responseText;
        document.getElementById("austausch").innerHTML = ergebnis;
        }
    }
};
req.open("GET", url, true);
req.send(null);

Ein wichtiger Bestandteil von AJAX ist das XML-HTTP-Request-Objekt.

Über dieses Objekt werden die Inhalte nachgeladen, und der Zugriff auf den Server/das Servlet im Hintergrund realisiert.

Das XML-HTTP-Request-Objekt kennt verschiedene Zustände. Der Zustand des XML-HTTP-Request-Objekt wird in dem AJAX-Grundgerüst-Snippet abgefragt:

 

  if (req.readyState == 4){

 

 

}

 

Somit wird sichergestellt das die Anfrage korrekt bearbeitet wurde, bevor man auf die Inhalte des Objekts zugreift. ( "Completed" )

Die Zustände des XML-HTTP-Request-Objekts:

Es gibt folgende Zustände, die ein XML-HTTp-Request-Objekt durchläuft:

  • 0: nicht initialisiert, open() wurde noch nicht aufgerufen
  • 1: initialisiert, send() wurde noch nicht aufgerufen
  • 2: abgeschickt, send() wurde aufgerufen, Status und Header sind verfügbar
  • 3: ladend, Antwort wird gerade empfangen, responseText enthält die bisher empfangenen Daten
  • 4:  fertig, Antwort wurde vollständig empfangen

Wichtig zu wissen ist, dass diese Zustände in der Methode readyState ausgelesen werden kann.