Vorwort
In den Anfangszeiten des Webs waren die meisten Seiten statisch, einige Seiten haben mit simplen CGI Anwendungen etwas Interaktivität geboten. Die Wandlung von statischen Inhalten zu komplett dynamisch generierten Webseiten war somit nur eine Frage der Zeit. Dieses Tutorial beschreibt, wie man seine Webapplikationen um ein Element erweitern kann: asynchrone Interaktion mit dem Benutzer.

Was solltest du wissen / können ...
Du solltest Grundkenntnisse in HTML, fortgeschrittene Kenntnisse in JavaScript und gute Kenntniss des HTTP Protokolls besitzen.

Was ist AJAX?
Um es einfach auszudrücken: AJAX (Asynchronous JavaScript And XML) ermöglicht es Inhalte dynamisch nachzuladen, ohne dass die komplette Seite neu geladen werden muss. AJAX ist keine Programmiersprache sondern besteht aus verschiedenen Technologien und ist auch nicht nur annähernd so schwer zu erlernen. AJAX besteht aus:

• (X)HTML
• javascript: JavaScript Code bildet den Core Code einer jeden AJAX-Anwendung
• DHTML: Dynamic HTML wird benutzt um HTML-Elemente (p, div, span etc.) dynamisch zu aktualisieren.
• DOM: Das Document Object Model wird benutzt um sich durch die Struktur von HTML und vor allem XML. (das vom Server zurückgegeben wurde, aber dazu später mehr) Dokumenten zu arbeiten.

Beispiel: Bei einer Anmeldung für einen Freemail Account muss der Benutzer die Postleitzahl sowie den Namen und das Bundesland seines Wohnortes eingeben. Nachdem der Benutzer die Postleitzahl eingegeben hat, könnte man bereits den Ortsnamen und das Bundesland mit Hilfe von AJAX dynamisch nachladen und in das Formular eintragen.

Das XMLHttpRequest Objekt
Im Grunde dreht sich alles um das XMLHttpRequest Objekt, das im Hintergrund die eigentliche Arbeit verrichtet. Das XMLHttpRequest Objekt gibt es in seiner heutigen Form seit dem Mozilla 0.9.7 und seit Internet Explorer 5.0. Im Internet Explorer ist es allerdings ein ActiveX Objekt. Da sich der ActiveX-Bezeichner von Version zu Version ändert, muss man bereits bei der Erzeugung des XMLHttpRequest Objekts eine Fallunterscheidung einbauen. Allerdings ist das API (Application Programming Interface) in jedem Browser gleich und man kann sich somit auf die eigentliche Aufgabe konzentrieren und muss sich nicht mit aufwendigen Fallunterscheidungen herumschlagen.

XMLHttpRequest in den verschiedenen Browsern

• Mozilla, Opera, Safari:
  PHP-Code:

  var xhttp = new XMLHttpRequest(); 

• Internet Explorer 5:
  PHP-Code:

  var xhttp = new ActiveXObject("Microsoft.XMLHTTP"); 

• Internet Explorer 6:
  PHP-Code:

  var xhttp = new ActiveXObject("MSXML2.XMLHTTP"); 


Um AJAX jetzt in allen Browsern verwenden zu können, werden wir uns eine kleine Funktion schreiben, die mögliche (wahrscheinliche) Fehlermeldungen abfängt und das XMLHttpRequest Objekt für uns in der globalen Variable xhttp speichert bzw. die Variable auf false setzt, wenn ein Fehler aufgetreten ist.

PHP-Code:

        var xhttp;
    
        function createXMLHttpRequest() {
           if (window.ActiveXObject) { 
                try { 
                   // IE 6 and higher
                   xhttp = new ActiveXObject("MSXML2.XMLHTTP");
                } catch (e) {
                    try {
                        // IE 5
                        xhttp = new ActiveXObject("Microsoft.XMLHTTP");
                    } catch (e) {
                        xhttp=false;
                    }
                }
            }
            else if (window.XMLHttpRequest) {
                try {
                    // Mozilla, Opera, Safari ...
                    xhttp = new XMLHttpRequest();
                } catch (e) {
                    xhttp=false;
                }
            }
        } 


Nachdem die Funktion createXMLHttpRequest aufgerufen wurde, enthält xhttp entweder ein Objekt oder den Wert false.

Einen Request an den Server senden
Um nun wirklich einen Request an den Server zu senden, werden wir uns ebenfalls eine Methode schreiben nämlich sendRequest.

PHP-Code:

        function sendRequest() {
            
            if (!xhttp) {
                alert("An Error occured when trying to initialize XMLHttpRequest!");
                return; // exit
            }

            var q = document.getElementById("q").value;
            q = encodeURIComponent(q);
            xhttp.open("GET","http://localhost/index.php?q="+q,true);
            xhttp.onreadystatechange=sendRequest_callback;
            xhttp.send(null);

        } 


