Galileo Computing < openbook > Galileo 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
Galileo Computing
ISBN 3-89842-859-1
gp Kapitel 32 Warenkorb
  gp 32.1 Datenstruktur
  gp 32.2 Mit unsichtbaren Frames arbeiten
    gp 32.2.1 Warenkorb füllen
    gp 32.2.2 Artikel anzeigen
    gp 32.2.3 Warenkorb ändern
  gp 32.3 Mit Cookies arbeiten
    gp 32.3.1 Warenkorb füllen
    gp 32.3.2 Artikel anzeigen
    gp 32.3.3 Warenkorb ändern
  gp 32.4 Über die URL
    gp 32.4.1 Den Warenkorb füllen
    gp 32.4.2 Artikel anzeigen
    gp 32.4.3 Den Warenkorb ändern
  gp 32.5 Fazit


Galileo Computing

32.4 Über die URL  downtop

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:

gp  In der URL werden nur die Warenkorb-Daten übergeben. Dann werden diese einfach an den Dateinamen angehängt: datei.html?warendaten
gp  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.


Galileo Computing

32.4.1 Den Warenkorb füllen  downtop

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.


Galileo Computing

32.4.2 Artikel anzeigen  downtop

Zur Anzeige der einzelnen Artikel werden auch dieses Mal drei Dateien erstellt:

gp  eine Seite, auf der alle Kategorien in einer Übersicht angezeigt werden: kategorien_url.html
gp  eine Seite, auf der alle Artikel einer Kategorie angezeigt werden: artikel_gesamt_url.html
gp  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>

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

Abbildung 32.7     Im Feld Location sehen Sie die kryptische URL mit den Warenkorb-Daten.


Galileo Computing

32.4.3 Den Warenkorb ändern  toptop

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:

gp  Zunächst nehmen Sie die Änderungen am Array vor.
gp  Dann lassen Sie sich das zum String gemachte Array von warenkorb_speichern_collection() zurückgeben.
gp  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
  
  Zum Katalog
Zum Katalog: JavaScript und AJAX
JavaScript und AJAX
bestellen
 Ihre Meinung?
Wie hat Ihnen das <openbook> gefallen?
Ihre Meinung

 Buchtipps
Zum Katalog: JavaScript und AJAX - Das Video-Training






 JavaScript und AJAX -
 Das Video-Training


Zum Katalog: Webseiten programmieren und gestalten






 Webseiten
 programmieren
 und gestalten


Zum Katalog: XHTML, HTML und CSS






 XHTML, HTML und CSS


Zum Katalog: CSS-Praxis






 CSS-Praxis


Zum Katalog: AJAX






 AJAX


Zum Katalog: PHP 5 und MySQL 5






 PHP 5 und MySQL 5


Zum Katalog: TYPO3 4.0






 TYPO3 4.0


 Shopping
Versandkostenfrei bestellen in Deutschland und Österreich
InfoInfo




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