Rechteck-Berechnung mit AJAX



Selbst die Anpassung eines fertigen AJAX-Beispiels an andere Aufgaben ist für AnfängerInnen nicht empfehlenswert, weil man dazu die Funktion der einzelnen Programmteile verstehen sollte.

Rechtecks-Berechnung mit AJAX

Merkmale

Das Beispiel besteht aus 2 Teilen:
Die sichtbare Mini-Webseite enthält das User-Interface: Eingabe-Formular, Ergebnis-Tabelle und Objekt-Grafik.
Bei jeder Änderung der Eingabe-Daten wird ein AJAX-Auftrag an das (nicht sichtbare) Server-Programm gesendet.
Die Mini-Webseite bleibt geladen und ändert ihren Inhalt je nach den vom Server-Programm erhaltenen Ergebnis-Daten.

HTML


Alle HTML-Elemente, deren Werte durch neu berechnete Daten ersetzt werden sollen, müssen eindeutige id-Attribute erhalten.



Das <body>-Element erhält ein onload-Attribut. Damit wird festgelegt, dass die ↓ Javascript-Funktion do_onload() nach dem vollständigen Laden der Webseite ausgeführt wird.


Als Empfänger wird mit dem action-Attribut das ↓ Javascript-Programm eingabe() angegeben.
Das gleiche Programm wird bei jeder Änderung der Eingabe-Daten (Ereignis onchange) aufgerufen. Beachten sie die unterschiedliche Formulierung dieser beiden Attribute.
Ein Absende-Button ist nicht notwendig.
Man verwendet besser keine → SchiebeRegler zur Eingabe, weil sie während der Betätigung zahlreiche Events auslösen. - Jedes einzelne dieser Ereignisse würde einen eigenen AJAX-Auftrag absetzen. Das wäre nur mit großem Aufwand zu beherrschen und würde den Server stark belasten.



Die → Tabelle ist mit dem klassischen HTML <table>-Element programmiert (Alternative: → CSS-Tabelle).
Jedes darin enthaltene <tr>-Element erzeugt eine Zeile, jedes <td>-Element eine Spalte (Zelle).

Jede Ergebnis-Zelle muss ein eindeutiges id-Attribut enthalten.
Als Ergebnis-Wert wird anfangs ein ?-Zeichen eingesetzt.
Die zur Berechnung verwendeten Werte (Seiten a,b) sind ebenfalls in der Ergebnis-Tabelle enthalten: So kann man Missverständnisse (z.B. bei automatisch korrigierten Eingabe-Fehlern) verhindern.


Seit Version → HTML‑-5 kann man mit einem <svg>-Element Objekt-Grafik direkt (Inline) in den den HTML Quelltext einsetzen.
Die Grafik enthält lediglich 1 <rect>-Element (Rechteck). Dieses Element muss ein eindeutiges id-Attribut enthalten, damit man seine Eigenschaften Live mit Javascript ändern kann.
Details zu → SVG Objekt-Grafik

Javascript


Die Javascript-Programme werden am Client-PC (am eigenen Arbeits-PC) ausgeführt.



Einige Variablen (hier a,b) sind global (außerhalb der Funktionen) definiert und daher in allen Funktionen verwendbar. Wenn man nur mit 1 Rechteck arbeitet, ist das einfach und sinnvoll. Mit mehreren Rechtecken verwendet man besser eine Objekt-Klasse (→ Beispiel)

Die Funktion do_onload() legt sinnvolle Anfangs-Werte für die Rechteck-Seiten (a,b) fest, trägt diese Werte in die Eingabe-Felder ein und startet zuletzt die Funktion ajax_send(), welche die Ergebnis-Daten vom Server anfordert.

Das Programm ist geeignet, um zuverlässig die gewünschten Anfangswerte in Formular-Felder einzutragen. Andere Methoden tragen unter bestimmten Bedingungen andere Werte ein.
Die hier gezeigte Version der Funktion ist vereinfacht: Die im Beispiel verwendete Version setzt Zufallszahlen ein.


Die Funktion liest die Werte der Rechteck-Seiten aus den Eingabe-Feldern des Formulars und weist sie an die gleichnamigen globalen Variablen (a,b) zu.

Die hierarchische Syntax verwendet die Werte der name-Attribute (Formular f1,  Feld a) zum Adressieren der HTML-Elemente.

Die gelesenen Daten werden hier zur Vereinfachung nicht geprüft (→ validiert) sondern mit Funktion ajax_send() an das Server-Programm gesendet.
In der Praxis ist es sinnvoll, Eingabe-Daten zuerst zu kontrollieren und zu korrigieren, und nur garantiert brauchbare Daten an den Server zu senden.



Ein Objekt vom Typ XMLHttpRequest() wird erzeugt und an eine Variable (ajax_obj) zugewiesen.

Ein Timeout-Ereignis wird programmiert und an eine Variable (tevt) zugewiesen.

Die Funktion zum Empfang der Daten (beim Ereignis readystatechange des AJAX-Objekts) wird hier direkt (Inline) in den Quelltext eingesetzt:
Bei Empfang wird das Timeout-Ereignis gelöscht und der Ergebnis-Text an eine Variable (txt) zugewiesen.
Der Ergebnis-Text wurde vom hier verwendeten Server-Programm nach JSON‑Syntax formatiert. Er wird mit Funktion eval() in ein Objekt umgewandelt und an eine Variable (result_obj) zugewiesen.
Zuletzt wird die Funktion ausgabe() aufgerufen.

