template

Index :: Javascript :: AJAX

AJAX (Asynchronous JavaScript and XML) stellt eine Methode dar, die es dem Browser (Client) ermöglicht, Daten vom Server anzufordern und diese dann in einer Javascript-Funktion entgegenzunehmen (anstatt die komplette Seite zu reloaden). Die empfangende Javascript-Funktion kann anschließend die Daten per DOM-Manipulation in die Seite einbauen.
Wahlweise können die Daten als Text oder als XML angefordert werden. Aus Performancegründen wird jedoch meist das Textformat (evtl. mit eingebetteten Trennzeichen) verwendet, weil XML einen nicht unerheblichen Struktur-Overhead besitzt.

Die zugrundeliegende Technologie, der HTTP-Request, existiert schon lange, weil sie zu der Basisfunktionalität eines jeden Internetbrowsers gehört. Aber erst seit die erforderlichen Objekte und Methoden im Rahmen von Javascript offengelegt wurden, können wir die vielfältigen Möglichkeiten dieser Technik nutzen; vor allem, um hochgradig dynamische Oberflächen zu entwickeln, wie man sie von den traditionellen, kompilierten Anwendungen gewohnt ist.
Ein Pluspunkt ist auch die asynchronene Ausführung des Requests. Dadurch kann der Benutzer auf der Seite weiterarbeiten, während die Serveranfrage läuft. Da für jedes Request-Objekt ein eigener Thread erzeugt wird, kann man hier sogar von echtem Multitasking sprechen; einem Feature, das sogar kompilierte Anwendungen nur selten vorzuweisen haben.

Nachdem das Clientskript ein HTTP-Request-Objekt erstellt hat, ist der allgemeine Ablauf ist wie folgt:
Optimale Einsatzgebiete für AJAX sind Seiten, auf denen im Hintergrund DB-Abfragen erfolgen müssen, ausgelöst entweder durch Benutzeraktionen (z.B. Formular mit dynamischen Listen/Combos) oder durch einen Timer (z.B. Chat-System).

Im Modul ajax.js werden alle relevanten Methoden (wie Initialisierung, Senden und Empfangen) und Eigenschaften des HTTP-Request-Objekts gekapselt.


Städteliste holen

Zunächst wird ein Serverskript (hier: answer.php) benötigt, das die Anfrage bearbeitet: es sollen alle Städte mit einer bestimmten Country-ID gesammelt und ausgegeben werden.
<php
include('glob.inc.php');
mysql_connect(DB_HOST, DB_USER, DB_PASS);
mysql_select_db(DB_NAME);

$id = $_POST['id']; $n = 0;
$result = mysql_query("SELECT TownName FROM towns WHERE CountryID=$id");
while ($row = mysql_fetch_row($result)) {
  if ($n++) echo ', '; // Trennzeichen
  echo $row[0];
}
?>
Im fragenden Skript befindet sich eine Javascript-Funktion, die als CallBack fungiert und den Antwort-String entgegennimmt sowie - im HTML-Code - ein Formular, in welchem per ComboBox ein Land gewählt werden kann. Bei Änderung des Landes wird per AJAX die jeweilige Städteliste angefordert und im Textfeld towns angezeigt.
Javascript im Header
<SCRIPT src='js/ajax.js' type='text/javascript'></SCRIPT><!-- Ext.Modul einbinden --> <SCRIPT type='text/javascript'> // Objekt erstellen, Serverskript und CallBack-Funktion definieren var ajax = new Ajax('answer.php', ajGetTowns); function ajReqTowns(id) { // Request auslösen ajax.Post('id='+id); } function ajGetTowns(s) { // Ajax-CallBack-Funktion document.f_sel.towns.value = s; } </SCRIPT>
Weiter unten, im BODY, das Formular:
<form name='f_sel'> Land <select size='1' onChange='ajReqTowns(this.value)'> <option value='0'></option> <option value='1'>Belgien</option> <option value='2'>Deutschland</option> <option value='3'>Frankreich</option> <option value='4'>&Ouml;sterreich</option> <option value='5'>Schweiz</option> </select><br> St&auml;dteliste: <input name='towns' value='' size='60' readonly><br> </form>

Index :: Javascript


template