Professionelle Bücher. Auch für Einsteiger.

Inhaltsverzeichnis
1 Einleitung
2 Webbrowser
3 JavaScript einbauen
4 Programmieren mit JavaScript
5 Datum
6 Zufall
7 Browserinformationen
8 Fenster
9 Formulare
10 Frames und Iframes
11 Grafiken
12 Cookies
13 Objekte und Arrays
14 Ereignisbehandlung
15 Fehlerbehandlung
16 DOM
17 DHTML und CSS
18 AJAX
19 XML
20 Web Services
21 AJAX-Frameworks
22 Plugins
23 Multimedia
24 Java
25 Serverseitige Technologien
26 JavaScript goes .NET
27 Code schützen
28 Top Secret: Passwortschutz
29 Signierte Skripte
30 JavaScript und Sicherheit
31 Navigation
32 Warenkorb
33 JavaScript-Bibliotheken
34 Referenz
35 Quellen im Web
36 Die Zukunft von JavaScript
Index
Download: - ZIP, ca. 9,2 MB
Buch bestellen
Ihre Meinung?
<< zurück | Galileo Computing / <openbook> / JavaScript und AJAX | vor >>
JavaScript und AJAX von Christian Wenz Das umfassende Handbuch
JavaScript und AJAX 839 S., mit DVD, 39,90 Euro Galileo Computing ISBN 3-89842-859-1 |
| Kapitel 32 Warenkorb
|  | 32.1 Datenstruktur
|  | 32.2 Mit unsichtbaren Frames arbeiten
|  |  | 32.2.1 Warenkorb füllen
|  |  | 32.2.2 Artikel anzeigen
|  |  | 32.2.3 Warenkorb ändern
|  | 32.3 Mit Cookies arbeiten
|  |  | 32.3.1 Warenkorb füllen
|  |  | 32.3.2 Artikel anzeigen
|  |  | 32.3.3 Warenkorb ändern
|  | 32.4 Über die URL
|  |  | 32.4.1 Den Warenkorb füllen
|  |  | 32.4.2 Artikel anzeigen
|  |  | 32.4.3 Den Warenkorb ändern
|  | 32.5 Fazit
## 32.4 Über die URL Neben Cookies und JavaScript-Variablen in anderen Frames gibt es noch eine dritte Möglichkeit, Daten während mehrerer Sitzungen zu behalten: in der URL! Sie rufen also keine Datei irgendwas.html auf, sondern rufen irgendwas.html?daten im Browser auf und fragen per JavaScript ab, was hinter dem Fragezeichen alles angegeben worden ist. Diese Methode haben wir bereits bei der Auflistung der Produkte eingesetzt. Dort wurde in der URL der Name der Produktkategorie bzw. der Bestellnummer (bei der Einzelansicht) übergeben. Das Problem an dieser Lösung ist, dass die URL je nach Browser und Webserver eine enorme Länge hat: irgendeinen Wert zwischen 500 und 2000 Zeichen. Bei vielen Artikeln im Warenkorb könnte das zu einem echten Problem ausarten. Ein weiteres Problem entsteht durch den Internet Explorer, der beim Zugriff auf lokale HTML-Dateien in einigen Versionen die benötigte Eigenschaft location.search nicht zur Verfügung stellt. Hier müssen Sie unter Umständen einen lokalen Webserver installieren und mit diesem Server testen. Als Datenformat verwenden wir den Weg, den wir bereits bei der Cookie-Lösung implementiert hatten. Nur dürfen dieses Mal die Daten nicht in Cookies gespeichert werden, sondern müssen über die URL an die nächste Seite weitergeleitet werden. Dazu verwenden wir den Code aus den entsprechenden Cookie-Versionen, aber schreiben das Ergebnis nicht in einen Cookie, sondern liefern es zurück. Beim Auslesen der Daten wird ebenfalls nicht auf den Cookie zugegriffen, sondern auf die URL. Bei den Artikelübersichtsseiten wird in der URL die Bestellnummer oder der Kategoriename der Artikel übergeben. Hier müssen also besondere Vorkehrungen getroffen werden. Im Folgenden unterscheiden wir daher zwei Fälle:
| In der URL werden nur die Warenkorb-Daten übergeben. Dann werden diese einfach an den Dateinamen angehängt: datei.html?warendaten
| In der URL werden neben den Warenkorb-Daten auch noch weitere Daten wie etwa die Bestellnummer des anzuzeigenden Artikels übergeben. Dann werden diese beiden Daten durch ein kaufmännisches Und (&) getrennt: datei.html?anderedaten&warenkorbdaten
Damit lassen sich die Hilfsfunktionen – in Anlehnung an die entsprechenden Cookie-Funktionen – erstellen:
    var warenkorb_daten = warenkorb_laden_collection();

    function warenkorb_laden_collection() {
       var ls = location.search;
       if (ls.length > 1) {
          if (ls.indexOf("&") > –1) {
             var str = ls.substring(ls.indexOf("&") + 1,
                                    ls.length);
          } else {
             var str = ls.substring(1, ls.length);
          }
       }
       str = unescape(str);
       var temp = new Array();
       // Daten aus der URL in ein Array umwandeln
       if (str != "") {
          str = str.replace(/,/g, "\",\"");
          str = str.replace(/</g, "");
          str = str.replace(/>/g, "");
          str = "\"" + str + "\"";
          eval("temp = [" + str + "]");
       }
       // assoziatives Array erstellen
       var c = new Array();
       for (var i=0; i<temp.length; i+=2) {
          c[temp[i]] = temp[i+1];
       }
       // Array zurückgeben
       return c;
    }

    function warenkorb_lesen_collection(name) {
       return warenkorb_daten[name];
    }

    function warenkorb_speichern_collection()   {
       var temp = new Array();
       for (var e in warenkorb_daten) {
          temp[temp.length] = e;
          temp[temp.length] = warenkorb_daten[e];
       }

       return temp.toString();
    }

    function warenkorb_schreiben_collection(name, wert) {
       warenkorb_daten[name] = wert;
       warenkorb_speichern_collection();
    }
