Zur überprüfung:

Sollte es Ihnen auf der vorausgegangenen Seite schwer gefallen sein, die Logik nachzuvollziehen, dann gehen Sie bitte noch einmal zurück

  • Markieren Sie eine beliebige Stelle im Text

  • Wählen Sie jetzt noch einmal ein beliebiges Gewerk

  • Sie sehen, dass die Markierung nicht verschwindet - das Gewerke wird trotzdem angezeigt

  • Das ist der Sinn von AJAX = "Asynchronous JavaScript and XML"


    • Nochmal zurück: Zur vorherigen Seite

    Problem:

    Bei einem AJAX-Aufruf ändert sich der Inhalt der Seite, dabei gibt es allerdings kein "Zurück" in der Werkzeugleiste des Browsers, da ja keine neue Seite angefordert wird, sondern sich nur der Inhalt austauscht.

    Beim Programmieren ist daran zu denken, dass dies ein neues Umgebungsverhalten für den Anwender bedeutet und er keinesfalls in's USER-Nirwanna geschickt werden darf.

    Also achten Sie bitte immer auf die Steuerlogik, damit der Anwender auch mit der neuen Technologie zurecht kommt.

    Und nun zu unserem kleinen Beispiel:

    Zunächst sind die Daten mit den Gewerken in einer MySql-Datenbank in der Tabelle "Gewerke" hinterlegt - siehe Bild:

    Gewerketabelle


    Beim Mausklick - z.B.: auf "Maurer" werden die hinterlegten Informationen aus dem Server direkt in die bestehende Seite gelesen.

    Gewerkeabfrage



    Dabei ist der hinterlegte "Click-Event" ein einfacher Link: 
    <a href="javascript:requesT('Malerbetrieb')">Maler</a>
    Somit wird die Javascript-Funktion requestT() mit dem Parameter 'Malerbetrieb' aufgerufen und diese Funktion nimmt Kontakt zur Datenbank und zu den in Tabellen hinterlegten Daten auf.

    Die Funktion requestT() :

    function requesT(wert){
  rqo.open('get', 'test.php?eingabe='+wert);
  rqo.onreadystatechange = receivE;
  rqo.send(null);
}
    "rqo" ist ein Objekt, welches beim Aufruf der Seite über Javascript initialisiert wird:

    function createReqObj(){
  brws = navigator.appName;
  if(brws == "Microsoft Internet Explorer")
    rq = new ActiveXObject("Microsoft.XMLHTTP");
  else rq = new XMLHttpRequest(); return rq;
}

rqo = createReqObj();
    Dieses Objekt ("rqo") wird entweder als ActiveXObject("Microsoft.XMLHTTP") in Microsoftbrowsern oder als "XMLHttpRequest()" initialisiert und besitzt Eigenschaften und Methoden. Eigenschaften können über eine Serverabfrage zugewiesen werden. In unserem Beispiel ist das durch den Aufruf der test.php (SQL-Abfrage in ein Array) der Fall.

    Die Funktion receiveE prüft den Zustand des Objekts rqo und sobald die Rückmeldung: rqo.readyState == 4 erfolt, demnach die serverseitige Anfrage erfolgreich stattfand, kann das Ergebnis ausgegeben werden: 

    function receivE(){
  if(rqo.readyState == 4){
    document.getElementById("erg").innerHTML = rqo.responseText;
  }
  return
}


    Die Eigenschaft readyState:

    Zustand Beschreibung
    0 Nicht initialisiert
    1 Lädt gerade
    2 Fertig geladen
    3 Wartet auf Rückgabe
    4 Vollständig


    Die serverseitige SQL-Abfrage:

    Eigentlich kann uns egal sein, was serverseitig passiert. Die Abfrage ist gewissermaßen ein Resultat aus der "blackbox" und hat eigentlich mit der AJAX-Technik nichts zu tun. Hier sei nur der Vollständigkeit halber auch noch die Abfrage dargestellt (test.php): 

    <?php
$gewerke = $_REQUEST['eingabe'];
$con = mysql_connect("host","datenbank","passwort");
if (!$con)
  {
  die('Could not connect: ' . mysql_error());
  }
mysql_select_db("datenbank", $con);
$result = mysql_query("SELECT * FROM gewerke where name_1='". $gewerke ."'");
while($row = mysql_fetch_array($result))
  {
  echo $row['name_1'] . " - " . $row['name_2'] . " - " .$row['strasse'] . " - "
  . $row['plz'] . " - " . $row['ort'];
  echo "
    ";
  }
mysql_close($con);
?>


    Inhalte der Abfrage:

  • übergabe der Variable eingabe in die Variable $gewerke

  • Konnekt (connect oder con) zur Datenbank

  • Wenn die Verbindung nicht klappt - Ende (die)

  • Ansonsten - Abfrage in das Arry $result

  • Auslesen des Arrays $result an das Objekt rqo

  • Datenverbindung wieder schließen


    • Wenn Sie jetzt den Eindruck haben, dass der Zug abgefahren ist und Sie immer noch am Bahnhof stehen, dann liegt das nicht zwingend an Ihnen, dann kann das auch an meiner unzureichenden Erklärung liegen.

  • Kopieren Sie die letzte Seite (index.html) in ein Verzeichnis auf Ihrem Testserver

  • Kopieren Sie den Quelltext von test.php in das gleiche Verzeichnis

  • Legen Sie die Tabelle Gewerke an, wie oben dargestellt

  • Der Rest heißt "trial and error"


    • Funktioniert nicht?

    Dann müssen Sie wahrscheinlich Ihre Kenntnisse in Javascript, PHP und MySql noch etwas vertiefen - Sorry. Aber - keine Panik - weitere Tutorials folgen und wenn Sie alles sorgfältig nachvollziehen, genügend ausprobieren und testen, dann hat auch AJAX für Sie demnächst gar nichts "Mystisches" mehr - hat es auch nicht(!) - ist eigentlich ganz einfach.