HTTP-GET-Methode mit Javascript

Interaktives Senden & Empfangen

Anwendung der HTTP-GET-Methode mit Javascript

Zielgruppe sind StudentInnen und ambitionierte Informatik-Amateure
Für das Live-Beispiel sind keine Vorkenntnisse notwendig, zum Programmieren von Formularen genügen Grundkenntnisse von HTML, zum Empfang sind Kenntnisse von Javascript erforderlich.


◀   Zum interaktiven Senden von User-Daten wird ein HTML Formular-Element in einer einfachen statischen Mini-Webseite verwendet, die zur Demonstration links eingebettet ist.

Das Formular des Beispiels enthält ein Feld zur Text-Eingabe und ein Auswahl-Element (Radio-Buttons).
Probieren sie auch einen Text mit Umlauten, Leerzeichen oder Sonderzeichen, z.B.   Leere Zeichen,   plus+  und&,   Groß & grün,   a^2 + b^2,   αβγ,   1,23 €, ...

Das Formular wird mit einem HTML Button-Element abgesendet. Als Empfänger dient jene dynamische Webseite, die direkt unterhalb eingebettet ist.

Mit diesem Link wird der ↗ Quelltext der Sender-Webseite angezeigt: Die Programmierung eines Formulars zählt zu den Grundkenntnissen von HTML.


◀   Die links eingebettete Mini-Webseite dient zum Empfang der interaktiv eingegebenen Daten:

Als Nachweis des jeweiligen Lade-Vorgangs wird die aktuelle Zeit angezeigt.

Danach werden die rohen Empfangs-Daten angezeigt: Sie sind als speziell codierter Text in der Variablen QUERY_STRING enthalten. Das Empfänger-Programm muss die ↓ URL-Codierung vor der weiteren Verarbeitung rückgängig machen und den Text in seine Bestandteile zerloegen.

Es folgt eine Liste der decodierten GET‑Daten. Jede moderne Programmiersprache kann einen erhaltenen QUERY_STRING in einzelne GET‑Argumente aufspalten und dem Programm zur Verfügung stellen.

 Mit diesem Link wird die ↗ Empfänger-Seite in einem eigenen Browser-Tab geöffnet. Beachten sie die Adress-Zeile (URL) ihres Browsers: An ihr Ende ist der QUERY_STRING angefügt. Man kann ihn manuell ändern und danach die Seite mit der Return-Taste erneut anfordern..

Mit diesem Link wird der ↗ Quelltext der Empfangs-Webseite angezeigt.
Die Programmierung des GET-Empfangs erfordert fortgeschrittene Kenntnisse von Javascript.


Das Ziel dieses Live-Beispiels ist die Demonstration der HTTP-GET-Methode. Reale Empfangs-Programme haben andere Ziele, daher sehen deren Javascript-Programme anders aus.

Wikipedia: HTTP-GET, W3Schools: GET vs POST, SelfHTML: Werteübergabe mit Javascript

URL-Codierung des QUERY_STRINGs


Fortgeschrittene EntwicklerInnen sollten die Regeln der URL-Codierung jedoch kennen: Manchmal ist es notwendig, in Teile der Codierung oder Decodierung mit eigenen Programmen einzugreifen.



Es ist möglich, an das Ende der GET-Anforderung Text-Daten anzuhängen. Beispiel:
GET http://_server_adresse_/get_receive.html?txt=Hallo&rb1=red
Der Teil in roter Schrift enthält die GET-Daten und wird QUERY_STRNG genannt. Im Beispiel sind diese beiden GET-Argumente mit Name und Wert enthalten:
txt=Hallo
rb1=red



Beispiele für die URL-Codierung von Zeichen:
TextUTF-8 BytesURL-Code
2 Worte32 20 57 6F 72 74 852+Worte
a + b61 20 2B 20 62a+%2B+b
Grün47 72 C3 BC 6EGr%C3%BCn
αCE B1%CE%B1
E2 82 AC%E2%82%AC

Das erste und zweite Beispiel enthält Leerzeichen, die mit je 1 Plus-Zeichen codiert werden.

Das zweite Beispiel enthält sowohl Leerzeichen als auch ein 'echtes' + Zeichen, welches mit seinem Unicode %2B codiert wird.

Das dritte und vierte Beispiel enthält je 1 Sonderzeichen (Umlaut ü und das griechische α), die mit je 2 Byte codiert werden.