Der Rest gestaltet sich fast genauso wie bei der Cookie-Lösung. ### 32.4.1 Den Warenkorb füllen Die Funktionen für das Füllen des Warenkorbs müssen als Erstes angepasst werden:
    function warenkorb_hinzufuegen_url(nr, stueck) {
       var anzahl = warenkorb_lesen_collection(nr);
       anzahl = parseInt(anzahl); // in Integer umwandeln
       if (isNaN(anzahl)) {
          anzahl = 0;
       }
       anzahl += stueck;
       warenkorb_schreiben_collection(nr, anzahl);
    }

    function warenkorb_editieren_url(nr, stueck) {
       warenkorb_schreiben_collection(nr, stueck);
    }
Damit stehen nun die notwendigen Hilfsfunktionen zur Verfügung, die bei den Artikelseiten und auf der Warenkorb-Seite aufgerufen werden müssen. ### 32.4.2 Artikel anzeigen Zur Anzeige der einzelnen Artikel werden auch dieses Mal drei Dateien erstellt:
| eine Seite, auf der alle Kategorien in einer Übersicht angezeigt werden: kategorien_url.html
| eine Seite, auf der alle Artikel einer Kategorie angezeigt werden: artikel_gesamt_url.html
| eine Seite, auf der alle Informationen über einen Artikel angezeigt werden (und auf der auch bestellt werden kann): artikel_einzeln_url.html
Wir beginnen wieder mit der Übersicht über alle Kategorien. Der einzige Unterschied zur Cookie-Lösung ist folgender: Sollten schon Daten in der URL stehen (also schon Artikel im Warenkorb vorhanden sein), müssen diese bei jedem Link weiter übergeben werden.
    <html>
    <head>
    <title>Online-Shop</title>
    <script type="text/javascript" src="warenkorb.js"></script>
    <script type="text/javascript" src="artikel.js"></script>
    </head>
    <body>
    <h1>Willkommen im Online-Buch-Shop</h1>
    <p>Bitte w&auml;hlen Sie eine Kategorie!
    <ul>
    <script type="text/javascript"><!--
    for (var i=0; i<kategorie.length; i++) {
       document.write("<li\>");
       document.write("<a href=\"artikel_gesamt_url.html?");
       document.write(escape(kategorie[i].name));
       if (location.search.length > 0) {
          document.write("&" + location.search.substring(1,
                               location.search.length));
       }
       document.write("\"\>");
       document.write(kategorie[i].name);
       document.write("</a\></li\>");
    }
    //--></script>
    </ul>
    </p>
    </body>
    </html>
