Vom Server lassen wir zunächst eine PHP-Datei (nennen wir sie z.B. index.php) ausliefern:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <title>Tabellensortierung</title> <script type="text/javascript" src="ajax.js"></script> <script type="text/javascript"> function ajax_user_sort(sort_field, sort_order, output_id) { if(!document.getElementById) return; if(sort_order != "asc" && sort_order != "desc") { document.getElementById(output_id).innerHTML = "<span class=\"errortext\">Ungültige Angabe zur Sortier-Richtung!</span>"; return; } script_url = "http://localhost/ajax-test/user_sort.php"; param_str = "?field=" + sort_field + "&order=" + sort_order; do_http_get_request("text", script_url + paramStr, output_id); } </script> </head> <body> <h1>Benutzer</h1> <div id="user_list"> <?php include("./user_sort.php"); ?> </div> </body> </html>
Das „Script“ besteht vorwiegend aus gewöhnlichem, statischem HTML-Code. Lediglich an einer Stelle im Code ist ein PHP-Bereich notiert. Dort wird das Script user_sort.php eingebunden. Im HTML-Kopfbereich wird die JavaScript-Dateien ajax.js (der Ajax-Kernel) eingebunden. In einem weiteren Scriptbereich ist JavaScript-Code zur Steuerung der Tabellensortierung notiert. Auf diesen Code werden wir später noch eingehen.
Im sichtbaren Bereich besteht das HTML-Dokument nur aus einer Überschrift und einem div-Bereich mit dem id-Namen user_list. Diesen id-Namen werden wir verwenden, um in den entsprechenden div-Bereich die sortierte Tabelle zu platzieren.
Bevor das HTML-Dokument an den aufrufenden Browser gesendet wird, wird auf dem Server der Inhalt des PHP-Bereichs (<?php … ?>) durch den HTML-Code ersetzt, den das mit include eingebundene PHP-Script user_sort.php erzeugt. Dieses Script gibt in jedem Fall die gewünschte Tabelle aus. Wenn es keine GET-Parameter vorfindet, die eine bestimmte Sortierung erzwingen, gibt es die Tabelle einfach in einer Default-Sortierung aus.