Das letzte Beispiel (€-Zeichen) wird mit 3 Byte UTF8-codiert und ergibt letztlich einen URL-Code aus 9 Zeichen.



Fertige Paare von Name=Wert werden voneinander durch & Zeichen getrennt, z.B.
txt=Hallo&rb1=red

Der gesamte QUERY_STRING ist nun fertig. Er sollte kein Leerzeichen enthalten und wird nach einem ? Fragezeichen an die Web-Adresse angehängt, z.B.
http://_server_adresse_/get_receive.html?txt=Hallo&rb1=red

HTML-Quelltext des Absenders

◀   Links wird der Quellext der einfachen statischen Webseiten-Datei get_send.html angezeigt.

▶   Mit diesem Link wird die ↗ Absender-Webseite in einem eigenen Browseer-Tab geladen.
▶  Mit diesem Link wird der ↗ Quelltext der Absender-Webseite in einem eigenen Browser-Tab angezeigt.

Das wesentliche Element ist ein HTML <form> Formular mit diesen Attributen:
  • name="f1" ist der (beliebige) Name des Formulars. Er wird zum Absenden verwendet.
  • method="get" bezeichnet die zu verwendende Methode (GET oder POST).
  • action gibt den Pfad zum Empfänger-Dokument an. Wenn sich diese Datei im gleichen Verzeichnis (Ordner) befindet, dann genügt (so wie hier) der Datei-Name.

Innerhalb des <form>-(Formular)-Elements sind zur Eingabe und Steuerung einige <input>-Elemente angeordnet.


Das Formular wird mit einem HTML <button>‑Element abgesendet.
Es soll beim Anklicken reagieren und erhält dazu das Attribut onclick
Als Wert dieses Attributs wird eine Javascript-Anweisung angegeben; In diesem Fall der Objekt-Pfad zum Formular und danach die Methode submit() zumn Absenden.


Man kann Formular-Daten mit Javascript → Lesen und/oder → Schreiben und Formulare programm-gesteuert absenden.

Sender und Empfänger sind voneinander unabhängig und nur durch das gemeinsam befolgte HTTP-GET-Protokoll verbunden. Man kann daher als Empfangs-Partner dieses Senders auch ein → PHP-Programm verwenden.

Eine besondere Anwendung ist die Angabe einer Javascript-Funktion mit dem action‑Attribut: In diesem Fall wird beim Absenden (onsubmit‑Ereignis) die angegebene Javascript-Funktion ausgeführt.
Eine typische Anwendung dieser Art ist die → Validierung = Prüfung und Korrektur der Formular-Daten vor dem Absenden.

HTML+Javascript-Quelltext des Empfängers


Fortgeschrittene EntwicklerInnen können aus dem Quelltext einige Tipps & Tricks entnehmen. Es wäre jedoch ein Fehler, die hier gezeigten Funktionen ohne Änderung für reale Aufgaben einzusetzen.


◀   Links wird der Quelltext der Datei get_receive$.html angezeigt.
Darin sind alle Javascript-Programme enthalten, um die erhaltenen GET-Argumente zu decodieren und die Ergebnisse Live auf der Empfangs-Mini-Webseite anzuzeigen.

▶  Mit diesem Link wird der ↗ Quelltext in einem eigenen Browser-Tab angezeigt.

Die Funktion do_onload() wird nach dem Laden des Dokuments automatisch ausgeführt. Sie steuert die wesentlichen Arbeiten: Anzeige des rohen QUERY_STRING, Decodierung und Anzeige aller GET-Variablen, Anzeige eines Beispiels der Verarbeitung.

Die Funktion get_query_string() liest die Eigenschaft href des location-Objekts = die Web-Adresse, mit welcher das Dokument angefordert wurde. Daraus wird mit einem Regulären Ausdruck der Text nach einem allfälligen ? Fragezeichen isoliert und an die globale Variable qs zugewiesen:
Diese enthält den rohen QUERY_STRING, der ausnahmsweise zur Erklärung in der Mini-Webseite angezeigt wird.

Die Funktion decode_get_arguments() zerlegt und decodiert den rohen QUERY_STRING. Dazu wird der Text zuerst an allen & Zeichen aufgespalten: Die Bruchstücke werden dem Array arga als Elemente zugewiesen.
Die for-Schleife wird für jedes Array-Element 1mal durchlaufen.
Jedes Array-Element besteht nun aus einem Text (String) der Form name=wert und wird daher an seinem = Zeichen nochmals aufgespalten.
Jede isolierte GET-Variable wird in einem eigenen HTML <li>-Listen-Element angezeigt.

