Obwohl JavaScript als clientseitige Scriptsprache ohne ein besonderes Konzept wie Ajax nicht mit einem
Webserver kommunizieren kann, ist ein Datenaustausch zwischen einzelnen Dokumenten und Fenstern dennoch möglich. Hierzu steht
zum Beispiel die Methode postMessage() zur Verfügung und weitere Möglichkeiten bietet die DOM-Storage-API.
Im Beispiel auf dieser Seite wird diese API genutzt, um Daten mit einem normalen POST-Formular zu versenden, wobei der Versand
jedoch nur bei deaktivierten JavaScript mit der Methode Post erfolgt. Bei aktivierten JavaScript wird hingegen mit dem
Event-Handler onsubmit die Funktion pruefeEingaben() aufgerufen und nach erfolgtem Aufruf sorgt return false dafür, dass keine
weitere Aktion ausgeführt wird und somit keine Anfrage beim Webserver erfolgt.
Mit der Funktion pruefeEingaben() werden die verschachtelten Funktionen pruefeP1() und pruefeP2() aufgerufen, wobei die
Input-Elemente namentlich angesprochen werden und eine Überprüfung erfolgt, welche Radio-Buttons ausgewählt wurden und ob ein
Text eingegeben wurde. Vor der Prüfung von checked und value werden die Benutzereingaben zusätzlich mit replace() und einem
geeigneten regulären Ausdruck überprüft, um eventuell von einem unliebsamen Benutzer eingegebenen Schadcode zu
entschärfen.
Nach erfolgter Prüfung werden eingegebene oder per Radio-Button ausgewählte Werte mit localStorage.setItem() clienseitig
gespeichert, wobei die Daten als Name-Werte-Paare in einem lokalen Speicherbereich abgelegt werden. Nach Speicherung der Daten
erfolgt mit window.location.href eine Weiterleitung zur empfangen HTML-Seite.
Code-Listing (sendpage.html):
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Daten vom Post-Formular lokal speichern</title> <style type="text/css">body {text-align:center}</style> <script type="text/javascript"> function pruefeP1(ps) { function pruefeP2(ch) { var docele = document.getElementsByName(ch)[0]; var dorabe = docele.value; if (docele.checked === true) ch = true; else if (ch == "rabe" && dorabe != "") ch = true; else ch = false; return ch; } var psend = document.getElementsByName(ps)[0].value; var eingt = psend.replace(/[^a-zäöüÄÖÜß0-9s_-]/gi, ""); if (pruefeP2(ps) !== false) localStorage.setItem(ps, eingt); } function pruefeEingaben() { pruefeP1("rabe"); pruefeP1("kate"); pruefeP1("rubi"); pruefeP1("item"); pruefeP1("para"); window.location.href = "postpage.html"; } </script> </head> <body> <h1>Daten vom Post-Formular lokal speichern</h1> <p><a href="sendpage.html">Formular</a> | <a href="postpage.html">Eingangsseite</a></p> <form action="errorpage.php" method="post" onsubmit="pruefeEingaben(); return false" accept-charset="utf-8"> <input type="text" name="rabe" value="" size="30" maxlength="30"><br> <input type="radio" name="kate" value="Filme"> Filme <input type="radio" name="rubi" value="Movie"> Movie <input type="radio" name="item" value="30"> 30 <input type="radio" name="para" value="50"> 50<br> <br> <input type="reset" value="Leeren"> <input type="submit" value="Senden"> </form> </body> </html>
Da DOM Storage die mit localStorage.setItem() übergebenen Daten in einem assoziativen Array als
Name-Werte-Paare speichert, wobei die Namen den Schlüssel bilden, lassen sich die Werte entsprechend ihrer Schlüssel mit
localStorage.getItem() ansprechen und abrufen. Existiert kein Schlüssel, so wird null zurückgegeben. Mit den selbst
definierten Funktionen rufeAb() und pruefePost() erfolgt im nachfolgendem Code-Listing eine Überprüfung, ob der Rückgabewert
null ist und falls ja, so wird den Variablen ein Ersatzwert zugewiesen.
Eine nochmalige Prüfung mit einer RegEx-Methode und einem passenden regulären Ausdruck sollte nicht fehlen. Nach dem Laden des
Fensters erfolgt mit window.onload die Ausgabe der übermittelten Werte.
Code-Listing (postpage.html):
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Parameter und Werte wie POST übernehmen</title> <style type="text/css"> body{text-align:center} .liste{text-align:left} .dvl {width:300px; margin:auto} .gtsp {color:#8E9583} </style> <script type="text/javascript"> var rabe = "rabe"; var kate = "kate"; var rubi = "rubi"; var item = "item"; var para = "para"; /* -------------------------------------------------------------------- Prüfen, welche Namen als Schlüssel existieren und mit einem Wert belegt sind. ----------------------------------------------------------------------- */ function rufeAb() { rabe = pruefePost(rabe); kate = pruefePost(kate); rubi = pruefePost(rubi); item = pruefePost(item); para = pruefePost(para) function pruefePost(pew) { var lsg = localStorage, inp; if (lsg.getItem(pew) !== null && lsg.getItem(pew) != "") { inp = lsg.getItem(pew); inp = String(inp).replace(/[^a-zäöüÄÖÜß0-9s_-]/gi, ""); } else inp = "<span class=\"gtsp\">No Wert<\/span>"; return inp; } } /* --- Aufbereitung zur Ausgabe bei onload ------------------------- */ window.onload = function() { rufeAb(); var lis = "<\/li><li>"; var rep = "<li>" + rabe + lis + kate + lis + rubi + lis + item + lis + para + "<\/li>"; document.getElementById("ausgabe").innerHTML = rep; localStorage.clear(); } </script> </head> <body> <h1>Parameter und Werte wie POST übernehmen</h1> <p><a href="sendpage.html">Formular</a> | <a href="postpage.html">Eingangsseite</a></p> <p>Es wurden folgende Datenwerte übernommen:</p> <div class="dvl"><ul id="ausgabe" class="liste"></ul></div> </body> </html>
Falls JavaScript im Browser des Benutzers deaktiviert, kann auch return false im einleitenden Formt-Tag
des Formulars nicht greifen und der Inhalt des Formulars wird auf dem normalen Post-Wege an den Webserver übermittelt. In
diesem Fall können die Daten mit einem beliebigen serverseitigen Script weiterverarbeitet oder ausgegeben werden. Eine einfache
HTML-Seite mit einer Fehlermitteilung oder einem Hinweis für den Benutzer, würde jedoch je nach dem geplanten Einsatzzweck und
zum Testen der Funktionen und Methoden bereits genügen.
Beispiel (errorpage.php):
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Error-Page</title> <style type="text/css">body {text-align:center}</style> </head> <body> <h1>Error-Page</h1> <p><a href="sendpage.html">Formular</a> | <a href="postpage.html">Eingangsseite</a></p> <p>Ein Fehler trat auf oder JavaScript ist deaktiviert.</p> <?php // Post empfangen, verarbeiten und ausgeben, falls JavaScript deaktiviert. ?> </body> </html>
GET Parameter und Werte « zurück
Einstieg in JavaScript
Listings & Tutorials
Übersicht