Websiteentwicklung: AJAX: Erstes Programm

Aus Wikibooks

Wechseln zu: Navigation, Suche

Websiteentwicklung

AJAX

Erstes Programm

Inhaltsverzeichnis

1 HTML
2 Javascript
3 PHP
4 Parameter übergeben
5 Übungsprojekt
6 Links

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.

[Bearbeiten] 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>

[Bearbeiten] Javascript

Als Javascript-Library wird Prototype verwendet, und im Head des Dokuments eingebunden:

 <script src="prototype.js" type="text/javascript"></script>

Die Funktion hol_datum setzt den AJAX-Request ab. Dafür wird ein neues Ajax.Request Objekt erzeugt. Dieses Objekt entstammt der prototype-Library. Beim Konstruktor werden zwei Argumente übergeben:

Eine Zeichenkette, diese enthält die URL des serverseitigen Programmes, in diesem Falle also datum.php
Ein Objekt mit weiteren Optionen. In diesem Falle wird das Objekt in JSON-Schreibweise angegeben, es hat zwei Eigenschaften:
- method mit dem Wert get legt die HTTP-Übertragungsmethode fest (könnte auch post sein)
- onComplete mit dem Wert zeige_datum legt die Funktion fest, die aufgerufen wird sobald die Antwort vom Server auf die AJAX-Anfrage angekommen sind.

function hol_datum() {
  var myAjax = new Ajax.Request(
    "datum.php",
    { method: 'get', onComplete: zeige_datum }
  );
}

Wichtig: Beim Angeben der onComplete-Funktion dürfen Sie keine Klammern schreiben! Das würde die Funktion sofort ausführen, nicht erst wenn die Daten vom Server da sind.

Einige Milli-Sekunden später, wenn die Antwort vom Server vorliegt, wird die Funktion zeige_datum aufgerufen. Die Funktion erhält als Parameter das XMLHTTPRequest Objekt das für die AJAX-Anfrage erzeugt wurde, und kann aus der responseText Eigenschaft des Objekt die Antwort des Servers auslesen.

In diesem Beispiel wird die Antwort des Servers einfach in die div mit der id output kopiert.

function zeige_datum( originalRequest ) {
   document.getElementById('output').innerHTML = originalRequest.responseText;
}

Prototype bietet noch eine praktische Abkürzung für die oft verwendete Funktion document.getElementByID, die Dollar-Funktion:

function zeige_datum( originalRequest ) {
   $('output').innerHTML = originalRequest.responseText;
}

[Bearbeiten] 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:

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

Das Zusammenspiel dieser Teile ergibt eine erste AJAX-Applikation.

[Bearbeiten] Parameter übergeben

Nun sollen beim AJAX-Aufruf Parameter an das Serverseitige Programm übergeben werden. Dazu bauen wir zwei checkboxes ein, mit denen man Datum und Uhrzeit separat bestellen kann:

Als Parameternamen wurden hier d für Datum und u für Uhrzeit gewählt:

  <input type="checkbox" name="d">Datum<br />
  <input type="checkbox" name="u">Uhrzeit

Beim Erzeugen des Ajax.Request Objekts sollen diese Parameter mit übergeben werden, die entsprechende Eigenschaft heißt parameters.

  var myAjax = new Ajax.Request(
            "datum_uhrzeit.php",
            {
                method: 'get', 
                parameters: 'u=On&d=On',
                onComplete: zeige_datum
            }
  );

Es hat natürlich keinen Sinn die Parameter wie im Code gezeigt fix anzugeben. Statt dessen sollen die aktuellen Werte der Checkboxen verwendet werden.

Auch dafür gibt es in Prototype eine praktische Hilfs-funktion. Dazu müssen die Eingabefelder aber in einen <form> Tag eingeschlossen werden:

 <form id="input">
        <input type="checkbox" name="d">Datum<br />
        <input type="checkbox" name="u">Uhrzeit<br />
        ...

Dann kann man die Parameter aus dem Formular mit Form.serialize auslesen:

  var myAjax = new Ajax.Request(
            "datum_uhrzeit.php",
            {
                method: 'get', 
                parameters: Form.serialize($('input')),
                onComplete: zeige_datum
            }
  );

[Bearbeiten] Ü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.