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ä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ä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ü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 + "€ "); // 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) + " € ");
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ück zur Übersicht</a\>");
//--></script>
</body>
</html>
|
