9.5 Daten behalten  
Im vorangegangenen Kapitel haben Sie gesehen, wie man Daten in Cookies speichern kann und somit beispielsweise einen JavaScript-Warenkorb ohne Frames realisieren kann. Der Nachteil wurde auch nicht verschwiegen: Während die meisten Benutzer JavaScript nicht deaktivieren, schalten viele User die Verwendung von Cookies aus, natürlich auch bedingt durch Horrormeldungen in der Presse. Es gibt jedoch auch Möglichkeiten, ohne Cookies Daten von einer HTML-Seite in die nächste zu übernehmen. Eine der Alternativen besteht in der Verwendung von Frames und in der Datenspeicherung in einem davon; hier sei auf Kapitel 10 verwiesen. In diesem Abschnitt wird eine weitere Möglichkeit vorgestellt.
Ein virtueller Geschäftsmann will den Besuchern seiner Website Bücher in elektronischer Form zum Download anbieten. Er hat eine ganze Reihe davon, und so soll der Benutzer in einem Formular die für ihn interessanten Programme auswählen können. Nach dem Absenden des Formulars erhält er Links auf die ausgewählten Programme. Bevor Sie das Beispiel anpassen und einsetzen, sollten Sie allerdings etwaige Copyright-Fragen klären.
9.5.1 Das Eingabeformular 
Das Formular selbst ist schnell erstellt; als zusätzlicher Bonus werden dem Benutzer zu jedem Programm Hintergrundinformationen zu jedem Produkt in einem neuen Fenster angezeigt. Wie das prinzipiell funktioniert, wurde schon in Kapitel 8 gezeigt. Beachten Sie im Folgenden, dass jeder Checkbox konsistent das value-Attribut "on" zugewiesen worden ist. Der Sinn dieser Maßnahme wird weiter unten klar.
Hier klicken, um das Bild zu Vergrößern
Abbildung 9.6 Das HTML-Formular
<html>
<head>
<title>Bücher-Download</title>
<script type="text/javascript"><!--
function hilfe(seite) {
window.open(seite,
"hilfefenster","height=300,width=400");
}
//--></script>
</head>
<body>
<h1>Wählen Sie hier Ihre Bücher aus!</h1>
<form method="get" action="download.html">
<input type="checkbox" name="sommer" value="on" />
<a href="javascript:hilfe('sommer.html')">
Sommernachtstraum</a><br />
<input type="checkbox" name="othello" value="on" />
<a href="javascript:hilfe('othello.html')">Othello</a>
<br />
<input type="checkbox" name="venedig" value="on" />
<a href="javascript:hilfe('venedig.html')">Der
Kaufmann von Venedig</a><br />
...<br />
<input type="submit" value="Zum Download" />
</form>
</body>
</html>
9.5.2 Die Ausgabeseite
Wenn Sie das Formular auf der vorangegangenen Seite genauer betrachtet haben, wird Ihnen folgende Zeile nicht entgangen sein:
<form method="get" action="download.html">
Zum einen ist der Wert des action-Attributs ungewöhnlich – seit wann übergibt man Formularwerte an eine HTML-Seite? Zum anderen ist method auf "get" gesetzt. Dazu ein kleiner Exkurs: Mit method wird die Versendemethode des Formulars angegeben. Standardmäßig – also auch, wenn nichts angegeben wird – wird die Methode GET verwendet, doch häufiger ist POST. In letzterem Fall werden die Formulareingaben im Inhalt der Anforderung, also nach dem HTTP-Header versandt. Die entsprechende HTTP-Anforderung des Webbrowsers an den Webserver sieht ungefähr folgendermaßen aus:
POST /download.html HTTP/1.1
Content-type: application/x-www-form-urlencoded
Accept: text/plain
Content-length: 21
othello=on&venedig=on
Sie sehen, dass die einzelnen (angekreuzten) Checkboxen im Formular name=value übergeben und voneinander mit dem kaufmännischen Und (&) getrennt werden.
Wenn wie im obigen Beispiel die Methode GET verwendet wird, sieht die Sache anders aus: Hier werden nämlich die Formulardaten als Teil der URL übergeben. Es würde folgende Seite aufgerufen werden:
download.html?othello=on&venedig=on
Diese Daten kann man mit JavaScript abfragen. Wie Sie sich vielleicht erinnern, erhält man mit location.search den Teil der URL ab dem Fragezeichen, in diesem Fall also ?othello=on&venedig=on. Mit JavaScript können diese Daten zerlegt werden, um die Ausgabeseite zu generieren.
Um die ganze Sache ein wenig zu vereinfachen, gehen wir davon aus, dass alle Bücher im Verzeichnis download liegen, die Dateiendung .zip haben und dass sich der Teil vor der Endung aus dem name-Attribut der zugehörigen Checkbox ergibt. Der Programmierer muss also nur noch folgende Aufgaben erledigen:
 |