Hier wird zuerst geprüft ob das XMLHttpRequest Objekt überhaupt existiert und anschließend wird ein Wert aus einem Textfeld mit document.getElementById in der Variable q abgelegt. Mit encodeURIComponent wird der Wert von q URL kodiert. Danach werden die Methoden XMLHttpRequest.open, XMLHttpRequest.onreadystatechange und XMLHttpRequest.send aufgerufen und somit ein Request an den Server gesendet.

Wichtig: In JavaScript gibt es auch noch die Methode encodeURI(). Der Unterschied zwischen encodeURIComponent() und encodeURI() ist, dass ersteres auch noch die Zeichen , ? / : @ & = + $ URL kodiert. Deshalb sollte encodeURIComponent() verwendet werden.

XMLHttpRequest.open(sMethod, sUrl [, bAsync] [, sUser] [, sPassword])
Diese Methode weist dem „unerledigten“ Request die Übertragungsmethode (GET,POST,PUT,HEAD), die Zielurl und optional einen boolschen Wert zu, der besagt ob eine asynchrone Operation ausgeführt werden soll oder nicht: true=ja, false=nein. Der Standardwert ist true. Wenn bAsync auf true gesetzt ist, so muss auch dem Attribut XMLHttpRequest.onreadystatechange eine Callback Methode übergeben werden, in unserem Fall sendRequest_callback,welche bei jeder Änderung des „ready states“ aufgerufen wird. Es gibt fünf verschiedene „ready states“, die übrigens über das Attribut XMLHttpRequest.readyState abgefragt werden können.
Die möglichen Bearbeitungszustände im Detail:

• 0: Der Request wurde noch nicht initialisiert d.h. bevor XMLHttpRequest.open aufgerufen wurde.
• 1: Der Request wurde „gesetzt“, ist aber noch nicht gesendet worden d.h. bevor XMLHttpRequest.send aufgerufen wurde.
• 2: Der Request wurde gesendet und wird „bearbeitet“.
• 3: Der Request wird noch bearbeitet, allerdings stehen schon einige Daten zur Verfügung. Es kann darauf bereits mit XMLHttpRequest.responseText zugegriffen werden.
• 4: Der Response (Anwort) ist abgeschlossen d.h. es stehen einem alle Daten zur Verfügung.

Will man aber browserunabhängig programmieren so sollte man nur den „ready state“ 4 verwenden, da dieser als einziger einheitlich in allen Browser implementiert ist bzw. zur Verfügung steht. Eigenen Tests zu Folge gibt der Opera Browser (v8.5) nur die Bearbeitungszustände 3 und 4 zurück. Der IE 6 und FF 1.5 hingegen geben die „ready states“ 1,2,3,4 zurück. Der XMLHttpRequest.open Methode können noch die optionalen Parameter sUser und sPassword übergeben werden, sofern der Server eine Authentifizierung verlangt. Werden diese nicht angegeben obwohl eine Authentifizierung verlangt wird, so wird ein Authentifizierungsdialog des Browsers angezeigt.

Wichtig: Es ist zu beachten, dass aus Sicherheitsgründen und vor allem zur Vermeidung von XSS- und DoS-Angriffen die im Request (Anfrage) verwendete URL den gleichen Server bzw. Hostnamen enthalten muss wie die URL der Seite selbst.

XMLHttpRequest.onreadystatechange
Dieses Attribut steht nur zur Verfügung wenn in XMLHttpRequest.open der Parameter bAsync auf true gesetzt wurde. Dem Attribut wird eine Callback Methode zugewiesen die bei jeder Änderung des Bearbeitungszustandes der Transaktion/Anfrage aufgerufen wird d.h. bei jeder Änderung des „ready states“. Warum es Sinn macht onreadystatechange zu verwenden, wird später erleutert.

XMLHttpRequest.send( [varBody])
Sendet grundsätzlich eine HTTP Anfrage an einen Server und erhält eine Antwort vom Server z.B. reinen Text, ein XML Dokument oder ähnliches. Der optionale Parameter varBody ist bei einem GET Request mit NULL und bei einer POST oder PUT Anfrage eben mit den gewünschten Werten zu füllen. In diesem ersten Teil des AJAX Tutorials werden nur GET Requests behandelt und diese noch nicht komplett d.h. POST ist für uns derzeit uninteressant.

Wie komme ich nun an die Daten des Reponse?
Nachdem eine Anwort vom Server erhalten wurde stehen die erhaltenen Daten in XMLHttpRequest.responseText als reiner Text und in XMLHttpRequest.responseXML als XML Document Object Model (DOM) Objekt zur Verfügung. Der Einfachheit halber werden wir hier nur responseText verwendet. Auf die Daten werden wir in der Methode sendRequest_callback zu greifen. Es ist allerdings auch möglich den Parameter bAsynch auf falsezu setzen und einfach nach dem Aufruf von XMLHttpRequest.send auf die Daten zuzugreifen.

PHP-Code:

        function sendRequest_callback() {
            alert ( xhttp.readyState);
            
            if (xhttp.readyState==4 && xhttp.status==200)
                alert ( xhttp.responseText );
        } 