Im nächsten Schritt werden alle Artikel einer Kategorie angezeigt, und zwar in der Datei artikel_gesamt_url.html. Beachten Sie bei den Änderungen, dass die Daten in der URL auf jeden Fall weitergegeben werden müssen! Wenn Sie diesen Parameter an einer Stelle weglassen, sind damit die gesamten Bestellinformationen verloren.
    <html>
    <head>
    <title>Online-Shop</title>
    <script type="text/javascript" src="warenkorb.js"></script>
    <script type="text/javascript" src="artikel.js"></script>
    </head>
    <body>
    <h1>Willkommen im Online-Buch-Shop</h1>
    <p>Bitte w&auml;hlen Sie einen Artikel!
    <script type="text/javascript"><!--
    document.write("<ul\>");

    var ls = location.search;
    if (ls.length > 1) {
       if (ls.indexOf("&") > –1) {
          var name = ls.substring(1, ls.indexOf("&"));
          var daten = ls.substring(ls.indexOf("&")+1, ls.length);
       } else {
          var name = location.search.substring(1,
             location.search.length);
          var daten = "";
       }
       name = unescape(name);

       for (var i=0; i<kategorie.length; i++) {
          if (kategorie[i].name == name) {
             for (var j=0; j<kategorie[i].artikel.length; j++) {
                var a = kategorie[i].artikel[j];
                document.write("<li\>");
                document.write("<a href=\"artikel_einzeln_url.html?");
                document.write(escape(a.nr));
                if (daten != "") {
                   document.write("&" + daten);
                }
                document.write("\"\>");
                document.write(a.name);
                document.write("</a\></li\>");
             }
          }
       }
    }
    document.write("</ul\></p\><p\>");
    document.write("<a href=\"kategorien_url.html?" +
       escape(warenkorb_speichern_collection()) +
       "\"\>Zurück zur Übersicht </a\></p\><p\>");
    document.write("<a href=\"warenkorb_url.html?" +
       escape(warenkorb_speichern_collection()) +
       "\"\>Bestellung aufgeben</a\></p\>");
    //--></script>
    </body>
    </html>
Jetzt fehlt nur noch eine Datei: artikel_einzeln_url.html. Dort wird die Einzelansicht für den Artikel präsentiert. Ein wichtiges Element dieser Seite ist die Funktion hinzu(), die einen Artikel zum Warenkorb hinzufügt:
    function hinzu(f, nr) {
      if (f.elements["anzahl" + nr]) {
        var anzahl = f.elements["anzahl" + nr].value;
        anzahl = parseInt(anzahl); //Umwandlung in Int
        if (isNaN(anzahl)) {
          anzahl = 0;
        }
        warenkorb_hinzufuegen_url(nr, anzahl);
        alert("Artikel hinzugefügt!");
        location.search = "?" + escape(nr)
           + "&" + escape(warenkorb_speichern_collection());
       }
    }
Die Daten werden im Array warenkorb_daten gespeichert, das in der Seite definiert ist. Sie müssen lediglich bei allen Links den neuen Datenbestand weitergeben. Deswegen müssen Sie an jeden Link die entsprechenden Daten anfügen. Sie erhalten diese Daten, wie Sie bereits in den vorhergehenden Listings gesehen haben, über folgenden Funktionsaufruf:
    escape(warenkorb_speichern_collection())
