AJAX3 : Die Entdeckung der Leichtigkeit

Aus modernen Web-Anwendungen ist die  AJAX-Technik  inzwischen nicht mehr wegzudenken. Es gibt aber einen Pferdefuß: Man muß in mindestens vier Sprachen reden, und in jeder davon über andere Themen: 1. HTML - ohne das geht ja einfach nichts im Web, denn was der Endnutzer sieht, da hat immer HTML die Finger drin. Untrennbar dazu gehört heute CSS, wenn man ein flexibles, pflegeleichtes Erscheinungsbild will. 2. JavaScript für den Browser: Das ist das J in AJAX. Die dynamischen Vorgänge, um die es bei AJAX geht, sind auf Programme angewiesen, die im Browser ablaufen, und dafür gibt es nichts anderes als JavaScript. (Na gut, Java täte es auch, aber wenn sie fragen, welches von beiden leichter zu lernen und schneller anzuwenden ist ...) Nebenbei: Das X am Ende von AJAX steht für XML, denn man dachte zuerst, daß XML dabei was bringen könnte. Es geht aber sehr gut ohne. 3. Eine Skriptsprache auf dem WebServer. In Betracht kommen PHP, Perl, Python und ASP. Wir empfehlen PHP. Damit muß man dem Server sagen, was zu tun ist. Denn AJAX fragt immer unter der Oberfläche vom Server was ab. Das geht so, daß JavaScript Aufträge sendet an ein PHP-Skript im Server, und dieses schickt dann Ergebnisdaten an den Browser zurück, die am Ende JavaScript in die HTML-Seite einfügt. 4. Eine Datenbanksprache. Im Internet ist das meistens SQL (i.d.R. in PHP eingebettet, das ändert daran aber nichts). Bei allegro-Anwendungen ist es FLEX, und zwar in der avanti-Variante. Man formuliert damit, was für Daten man der Datenbank entnehmen möchte und wie man sie manipulieren und ausgeben will. Was PHP eigentlich tut, das ist nur, dem avanti eine in FLEX geschriebene Jobdatei zu geben und die Resultate umgehend wieder an JavaScript zu senden. In den frühen Web-Anwendungen kam noch fünftens und erschwerend hinzu, daß man sich mit der Exportsprache auskennen mußte. Dieser Umstand ist inzwischen so gut wie entfallen, es kommen höchstens ein paar fertige und allgemeingültige Parameterdateien zum Einsatz, an denen man nichts tun muß. Die vier Sprachen haben allesamt, wie "natürliche" Sprachen, ihre Eigenheiten und Komplexitäten. Das Entwickeln, das Testen, das Fehlersuchen und das spätere Ändern und Erweitern von Web-Anwendungen sind deswegen alles andere als ein Zuckerschlecken, sondern nichts für schwache Nerven. Deshalb sind längst zahlreiche Toolkits, Frameworks und Entwicklungsumgebungen entstanden, die das Erstellen von Web-Anwendungen kinderleicht machen sollen. Leider neigen solche Hilfsmittel unweigerlich zu Opulenz und Überfrachtung, d.h. sie verlagern den Lernaufwand nur, statt ihn im Ganzen zu reduzieren, und es leidet mitunter auch die Effizienz und Geschwindigkeit wegen des unsichtbaren "Overhead". Diesen Ärger fühlbar abzumildern war ein Anliegen der allegro-Entwicklung: Die ganze Sache sollte entschieden leichter zu handhaben sein. Die neue Lösung AJAX3 halbiert den Aufwand, und zwar sowohl den fürs Lernen wie den fürs Entwickeln und Pflegen von Anwendungen. Die Idee dahinter ist einfach genug: zwei Standard-Skripte wurden geschrieben, eins in JavaScript und eins in PHP, dank derer man nun in diesen zwei Sprachen selber nichts mehr zu sagen braucht. Unverzichtbar sind HTML und FLEX, ganz klar, nun aber braucht man wirklich nur noch diese zwei. FLEX kann vieles, was auch PHP tun könnte, daher braucht man PHP nur für die Kommunikation zu verwenden, und diese Aufgaben haben wir standardisiert. Um die neue Methodik zu nutzen, sind in HTML nur einige wenige, sehr einfache und in keiner Weise einengende Regeln einzuhalten. Ansonsten ist HTML+CSS in vollem Umfang anwendbar. Alles andere wird in FLEX gemacht. Wer zudem JavaScript schon gut kennt, kann zwanglos damit auch weiterhin eigene Oberflächenfunktionen programmieren, z.B. Plausibilitätskontrollen u.ä. Zur Verdeutlichung hier ein Schema der Zusammenhänge. Um die Dinge mit grauem Hintergrund muß man sich nicht mehr kümmern: Welche Dateien und wohin damit? Die Standard-Skripte heißen ajax3.js und ajax3.php, sie benötigen keinerlei Anpassungen. Lediglich in einer  ajax3.ini  stellt man ein paar Grundwerte für die eigene Anwendung ein; es handelt sich um eine abgespeckte  av_ini.php. Man kopiert diese drei Dateien in jedes der Datenbank-PHPAC-Verzeichnisse des WebServers, also zu den schon vorhandenen PHP-Skripten. Auf dem DbDir oder ProgDir braucht man eine Kopie der utf.apr für die Konvertierung ASCII->UTF8.  Beispiel  1 für eine HTML-Datei mit Formular, die die neue Technik nutzt. Farbig hervorgehoben die Teile, auf die es ankommt.  Nur die wichtigen Dinge sind gezeigt, alles andere ist beliebig! <html><head> <script src="ajax3.js" language="JavaScript"></script> ...<body>  <form action="javascript:;">   Geben Sie etwas ein: <input name="Vuin">   <input type="hidden" name="JOB" value="hw">   <input type="hidden" name="DIV" value="reply">     <input value="Send" onclick="javascript:ajax3(this.form);" type="button">                 <!--  wenn Enter-Taste auch abschicken soll: type="submit"  --> </form> ... <div id="reply"> </div> ...</body> Beispiel  2 Handelt es sich um den einfacheren Fall, daß keine Nutzereingabe erforderlich ist, sondern nur ein Klick, kann der Vorgang auch in einen href-Aufruf eingebaut werden: (Achtung: Argument DIV= als letztes angeben)     <a href="javascript:ajax3('JOB=wewota&VuWe=20010911&DIV=wota');">Wochentag des Datums 20010911</a> Die JavaScript-Funktion  ajax3() in ajax3.js schluckt also beides. Weitere Beispiele, direkt zum Ausprobieren Was bedeutet und wie funktioniert das? Aktionen gehen meistens von einem Formular aus. Auf Attribute kann ein Formular ganz verzichten. Im Formular sind vier verschiedene Dinge wichtig:   1. Eingabe-Elemente, deren Werte dann in FLEX-Variablen zu übertragen sind. Die Namen der Variablen sind im name-Attribut anzugeben, und zwar immer in der Form  Vnnn, V_annn bzw. Vuxy - beliebig viele in einem Formular. Daraus werden dann in FLEX die Felder #nnn, #nnn$a bzw. #uxy. Im Beispiel ist es nur ein einziges Eingabefeld mit dem Namen Vuin, woraus demnach die #u-Variable #uin entsteht. Als Eingabe-Elemente können auch <textarea> und <select> zum Einsatz kommen und was es sonst noch in Formularen geben kann.   2. Die Angabe, welcher FLEX-Job auszuführen ist, um den Formularinhalt zu verarbeiten, hier also der FLEX hw.job     Stets in dieser Form    <input type="hidden" name="JOB" value="jobname">   3. Die Angabe, an welcher Stelle (d.h. <div>-Feld) das Ergebnis, d.h. der Output des FLEX-Jobs erscheinen soll: hier im <div>-Feld "reply".   Stets in dieser Form    <input type="hidden" name="DIV" value="div-id">   4. Dazu passend braucht's deshalb ein  <div id="reply">  mit dem in 3. gesetzten Namen. Und so könnte der komplette Job  hw.job  aussehen:   wri "Sie haben folgendes eingegeben: <b>" #uin "</b>" n wri "<br>Die Datenbank " D B " hat " t " Datens&auml;tze" n Das ist alles, die zweite Zeile ist sogar nur eine Zugabe, damit man sieht, daß auf die Datenbank zugegriffen werden kann. Der JOB ist so kurz, weil man sich um drei Dinge gar nicht kümmern muß: A. um die Herbeiholung und Belegung der Variablen: Das Transportieren der Inhalte vom Formular in den Job erledigen eben die Standard-Skripte. Im Beispiel: aus Vuin wird #uin. B. um den Rücktransport der Ergebnisse: Was der Job ausgibt, mittels write und export, erscheint von selbst im Feld reply.  Ansonsten bleibt die Seite unverändert, und das ist ja gerade der Punkt: Es muß keine weitere Seite neu geladen werden, sondern die AJAX-Technik läßt die gewünschten Angaben an einer dafür vorgesehenene Stelle in der aktuellen, ansonsten ungeänderten Seite erscheinen. C. Welche Datenbank eigentlich gemeint ist - das steht in ajax3.ini. In einer solchermaßen präparierten HTML-Datei kann man beliebig viele Formulare haben und ebenfalls beliebig viele, beliebig verteilte und beliebig formatierte <div>-Felder, in denen Ergebnisse erscheinen können. Zwei Formulare können auch dasselbe <div> ansteuern. Es funktioniert alles mit den Browsern Firefox, IE7/8 und Chrome. Und warum AJAX3? AJAX1 wäre das alte Konzept, bei dem man noch JavaScript und PHP beherrschen muß. AJAX2 würde zu stark nach Web 2.0 riechen, solche Andeutungen wirken inzwischen ermüdend. Also bleibt nur 3.