Bei jeder Änderung des Bearbeitungszustandes sprich des „ready states“ wird diese Methode aufgerufen (weil XMLHttpRequest.onreadystatechange ja gesetzt wurde) und gibt den aktuellen „ready state“ über eine alert-Box aus z.b. (1,2,3,4). Ist der „ready state“ 4 und der HTTP Statuscode (der über XMLHttpRequest.status abgefragt werden kann) 200 d.h. die Antwort wurde vollständig erhalten so werden die erhaltenen Daten ausgegeben.

Das Backend
Jetzt wird sich vielleicht jemand die Frage stellen wie das Backend Script d.h. das Script an das die Anfrage gesendet wird und das die Antwort sendet aussieht bzw. aussehen könnte. In unserem Fall wäre das ja http://localhost/index.php. Es reicht grundsätzlich schon das die Datei existiert und nichts ausgibt d.h. XMLHttpRequest.responseText wäre dann leer bzw. NULL. Das würde aber nicht sehr sinnvoll sein und deshalb findet hier meistens eine Datenbankabfrage oder ähnliches statt. Theoretisch könnte man auch nur eine Anfrage an eine HTML Datei oder XML Datei senden. Dann würden eben immer nur die gleichen Daten zurückgegeben.

Ein Beispiel für index.php

PHP-Code:

<?php
$output = "";
$q = isset ($_GET['q']) ? trim($_GET['q']) : '';
$q = preg_replace("~^[^a-z0-9]$~i","",$q);

if (empty($q))
    die ("The given string is not valid");

$db = mysql_connect("localhost","root","");
mysql_select_db("mydatabase");

$q = mysql_real_escape_string($q);

if ($result = mysql_query("select column from mytable where column2='{$q}'")) {
    while ($line = mysql_fetch_row($result)) {
        $output .= $line[0];
    }
}

header("Content-Type: text/plain;charset=iso-8859-1");
echo htmlentities($output,ENT_QUOTES,'iso-8859-1');
?>

Schlusswort
Ich hoffe, dass ich mit diesem Tutorial die Grundlagen von AJAX verständlich erklärt habe. Es wurden aber bei weitem nicht alle Möglichkeiten bzw. Methoden und Attribute des XMLHttpRequest Objekts vorgestellt. Deshalb werden sofern es meine Zeit erlaubt noch weitere Tutorials folgen.

Nachfolgend der komplette JavaScript Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html> <head> <meta name="keyword" content="" /> <meta name="description" content="" /> <meta http-equiv="Content-Type" content="text/html;charset=iso-8859-1" /> <script type="text/javascript"> <!--
        var xhttp;
    
        function createXMLHttpRequest() {
           if (window.ActiveXObject) { 
                try { 
                   // IE 6 and higher
                   xhttp = new ActiveXObject("MSXML2.XMLHTTP");
                } catch (e) {
                    try {
                        // IE 5
                        xhttp = new ActiveXObject("Microsoft.XMLHTTP");
                    } catch (e) {
                        xhttp=false;
                    }
                }
            }
            else if (window.XMLHttpRequest) {
                try {
                    // Mozilla, Opera, Safari ...
                    xhttp = new XMLHttpRequest();
                } catch (e) {
                    xhttp=false;
                }
            }
        }

        function sendRequest() {
            
            if (!xhttp) {
                alert("An Error occured when trying to initialize XMLHttpRequest!");
                return; // exit
            }

            var q = document.getElementById("q").value;
            q = encodeURIComponent(q);
            xhttp.open("GET","http://localhost/index.php?q="+q,true);
            xhttp.onreadystatechange=sendRequest_callback;
            xhttp.send(null);

        }
        
        function sendRequest_callback() {
            alert ( xhttp.readyState);
            
            if (xhttp.readyState==4 && xhttp.status==200)
                alert ( xhttp.responseText );
        }
        
        function init() {
            createXMLHttpRequest();
        }
        window.onload=init;
    // --> </script> </head> <body> <form method="get" action="<?php echo basename(__FILE__);?>"> <!-- 
Nachdem eine Taste gedrückt und wieder losgelassen wurde wird sendRequest() aufgerufen onkeypress wäre zu früh. Man könnte noch eine Verzögerung von z.B. 200ms einbauen, damit nicht bei jedem Tastendruck sondern z.B. nur bei jedem zweiten ein Request gesendet wird.
            --> <input onkeyup="javascript:sendRequest();" type="text" id="q" name="q" size="20" /> </form> </body> </html>

EDIT:
Es ist immer nett wenn man eine Antwort kriegt um zu wissen ob das Tutorial auch hilfreich ist.

MfG Fat Tony

[Ben]

Eventuell ebenfalls hilfreich für einen Einstieg in das Thema AJAX:
http://developer.mozilla.org/en/docs/AJAX

Auch in deutscher Sprache verfügbar:
http://developer.mozilla.org/de/docs/AJAX