Hier folgt der komplette Code der Seite:
    <html>
    <head>
    <title>Online-Shop</title>
    <script type="text/javascript" src="warenkorb.js"></script>
    <script type="text/javascript" src="artikel.js"></script>
    </head>
    <body>
    <h1>Willkommen im Online-Buch-Shop</h1>
    <p>Bitte geben Sie die St&uuml;ckzahl an!
    <script type="text/javascript"><!--
    function kategoriename(nr) {
       for (var i=0; i<kategorie.length; i++) {
          for (var j=0; j<kategorie[i].artikel.length; j++) {
             if (kategorie[i].artikel[j].nr == nr) {
                return kategorie[i].name;
             }
          }
       }
       return "";
    }

    function hinzu(f, nr) {
       if (f.elements["anzahl" + nr]) {
          var anzahl = f.elements["anzahl" + nr].value;
          anzahl = parseInt(anzahl); //Umwandlung in Int
          if (isNaN(anzahl)) {
             anzahl = 0;
          }
          warenkorb_hinzufuegen_url(nr, anzahl);
          alert("Artikel hinzugefügt!");
          location.search = "?" + escape(nr)
             + "&" + escape(warenkorb_speichern_collection());
       }
    }

    document.write("<ul\>");

    var ls = location.search;
    if (ls.length > 1) {
       if (ls.indexOf("&") > –1) {
          var nr = ls.substring(1, ls.indexOf("&"));
          var daten = ls.substring(ls.indexOf("&")+1, ls.length);
       } else {
          var nr = location.search.substring(1,
             location.search.length);
          var daten = "";
       }
       nr = unescape(nr);
       var name = kategoriename(nr);
       for (var i=0; i<kategorie.length; i++) {
          if (kategorie[i].name == name) {
             for (var j=0; j<kategorie[i].artikel.length; j++) {
                if (kategorie[i].artikel[j].nr == nr) {

                   var a = kategorie[i].artikel[j];
                   document.write("<h2\>" + a.name + "</h2\>");
                   document.write("<b\>" + a.kurz + "</b\>");
                   document.write("<img src=\"" + a.grafik +
                     "\" /\>");
                   document.write("<br\>" + a.lang + "<br\>");
                   document.write("<form\>");
                   document.write("<input type=\"text\" ");
                   document.write("name=\"anzahl" + nr + "\" ");
                   document.write("size=\"2\" value=\"1\" /\> ");
                   document.write(name + " ");
                   document.write(a.preis + "&euro; "); // Preis in €
                   document.write("<input type=\"button\" value=\"In
                     den Warenkorb\" ");
                   document.write("onclick=\
                     "javascript:hinzu(this.form, '" + nr + "')\" /\>
                     <br /\>");
                   document.write("</form\>");
                }
             }
          }
       }
       document.write("</ul\><a href=\"artikel_gesamt_url.html?");
       document.write(escape(name));
       var d = warenkorb_speichern_collection();
       document.write("&" + escape(d));
       document.write("\"\>");
       document.write("Zurück zu Kategorie " + name +"</a\>");
    } else {
       document.write("</ul\>");
    }

    document.write("</p\><p\>");
    document.write("<a href=\"warenkorb_url.html?" +
       escape(warenkorb_speichern_collection()) +
       "\"\>Bestellung aufgeben</a\></p\>");
    //--></script>
    </body>
    </html>
Hier klicken, um das Bild zu Vergrößern Abbildung 32.7 Im Feld Location sehen Sie die kryptische URL mit den Warenkorb-Daten. ### 32.4.3 Den Warenkorb ändern Zum Abschluss des Beispiels fehlt noch eine Seite, und zwar der Warenkorb selbst. Das Codestück für das Neuladen einer Seite nach einer Änderung muss (im Vergleich zur Cookie-Lösung) am stärksten geändert werden. Sie müssen hier wie folgt vorgehen:
| Zunächst nehmen Sie die Änderungen am Array vor.
| Dann lassen Sie sich das zum String gemachte Array von warenkorb_speichern_collection() zurückgeben.
| Diesen Wert hängen Sie – nach Vorbehandlung mit escape() – an die URL an und laden dadurch die Seite neu.
Without any further ado – also ohne weitere Vorrede – folgt hier der Code:
    <html>
    <head>
    <title>Online-Shop</title>
    <script type="text/javascript" src="warenkorb.js"></script>
    <script type="text/javascript" src="artikel.js"></script>
    </head>
    <body>
    <h1>Warenkorb</h1>
    <form method="post" action="skript.php">
    <script type="text/javascript"><!--
    function update(f) {
       for (var i=0; i<f.elements.length; i++) {
          if (f.elements[i].type == "text" &&
             f.elements[i].name.substring(0, 6) == "anzahl") {
             var nr = f.elements[i].name.substring(6,
                      f.elements[i].name.length);
             var anzahl = f.elements[i].value;
             anzahl = parseInt(0 + anzahl);
             warenkorb_editieren_url(nr, anzahl);
          }
       }
       location.search = "?" +
          escape(warenkorb_speichern_collection());
    }

    document.write("<table border=\"1\" cellpadding=\"2\"\>");

    var summe = 0;
    for (var i=0; i<kategorie.length; i++) {
       for (var j=0; j<kategorie[i].artikel.length; j++) {
          var a = kategorie[i].artikel[j];
          var anzahl = warenkorb_lesen_collection(a.nr);
          if (anzahl>0) {
             document.write("<tr\><td\>");
             document.write("<input type=\"text\" ");
             document.write("name=\"anzahl" + a.nr + "\" ");
             document.write("size=\"2\" ");
             document.write("value=\"" + anzahl + "\" /\> ");
             document.write("</td\><td\>");
             document.write("<i\>" + a.nr + "</i\> ");
             document.write("</td\><td\>");
             document.write("<b\>" + a.name + "</b\> ");
             document.write("</td\><td\>");
             document.write((anzahl * a.preis) + " &euro; ");
             document.write("</tr\>");
             summe += anzahl * a.preis;
          }
       }
    }

    document.write("</table\>");
    //--></script>
    <br />

    <input type="button" onclick="update(this.form)"
      value="Aktualisieren" />
    <input type="submit" value="Bestellung aufgeben" />
    </form>
    <script type="text/javascript"><!--
    document.write("<a href=\"kategorien_url.html?" +
      escape(warenkorb_speichern_collection()) +
      "\"\>Zur&uuml;ck zur &Uuml;bersicht</a\>");
    //--></script>
    </body>
    </html>
<< zurück | <top> | vor >>
Zum Katalog
JavaScript und AJAX bestellen
Ihre Meinung?
Wie hat Ihnen das <openbook> gefallen? Ihre Meinung
Buchtipps
| JavaScript und AJAX - Das Video-Training
| Webseiten programmieren und gestalten
| XHTML, HTML und CSS
| CSS-Praxis
| AJAX
| PHP 5 und MySQL 5
| TYPO3 4.0
Shopping
Versandkostenfrei bestellen in Deutschland und Österreich Info

Copyright © Galileo Press 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.

[Galileo Computing]
Galileo Press, Rheinwerkallee 4, 53227 Bonn, Tel.: 0228.42150.0, Fax 0228.42150.77, info@galileo-press.de