Rheinwerk Computing < openbook > Rheinwerk Computing - Professionelle Bücher. Auch für Einsteiger.
Professionelle Bücher. Auch für Einsteiger.

 <<   zurück
JavaScript und AJAX von Christian Wenz
Das umfassende Handbuch
Buch: JavaScript und AJAX

JavaScript und AJAX
839 S., mit DVD, 39,90 Euro
Rheinwerk Computing
ISBN 3-89842-859-1
gp Kapitel 9 Formulare
  gp 9.1 Überprüfung auf Vollständigkeit
    gp 9.1.1 Allgemeiner Aufbau
    gp 9.1.2 Texteingabefelder
    gp 9.1.3 Radiobuttons
    gp 9.1.4 Checkboxen
    gp 9.1.5 Auswahllisten
    gp 9.1.6 Fehlermeldung ausgeben
    gp 9.1.7 Konstruktive Vorschläge
  gp 9.2 Automatische Überprüfung
    gp 9.2.1 Texteingabefelder
    gp 9.2.2 Radiobuttons
    gp 9.2.3 Checkboxen
    gp 9.2.4 Auswahllisten
    gp 9.2.5 Zusammenfassung
  gp 9.3 Anwendungsmöglichkeiten für Formulare
    gp 9.3.1 Währungsrechner
    gp 9.3.2 Währungsrechner, Teil 2
    gp 9.3.3 Formularfelder für die Textausgabe nutzen
    gp 9.3.4 Navigation mit Auswahllisten
  gp 9.4 Anwendungsbeispiel: Fensteroptionen
  gp 9.5 Daten behalten
    gp 9.5.1 Das Eingabeformular
    gp 9.5.2 Die Ausgabeseite
  gp 9.6 Dynamische Auswahllisten
    gp 9.6.1 Ein erster Ansatz
    gp 9.6.2 Ein fortgeschrittener Ansatz
  gp 9.7 Überprüfungsfunktionen
    gp 9.7.1 Ganze Zahlenwerte
    gp 9.7.2 Dezimalzahlen
    gp 9.7.3 Telefonnummern
    gp 9.7.4 E-Mail-Adressen
    gp 9.7.5 In Zahlenwerte umwandeln
  gp 9.8 Reguläre Ausdrücke
    gp 9.8.1 Kurzeinführung
    gp 9.8.2 Ein Objekt erzeugen
    gp 9.8.3 Mit dem Objekt arbeiten


Rheinwerk Computing

9.5 Daten behalten  downtop

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.


Rheinwerk Computing

9.5.1 Das Eingabeformular  downtop

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.

Abbildung
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>

Rheinwerk Computing

9.5.2 Die Ausgabeseite  toptop

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:

gp  Er muss die Eigenschaft location.search auslesen und das erste Zeichen (das Fragezeichen) abschneiden.
gp  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>

Abbildung
Hier klicken, um das Bild zu Vergrößern

Abbildung 9.7     Die Download-Seite

 <<   zurück
  
  Zum Rheinwerk-Shop
Neuauflage: JavaScript
Neuauflage: JavaScript
bestellen
 Ihre Meinung?
Wie hat Ihnen das Openbook gefallen?
Ihre Meinung

 Buchtipps
Zum Rheinwerk-Shop: jQuery






 jQuery


Zum Rheinwerk-Shop: Einstieg in JavaScript






 Einstieg in JavaScript


Zum Rheinwerk-Shop: Responsive Webdesign






 Responsive Webdesign


Zum Rheinwerk-Shop: Suchmaschinen-Optimierung






 Suchmaschinen-
 Optimierung


 Lieferung
Versandkostenfrei bestellen in Deutschland, Österreich und der Schweiz
InfoInfo




Copyright © Rheinwerk Verlag GmbH 2007
Für Ihren privaten Gebrauch dürfen Sie die Online-Version natürlich ausdrucken. Ansonsten unterliegt das Openbook denselben Bestimmungen, wie die gebundene Ausgabe: Das Werk einschließlich aller seiner Teile ist urheberrechtlich geschützt.
Alle Rechte vorbehalten einschließlich der Vervielfältigung, Übersetzung, Mikroverfilmung sowie Einspeicherung und Verarbeitung in elektronischen Systemen.


Nutzungsbestimmungen | Datenschutz | Impressum

Rheinwerk Verlag, Rheinwerkallee 4, 53227 Bonn, Tel.: 0228.42150.0, Fax 0228.42150.77, service@rheinwerk-verlag.de

Cookie-Einstellungen ändern