Er muss die Eigenschaft location.search auslesen und das erste Zeichen (das Fragezeichen) abschneiden. |
| |
Er muss die übrig bleibende Zeichenkette an den kaufmännischen Unds aufteilen. Die einzelnen Teile haben dann den Aufbau buchname=on, und wenn man das =on entfernt, hat man den Dateinamen ohne die Endung. |
Man kann den Algorithmus ein wenig vereinfachen, indem man einfach nach dem nächsten Vorkommen von & sucht sowie nach dem nächsten Vorkommen von =on und dann die Zeichenkette dazwischen betrachtet. Die Zeichenkette =on kann übrigens an keiner anderen Stelle (also zum Beispiel links vom Gleichheitszeichen) in der URL erscheinen. Der Grund dafür ist, dass Sonderzeichen in ein URL-konformes, hexadezimales Format umgewandelt werden. Aus einem Leerzeichen wird %20, und aus einem Gleichheitszeichen wird %3D. 3D ist nämlich die hexadezimale Darstellung der Dezimalzahl 62, und im ASCII-Zeichensatz hat das Gleichheitszeichen den Code 62. Der ASCII-Code des Leerzeichens ist 32, und die hexadezimale Darstellung ist 20. Die Umwandlung in dieses URL-Format geschieht automatisch; die Rückverwandlung erfolgt mit der JavaScript-Funktion unescape(). So liefert beispielsweise unescape("%3D") das Ergebnis "=" zurück. Die Umwandlung ist im Übrigen auch mit JavaScript möglich, escape("=") liefert "%3D".
Der Internet Explorer ab 5.5 bietet hierzu übrigens ein paar neue Funktionen an, die eine URI (Unified Ressource Identificator, eine Art Obermenge von URL) erzeugen können. Die Funktion encodeURI() wandelt den übergebenen Parameter in eine URL um, also liefert beispielsweise encodeURI("meine Webseite.html#oben") als Ergebnis meine%20Webseite.html#oben zurück. Sie sehen hier, dass das Doppelkreuz als Abtrennungszeichen für einen HTML-Anker interpretiert worden ist, also insbesondere nicht in die hexadezimale Form %23 umgewandelt wurde. Wenn Sie auch das möchten (beispielsweise, wenn Sie die obige URL als Parameter an ein CGI-Skript übergeben möchten), müssen Sie encodeURIComponent() verwenden. Dies liefert das gewünschte Ergebnis: encodeURIComponent("meine Webseite.html#oben") gibt meine%20 Webseite.html%23oben zurück.
Die entsprechenden Funktionen, die eine codierte URL wieder entschlüsseln, heißen decodeURI() und decodeURIComponent(). Und wie erwartet gibt decodeURI("meine%20Webseite.html#oben") als Ergebnis meine-Webseite.html#oben zurück, decodeURIComponent("meine%20Webseite .html%23oben") liefert ebenfalls meine Webseite.html#oben.
Aus den viel zitierten Gründen der Abwärtskompatibilität müssen Sie jedoch noch eine ganze Weile auf den Einsatz dieser Funktionen verzichten, wenn Sie möglichst viele Browser unterstützen wollen.
Zurück zur Aufgabenstellung: Der folgende Code (zu speichern als download.html) liest die übergebenen Daten aus und generiert die Ausgabeseite.
<html>
<head>
<title>Download Seite 2</title>
<script type="text/javascript"><!--
function tag(s) {
return("<" + s + ">");
}
function ausgabe() {
var ls = location.search;
var txt = (ls.length>1) ? "Sie können die Bücher nun
herunterladen" : "Keine Bücher ausgewählt";
document.write(txt + tag("br"));
if (ls.length<=1) { //Funktion verlassen, falls
//nichts ausgewählt wurde
return false;
}
ls = "&" + ls.substring(1, ls.length);
//Fragezeichen entfernen, "&" vorne anhängen
var pos = 0; //aktuelle Suchposition in
location.search
while (pos == 0 || ls.indexOf("&", pos) != –1) {
start = ls.indexOf("&", pos) + 1;
ende = ls.indexOf("=on", pos);
buch = unescape(ls.substring(start, ende));
document.write(tag("a href='download/" + buch
+ ".zip'"));
document.write(buch);
document.write(tag("/a")+tag("br"));
pos = ende + 2;
}
}
//--></script>
</head>
<body>
<h1>Bücher-Download</h1>
<script type="text/javascript"><!--
ausgabe();
//--></script>
<noscript>
Ihr Browser unterstützt kein JavaScript!
</noscript>
</body>
</html>
Hier klicken, um das Bild zu Vergrößern
Abbildung 9.7 Die Download-Seite
|
