Websiteentwicklung: AJAX: Erstes Programm

Websiteentwicklung AJAX Erstes Programm

Das erste Beispiel soll nur die Datenübertragung zwischen Client und Server illustrieren, es macht also noch nichts sinnvolles. Wenn der Button gedrückt wird, wird vom Webserver Datum und Uhrzeit abgefragt und angezeigt.

HTML

Die Webseite enthält als HTML-Code einen Button zum Starten des AJAX-Aufrufs, und ein leeres div um das Ergebnis aufzunehmen.

 <input type="button" value="tu ajax" onClick="hol_datum()">
 <br />
 <div style="width:400px; border: 1px black solid;" id="output">
 .... noch nix ....
 </div>

JavaScript

Ajax-Objekt erzeugen

Im JavaScript-Code der Seite legen wir uns die Funktion hol_datum() an, auf welche sich das onclick-Attribut des Buttons im HTML-Teil der Seite bezieht. Sie erzeugt zuerst das Objekt myAjax. Hierbei wird geprüft, ob der Browser das Objekt window.XMLHttpRequest unterstützt. Beim Internet Explorer 5 und 6 ist dies nicht der Fall. Deshalb wird ein Fallback via ActiveX ergänzt:

 function hol_datum(){
  if (window.XMLHttpRequest){
   //Erzeugung des Objektes für alle Browser außer IE5 und IE6.
   myAjax = new XMLHttpRequest();
  }else{
   //Dieser Code wird als Fallback für den IE5 und IE6 benötigt, da diese die obige Schreibweise nicht unterstützen.
   myAjax = new ActiveXObject("Microsoft.XMLHTTP");
  }

 }

Statusänderungen der Anfrage überwachen

Kann weggelassen werden, wenn keine Antwort vom Server erwartet wird.

Bevor wir eine Anfrage an den Server schicken können, sollten wir festlegen, was geschieht, wenn sich der Status der Anfrage ändert bzw. was geschieht, wenn eine Antwort vom Server ankommt. Hierzu gibt es das Attribut onreadystatechange:

 myAjax.onreadystatechange=function(){ [...] };

Wichtig: Wenn Sie beim Attribut onreadystatechange eine bereits existierende Funktion angeben, dürfen Sie keine Klammern verwenden. Das würde die Funktion sofort ausführen, nicht erst wenn die Daten vom Server empfangen wurden:

Falsch:

 myAjax.onreadystatechange=StatusAenderung();

Richtig:

 myAjax.onreadystatechange=StatusAenderung;

Daten empfangen

Die bei der Statusänderung aufgerufene Funktion soll nun prüfen, ob die Daten vollständig geladen wurden (myAjax.readyState==4) und dass bei der Übertragung via HTTP keine Fehler auftraten (myAjax.status==200). Wenn beides der Fall ist, wird der responseText vom Server (also dessen Antwort) in den DIV-Container output geschrieben:

 myAjax.onreadystatechange=function(){
  if (myAjax.readyState==4 && myAjax.status==200){
   document.getElementById("output").innerHTML=myAjax.responseText;
  }
 };

Das readyState-Attribut kann folgende Werte annehmen:

0 - Es wurde noch nichts gesendet bzw. empfangen.
1 - Die Verbindung zum Server wurde hergestellt, es wurden aber noch nicht alle Daten übertragen.
2 - Alle Daten wurden zum Server übertragen.
3 - Eine Antwort vom Server wird zur Zeit empfangen
4 - Alle Daten vom Server wurden empfangen.

Request absenden

Nachdem wir festgelegt haben, was der Browser mit der Antwort des Servers macht, können wir eine Anfrage an den Server senden. Dazu rufen wir die Methode open auf, welche bis zu 5 Argumente erwartet, wobei die letzten 3 Argumente nicht zwingend erforderlich sind:

Art der Datenübertragung via HTTP (in unserem Beispiel: 'GET'):
- 'GET' (Datei anfordern) oder
- 'POST' (Datei anfordern und Formulareingaben senden)
Die URL der Zieldatei (in unserem Beispiel: 'datum.php')
Soll das Skript pausiert werden, oder weiterlaufen, solange die Anfrage läuft (Boolean)? Hier sollte 'true' stehen (Skript wird nicht pausiert), da wir ja einen Eventhandler definiert haben (onreadystatechange), der aktiv wird, wenn sich der Status der Abfrage ändert.
Benutzername für die HTTP-Anfrage (wird nur selten benötigt)
Passwort für die HTTP-Anfrage (wird nur selten benötigt; Achtung: Sollte hier ein Passwort stehen, ist es für jeden Nutzer einer Website beim Betrachten des Quellcodes sichtbar!)

Mit der 'send'.Methode wird die Anfrage schließlich versendet:

  myAjax.open("GET","datum.php",true);
  myAjax.send();

Parameter übergeben

Das übermitteln von Parametern ist mit GET am einfachsten. Hierzu werden diese einfach an die URL in der open-Methode angehängt. Bsp:

 myAjax.open("GET","registrierung.php?name=Max&nachname=Mustermann",true);

PHP

Das serverseitige Programm können Sie in jeder beliebigen Sprache schreiben, sein Output muss nur ein HTML-Fragment sein. Hier eine PHP-Version des Programmes ('datum.php'):

<?php
   echo "Jetzt ist es " . date("r");
?>

Das fertige Projekt

Die fertige Website sieht nun folgendermaßen aus:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
 <title>Wikibooks-Ajax-Tutorial</title>
 <script type="text/javascript">

  function hol_datum(){
   if (window.XMLHttpRequest){
    myAjax = new XMLHttpRequest();
   }else{
    //Dieser Code wird als Fallback für den IE5 und IE6 benötigt, da diese die obrige Schreibweise nicht unterstützen.
    myAjax = new ActiveXObject("Microsoft.XMLHTTP");
   }

   myAjax.onreadystatechange=function(){
    if (myAjax.readyState==4 && myAjax.status==200){
     document.getElementById("output").innerHTML=myAjax.responseText;
    }
   };

   myAjax.open("GET","datum.php",true);
   myAjax.send();
  }

 </script>
</head>
<body>
 <input type="button" value="tu ajax" onClick="hol_datum()"><br>
 <div style="width:400px; border: 1px black solid;" id="output">.... noch nix ....</div>
</body>
</html>

Übungsprojekt

Erstellen Sie ein JavaScript-Programm, das bei Laden der Seite (einmal) aufgerufen wird, und Browsernamen, Browserversion und Bildschirmgröße per AJAX an den Server meldet. Dort sollen die Daten in einer Log-Datei gespeichert werden. So können Sie eine Statistik über die Browser Ihrer LeserInnen führen.

Links

Quick Guide to Prototype (Englisch)
Einführung in Ajax mit vielen Beispielen auf w3schools.com (Englisch)
Einführung in Ajax auf HTML-World.de

Zurück zu Google Maps verwenden |

Hoch zu AJAX |

Vor zu Fehlerbehandlung