In diesem Beispiel braucht das Server-Programm die Daten der Rechteck-Seiten zur Berechnung. Sie werden nach HTTP-GET-Syntax an den Datei-Namen des Server-Programms angefügt und in der Variablen server zusammengesetzt

Mit Methode open() wird das AJAX-Objekt fertig gestellt und mit send() an das Server-Programm gesendet.



Beispiel: Für a=200 und b=100 sieht der Text des GET-Auftrags so aus:
rect_server.php?a=200&b=100

Beim Absenden muss man festlegen, dass der Antwort-Text nicht (wie in allen 'einfachen' Fällen) als HTML-Webseite anzuzeigen ist, sondern an eine Javascript-Funktion übergeben wird.
Links zur HTTP-GET-Methode: Wikipedia, → GET-Beispiel, → HTTP-Beispiel


Man müsste diese Programm-Zeile verwenden, um die Werte des Ergebnis-Objekts an eine Variable zuzuweisen:
result_obj = {d:223.6, U:600};
Das ist jedoch nicht möglich, weil sich der Text rechts vom = Zeichen nicht im Javascript-Quelltext sondern in der Variablen txt befindet.
Die Funktion eval() interpretiert das in () enthaltene Argument, d.h. sie führt eine Anweisung aus, die als Text vorliegt. So wird ein JSON-Text in eine Objekt-Variable (result_obj) 'übersetzt'.

Link: Wikipedia, Mozilla (MDN)
Achtung: Viele im Internet vorgestellte Beispiele verwenden eval() nicht sinnvoll sondern z.B. wie einen Taschenrechner (den man besser mit einfachen Standard-Methoden programmiert).



Die Werte der <input>-(Eingabe)-Felder werden durch die Eigenschaften (a,b) des Ergebnis-Objekts ersetzt. Die Formular-Elemente werden mit Hilfe ihrer name-Attribute adressiert.
Damit wird sichergestellt, dass nicht die eingegebenen sondern die tatsächlich zur Rechnung verwendeten Daten angezeigt werden.

Danach werden die Daten in die Ergebnis-Tabelle eingetragen. Die jeweilige <td>-Zelle wird mit ihrem id-Attribut adressiert. Der Wert der Objekt-Eigenschaft (hier d,U, im Beispiel weitere) wird an die Eigenschaft nodeValue des Child-Elements (= des enthaltenen Textes) zugewiesen: Damit wird der alte Text durch den neuen ersetzt.

Zuletzt wird die Grafik aktualisiert: Dazu werden nicht die Daten (=das <rect>-Element) ersetzt, sondern dessen Eigenschaften (width,height) geändert.
Das Grafik-Element wird mit seinem id-Attribut (rechteck) adressiert. Zum Ändern der Eigenschaften wird die Standard DOM-Methode setAttribute() verwendet.

PHP


Die AJAX-Technologie benutzt die Methoden des klassischen HTTP-Standards zur Übertragung des Auftrags (vom Client zum Server) und des Resultats (vom Server zum Client).


◀  Dies ist der Quelltext des PHP-Programms rect_server.php
Das Programm empfängt die Vorgabe-Daten (Rechteck-Seiten a,b),  berechnet die gewünschten Ergebnisse und sendet das Resultat als Text an den Client zurück.

Die Funktion validate() dient zur Prüfung und - wenn nötig - zur Korrektur der erhaltenen GET-Argumente. Ein allfälliges Dezimal-Komma wird in einen Komma-Punkt umgewandelt, ein negatives Vorzeichen entfernt.

In der ersten ausgeführten Anweisung wird mit Funktion header() der MIME-Typ der erzeugten Daten angekündigt.

Die GET-Argumente der Vorgaben werden decodiert und mit Funktion validate() geprüft.

Die Ergebnis-Daten werden berechnet und in der Variablen $json nach JSON-Syntax zusammengestellt.
Alle Zahlenwerte werden zwecks sauberer Formatiertung der Ergebnis-Tabelle mit 5 Dezimal-Stellen angegeben.

Zuletzt wird der erzeugte Text mit Funktion print ausgegeben.


So sieht ein typischer Text aus, den ein Javascript-Programm zur HTTP-GET-Anforderung sendet:
rect_server.php?a=200&b=100
So sieht ein typischer, vom PHP-Programm erzeugter Ausgabe-Text aus:
{a:200.00000, b:100.00000, d:223.60680, U:600.00000, A:20000.0, alpha:26.56505, beta:153.43495}
Das empfangende Javascript-Programm sollte diesen Text sinnvoll verarbeiten - In diesem Fall werden die Daten in einer Tabelle digital angezeigt und in einer Grafik dargestellt.

Résumé


Man braucht einen Webserver. AJAX lässt sich nicht ohne Netzwerk und Server (nur am eigenen Arbeits-PC) anwenden.

Es können nur Programme vom 'eigenen' Webserver angefordert werden, d.h. von jenem Server, welcher auch die Webseite geliefrt hat.


AJAX ist für die hier vorgestellte Aufgabe nicht sinnvoll, weil man die gleiche Funktionalität nur mit Javascript (ohne AJAX) viel einfacher programmieren kann (→ Beispiel)

Das Beispiel ist zur Demonstration der Technologie trotzdem aufschlussreich.


Die Typische Ausführungs-Zeit von einfachen Javascript-Programmen liegt bei einigen µs, diejenige von AJAX wegen der unvermeidlichen Transport-Zeiten typisch einige ms (im eigenen Intranet) bis zu Sekunden (mit langsamen Internet-Servern).