Hier wird anhand mehrerer Beispiele demonstriert, wie man mittels xmlHTTPRequest und eine Remote Procdedure Call (RPC) Anwendung implementieren kann, wenn man als Austauschformat das seit ein paar Jahren im JavaScript Bereich weitverbreitete JSON verwendet.
Die seit vielen Jahren fest in JavaScript realisierte Klasse xmlHTTPRequest erlaubt es, Daten im Hintergrund vom Server anzufordern und dann dynamisch in der Seite einzubblenden. Bei den typischen Anwendungen bleibt durch diese Technik die Seite stabil sichtbar, nur ein paar Datenfelder werden dynamisch aktislisiert. Das zu übertragende Datenvolumen ist natürlich auch geringer, da das stabile Layout der Seite nicht mehr übertragen werden muss.
1: | Einfache Skalare werden auch als Skalar kodiert, keine spezielle Syntax. Zeichenketten werden in doppelten Hochkomma eingeschlossen. Doppelten Hochkomma und dem Backslash wird als Escape ein Backslash \ vorgestellt. |
2: | Hier ein Beispiel eines einfachen Objektes, das in der üblichen Property Schreibweise obj.prop = val; definiert wurde. Sehr ähnlich ist auch die gleichwertige Array-Schreibweise obj[prop] = val;. Objekte werden durch geschweifte Klammern {} gekennzeichnet, innerhalb denen die Properties und Werte in einer Tag/Value Syntax enthalten sind. |
3: | Nun ein Beispiel eines einfachen Objektes, das in der üblichen Klammer {} Schreibweise obj = { prop : val }; definiert wird. Hier sieht man deutlich die Ähnlichkeit zum JSON Format und ältere Programme verwendeten sogar die JavaScript eval Methode, um JSON Strings wieder in Objekte |
4: | Beispiel eines einfachen Arrays, die im gegensatz zu Objekten mit eckigen Klammern [] kodiert werden. |
5: | Nun ein paar Besonderheiten zum Array. Es gibt im Gegensatz zu beispielweise PHP unter JavaScript keine keine assoziativen Arrays, auch wenn die Schreibweise myArr['test'] = 'wert'; das suggeriert. Man fügt hier lediglich dem zugrunde liegenden myArr-Objekt eine neue Property 'test' hinzu, die man auch abrufen kann. Aber beim JSON-kodieren des Array wird diese Property nicht kodiert. Ebenso berücksichtigt die Array-Längenfunktions myArr.length;die Properties nicht. |
6: | Als letztes Beispiel ein etwas komplexeres Objekt mit Unterobjekten, also eine Hierarchie. |
Hier kann man Session Parameter setzen, Eingabeparameter sind Name und Wert des Parameters. Danach kann man auf dem Server die ausgewählte Aktion wie Lesen, Löschen oder Setzen der Paramter erreichen. Rückgabe sind immer die Werte aller Session Parameter, egal welcher Key im Request gesetzt wurde. Wird eine falsche oder ungültige Aktion gewählt, dann kommt kein Fehler, sondern es wird ein Lesen durchgeführt. Geschütze vom System genutzte Variable können nicht geändert werden, es wird ein Fehler ausgegeben.
Sie können hier zwei Zahlen eingeben, das Dezimal Trennzeichen ist der Punkt. Dann werden für diese beiden Zahlen auf dem Server die vier Grundrechenarten durchgeführt und das Ergebnis wird hier angezeigt. Bei Division durch 0 gibt es keinen Fehler, statt dessen wird als Ergebnis NaN (Not a Number) zurück gegeben. Die Eingabe wird im Browser absichtlich nicht geprüft und korrigiert, gibt man keine Zahlen ein, so produziert der Server für Testzwecke einen Fehler.
Sie können hier eine beliebige URL eingeben und die Daten über xmlHTTPRequest abholen. Allerdings funktioniert das mit den standard Sicherheitseinstellungen nur, wenn man auf den Host zugreift, der auch diese Seite bereitgestellt hat. Im Internet findet man ein paar Tricks, wie man das eventuell aushebeln kann, aber das ist ja nicht das Ziel dieser einführenden Demo. Um auch HTML Quellcode darstellen zu können, haben wir die HTML Entities Sonderzeichen < und > durch die Entities < und > ersetzt.
Wir erlauben, dass man wahlweise JavaScript oder HTML eingibt und im Hintergrund auf den Server überträgt. Diese Daten werden in eine temporäre Datei geschrieben und dann in einem <iframe> ausgeführt. So kann man Webentwicklungen rasch testen, ohne die Testdaten speichern und in einem neuen Browserfenster anzeigen zu müssen.Zusätzlich wird ein Link zur Testdatei angelegt und angezeigt, man kann die Daten somit auch direkt im Browser anzeigen lassen.
Das Eingabefenster wird als Zeichenkette von JavaScript ausgewertet, Eingabe von \n entspricht also einem Zeilenvorschub. Will man den Backslash eingeben, dann muss man ihn als Escape-Zeichen natürlich verdoppeln.
Hier kann man mittels JavaScript Informationen in eine Log-Datei auf dem Server schreiben. Der Name der Log-Datei ist bei Nutzung dieser Schnittstelle natürlich hartkodiert, sonst könnte man je beliebige Dateien überschreiben. Im Test hier haben wir die Anzahl der möglichen Detailinformationen zu einem Ereignis auf 3 beschränkt. Zusätzlich fügt die Schnittstelle noch Daten aus der Sitzung wie Uhrzeit, IP-Adresse des Aufrufers hinzu. Wird der Geo-Lacator aktiviert, dann kann man versuchen, anhand der IP-Adresse noch den Standort des Besuchers zu ermitteln. Im Protokoll werden alle Informationen in einer Key/Value Syntax mit fester Spaltenbreite für den Key ausgegeben.
Die aufgezeichneten Basisdaten bestehen aus festen Basisdaten wie Ereignistyp, Uhrzeit, IP und URL des Aufrufers und Zusatzinformationen, die das Ereignis genauer beschreiben.