Die Funktion demo() demonstriert eine einfache Möglichkeit, die empfangenen Daten zu verarbeiten:
Das Array der GET-Variablen wird gezielt nach 2 Variablen-Namen (txt,col) durchsucht.
Der Wert der Variablen GET['txt'] wird decodiert und in der Webseite angezeigt.
Der Wert der Variablen GET['col'] wird an die CSS-Eigenschaft color zugewiesen.
Beide Variablen werden hier zur Vereinfachung nicht überpr├╝ft (validiert).

Javascript-Funktionen für die Praxis


Am Empfänger werden die internen Details der GET-Methode weggelassen. Lediglich die Verarbeitung wird am gleichen einfachen Beispiel demonstriert.

Das Ziel dieses Beispiels ist es, realistische Javascript-Funktionen zum Empfang zu zeigen.

Die Funktionen sind allgemein gehalten und ausführlich kommentiert. Es sollte auch mit durchschnittlichen Kenntnissen von Javascript möglich sein, sie für eigene Zwecke zu adaptieren.




◀   Links wird der Quelltext der Empfangs-Datei receive.html angezeigt.

Die Funktion do_onload() wird nach dem Laden des Dokuments automatisch ausgeführt. Sie steuert die wesentlichen Arbeiten: Decodierung der GET-Variablen, Anzeige eines Beispiels der Verarbeitung.

Die Funktion get_arguments_decode() führt alle allgemeinen Arbeiten aus, die bei jedem Empfang von GET-Argumenten anfallen:
Der QUERY_STRING wird isoliert und von allen illegalen Zeichen gesäubert.
Die for-Schleife wird für jedes erhaltene GET-Argument durchlaufen.
Alle Namen werden in Kleinbuchstaben umgewandelt. Der Sender kann sie dann wahlweise mit großen oder kleinen Buchstaben angeben.
Wenn kein Wert angegeben ist, dann wird dafür ein leerer String eingesetzt.
Am Ende der for-Schleife wird gezielt nach den erwarteten Namen (hier: txt,col) gesucht.
Alle Werte sind vom Typ String: Auch Zahlen bestehen hier nur aus Ziffern-Zeichen.
Die Verarbeitung der Werte erfolgt nicht hier, sondern sauber getrennt in eigenen Funktionen (hier process_txt() und process_col() )

Die Farbe wird relativ einfach mit Funktion process_col() verarbeitet:
Die Eigenschaft length gibt die String-(Text)-Länge an. Ein leerer Wert wird hier ignoriert.
Mit Methode trim() werden führende und folgende Leerzeichen entfernt.
Wenn danach noch Text übrigbleibt, dann wird dieser als Wert an die globale Variable my_color zugewiesen. Man kann meist darauf verzichten, den Wert zu decodieren oder weiter zu prüfen, weil → CSS die Zuweisung einer falsch formulierten Farbe einfach ignoriert.

Der Text wird etwas aufwändiger mit Funktion process_txt() verarbeitet:
Ein leerer Text wird durch den Wert der Variablen default_text ersetzt.
Alle + Zeichen werden in Leerzeichen umgewandelt.
Alle Zeichen werden mit Methode decodeURIComponent() decodiert.
Führende und folgende Leerzeichen werden entfernt.
Der zuletzt verbleibende String wird an die globale Variable my_text zugewiesen.




Fügen sie ein onload-Attribut in das HTML <body>-Element ein und lassen sie die Decodierung der GET-Argumente von der onload-Handler-Funktion ausführen.
Diese Methode wird bevorzugt, weil man mit den GET-Daten meist Änderungen in der Webseite durchführt - Das funktioniert jedoch erst nach dem vollständigen Laden des Dokuments.

Verwenden sie eine unspezifische Funktion zur Decodierung, z.B. die hier gezeigte Funktion get_arguments_decode()
Lagern sie alle speziellen Aufgaben in eigene Funktionen aus. So bleiben ihre Programme übersichtlich und lassen sich einfach ändern oder ergänzen.


Man kann den Wert weiter filtern und z.B. nur bestimmte Zeichen oder Worte zulassen.
Man kann die Text-Länge begrenzen.
Man sollte den Fall regeln,, wenn der Text leer ist.
Man muss nicht zwingend auf eine GET-Variable reagieren, sondern kann sie in betimmten Fällen auch ignorieren.



