Einführung in Ajax

Was ist Ajax

Das Wort Ajax ist ein regelrechtes Buzzword im Internet in den letzten Monaten, doch was steckt eigentlich hinter Ajax?

Ajax ist die Abkürzung für:

  • Asyncronous
  • JavaScript
  • and
  • XML


Ajax stellt eine Kombination aus länger existierenden Technologien da. JavaScript wird benutzt um im Browser des Client eine Anfrage zum Server zu stellen. Wenn diese Anfrage vom Server bearbeitet wurde, wird eine Funktion beim Client ausgeführt. Die Nachrichten die der Server verschickt, sind hierbei oft in XML codiert. Die Codierung in XML ist jedoch nicht zwingen, es kann auch eine Codierung als simpler Text erfolgen. XML bietet sich aber an um einen standardisierten Mechanismus zum parsen von Daten zu haben.

Wie oben bereits erwähnt, führt der Server etwas aus und sendet eine Antwort als XML Dokument. Die Implementierung auf der Serverseite kann in einer beliebigen Programmier oder Skriptsprache realisiert werden. In diesem Tutorial und den Schaubildern verwende ich jedoch PHP als serverseitige Skriptsprache.

Da die Anforderung vom Browser des Benutzers über JavaScript ausgelöst wird und mit JavaScript auch die Verarbeitung der Antwort erfolgt, ist kein Reload der Webseite notwendig. In modernen Webandwendungen wird diese Technologie gerne benutzt, um ein ähnliche Verhalten der Anwendung wie bei einer herkömlichen Desktopanwendung zu realisieren.

Da ein gewisser Teil des Codes von Ajax Anwendungen immer ähnlich ist, gibt es im Internet einige Frameworks die die Programmierung von Ajax Anwendungen erleichtern wollen.

 

Im Screenshot ist der Ablauf einer klassischen Ajax Anwendung zu sehen, der Browser lösst asyncron einen Request aus, der Server antwortet mit XML
Ablauf einer Ajax Anwendung

Hello World - Hello Ajax: Ein einfaches Ajax Beispiel

In einem ersten einfachen Beispiel wollen wir uns die Ajax - Basics einmal anschauen.

In diesem Beispiel erstelle ich ein Request Objekt und öffne eine Textdatei über dieses Objekt. Das Dokument das geöffnet wird, hat als Inhalt lediglich einen String(Text). Dieser Inhalt wird in den div Container "eins" geschrieben.

Hierbei wird wohlgermerkt die Methode responseText, nicht responseXML verwendet. Zunächst einmal der Sourcecode der beiden Dateien, diese gehe ich später Zeile für Zeile durch:
 

In der Datei test.txt steht nur der String 'Hello World':

Hello World!


Die HTML Seite die, die Ajax Anfrage durchführt, hat folgenden Aufbau:

<html>
<head>
    <title>Meine ersten Ajax Erfahrungen</title>
    <script type="text/javascript">
        <!--
        function doIt() {

            //erstellen des requests
            var req = null;

            try {
                req = new XMLHttpRequest();
            }
            catch (ms) {
                try {
                    req = new ActiveXObject("Msxml2.XMLHTTP");
                }
                catch (nonms) {
                    try {
                        req = new ActiveXObject("Microsoft.XMLHTTP");
                    }
                    catch (failed) {
                        req = null;
                    }
                }
            }

            if (req == null) {
                alert("Error creating request object!");
            }
            //anfrage erstellen (GET, url ist localhost,
            //request ist asynchron
            var url = 'http://localhost/ajax-tutorial/eins/test.txt';
            req.open("GET", url, true);

            //Beim abschliessen des request wird diese Funktion ausgeführt
            req.onreadystatechange = function() {
                switch (req.readyState) {
                    case 4:
                        if (req.status != 200) {
                            alert("Fehler:" + req.status);
                        } else {
                            alert(req.responseText);
                            //schreibe die antwort in den div 
                            //container mit der id content
                            var result = '<strong>'+req.responseText+'</strong>';
                            document.getElementById('eins').innerHTML = result;
                        }
                        break;

                    default:
                        return false;
                        break;
                }
            };

            req.setRequestHeader("Content-Type",
                    "application/x-www-form-urlencoded");
            req.send(null);
        }
        //-->
    </script>
</head>
<body>
<div id="eins" style="width: 80%; height: 80%; border: dashed 1px;">
    <input type="button" onclick="doIt();" value="Mach was!"/>
</div>
</body>
</html>

Der Aufbau des ersten Ajax Programms

Wir sollten uns nun erstmal die Zeit nehmen dieses erste Ajax Programm zu analysieren.

Der grobe Aufbau sieht erstmal so aus:

  1. Es gibt ein normales HTML Dokument mit Inline JavaScript Code.
  2. Im Body des HTML Dokuments befindet sich ein div Container. Dieser Container hat die Id "eins".
  3. In diesem Container befindet sich ein Button. (Anmerkung: kein Submit). Dieser Button ruft beim onclick Event die JavaScript Funktion doIt(); aus.
  4. In der JavaScript Funktion doIt() wird zunächst das XMLHttpRequest Objekt erzeugt.
  5. Mit diesem Request Objekt wird ein GET Request an die Url localhost/ajax-tutorial/eins/test.txt erzeugt.
  6. Wenn das Request abgeschlossen ist wird eine Funktion aufgerufen. Diese wird hier als "anonyme"JavaScript Funktion mit function erzeugt.
  7. In der "anonymen" CallBack Funktion wird der HTML Inhalt des Element mit der Id "eins" mit dem Inhalt des Response gefüllt. In diesem Fall wird also der Text "Hallo Welt" in den div Container geschrieben.

 

Im nächsten Abschnitt gibt es eine detaillierte Analyse des Quelltextes.

Navigation