Es kann vorkommen, dass mit den parse-Methoden kein Zahlenwert (NaN) gefunden wurde. Man muss diesen Fall erkennen und verarbeiten:
if(isNaN(z)) {z=0;}
Die Reaktion z=0 ist hier nur ein Platzhalter - Es hängt von der Aufgabe ab, was in diesem Fall passieren soll.

Zahlenwerte werden fast immer begrenzt: Man muss festlegen, was beim Unter- oder Überschreiten der Grenzwerte passieren soll, z.B.
if(z>100) {z=100;}
else if(z<0) {z=0;};

Vergleich Javascript ⇔ PHP


PHP

PHP ist derzeit die meist verwendete Programmiersprache. Daran haben vor allem Content Management Systeme (CMS) einen großen Anteil.

Man verwendet folgerichtig auch für Empfang und Decodierung von GET-Variablen meistens → PHP.
Diese Technologie ist bekannt und etabliert und daher auch kostengünstig und vergleichsweise sicher (Man kennt die häufigsten Fehler bereits).

Wenn man allerdings die dazu geeigneten Programm-Teile auf Javascript überträgt, kann man die gesamte Performance deutlich steigern.
Wer die Möglichkeiten kennt und beherrscht, kann die Vorteile nutzen.


PHP wird am Server-PC ausgeführt.
Dort steht zwar meistens viel Leistung zur Verfügung, diese wird jedoch auf alle Anforderungen aller Clients aufgeteilt.


Bei jeder einzelnen Anforderung jedes Clients muss am Server ein Programm ausgeführt werden.


Wenn man die gleiche dynamische Webseite mehrmals mit verschiedenen Vorgaben anfordert, dann reagiert PHP wesentlich langsamer und belastet den Server mit jeder einzelnen Anforderung jedes Clients.

Begründung: Bei wiederholter interaktiver Anforderung muss der Server jedesmal ein Programm ausführen. Das belastet und verlangsamt den Server erheblich.
Aus Client-Sicht wird die meiste Zeit allerdings durch die jedesmal anfallende Transport-Zeit verbraucht, die meist um mehrere Größenordnungen (!) über der Rechenzeit liegt.
Ein Proxy-Server bringt keine Vorteile. Man muss oft sogar zusätzliche Tricks aufwenden um zu verhindern, dass ein Proxy die Dateien speichert.


Die unmittelbare Reaktion auf jedes onchange-Ereignis ist technisch möglich, jedoch nicht empfehlenswert, weil der Server damit vielfach mehr belastet wird.
Man sendet besser nur komplett ausgefüllte Formulare und muss bei Eingabe-Fehlern (und bei schlechter PHP-Programmierung) oft viele Felder erneut eintragen.


PHP hat besonders einfachen Zugriff auf alle Resourcen des Servers, z.B. auf eine Datenbank. Das zählt zu den Kern-Kompetenzen eines Servers.
Reale PHP-Programme gehen jedoch meist weit darüber hinaus und erstellen umfangreiche Teile von Webseiten (z.B. Tabellen) oder Grafik. Solche Arbeiten sollte man besser vom Server auf den Client übertragen.


PHP-Programme sind für Clients nicht zugänglich:
Das geistige Eigentum der Programmierung ist damit gut geschützt.
Damit werden allerdings stümperhafte Fehler wesentlich häufiger verborgen als geniale Programme.


PHP-Programme sind für Clients nicht manipulierbar.
Das ist ein wesentlicher Gewinn an Sicherheit, z.B. gegenüber leicht manipulierbaren Tabellen-Kalkulations-Programmen, die in vielen Betrieben für Routine-Berechnungen eingesetzt und manchmal sogar als Datenbank-Ersatz missbraucht werden.


PHP-Entwicklung ist vergleichsweise billig.
Es gibt viele EntwicklerInnen mit fortgeschrittenen PHP-Kenntnissen.
Das hat allerdings auch Grenzen: Es gibt nur wenige EntwicklerInnen, die moderne Objekt-orientierte Methoden mit PHP programmieren können.


PHP steht hier stellvertretend für alle anderen am Server ausgeführten Programme, z.B. auch mit den Programmiersprachen C/C++, Java, Perl, Python, ...

Einzig → C/C++ unterscheidet sich in einigen Punkten: Die Entwicklung ist teurer, die Sicherheit jedoch größer, weil sich am Server überhaupt kein Quelltext befindet. Die größere Geschwindigkeit ist kaum nutzbar, weil der Transport der dynamischen Produkte meist um Größenordnungen mehr Zeit kostet als deren Erzeugung.