Werbung einblenden Werbung ausblenden


Home / Tutorials / JavaScript Handbuch / client server verbinden


Verbinden von clientseitiger und serverseitiger Programmierung

Verbinden von clientseitiger und serverseitiger Programmierung

Es gibt zahlreiche Gründe, die clientseitige Programmierung mit einem serverseitig arbeitenden Programm zu verknüpfen und noch zahlreicher sind die Möglichkeiten, wie man das tun kann. Es ist z.B. unter Umständen günstig, den Warenkorb bei einem Shopsystem clientseitig zu realisieren die Produkte aber, die verkauft werden sollen, aus einer Datenbank, also serverseitig zu ziehen. Wem jetzt nicht klar ist, der möge hier clicken. (Das Programm ist noch zu schwach, um im kommerziellen Umfeld eingesetzt zu werden. Es handelt sich um ein Übungsbeispiel, welches im Rahmen einer Trainingsmassnahme entwickelt wurde. Unter Umständen kann es aber als Basis dienen für einen Shop. Das ganze Programm kann man hier downloaden. Was erhalten wir ? Wir sehen, dass wenn wir auf eine Produktgruppe clicken (Sachbücher,Romane,Umwelt,Soziologie) wir die zu dieser Produktgruppe gehörenden Elemente erhalten. In diesem Fall kommen die Daten aus einem Flatfile, wobei es eigentlich egal ist, man könnte sie auch aus einer mysql Datenbank ziehen. Der Flatfile sieht so aus.

produktgruppe:Romane+id:Llosa+name:Vargas Llosa+price:2468+title:Gespräch in der Kathedrale+description:Darstellung einer Diktatur südamerikanischen Stils. Technisch sehr anspruchsvoll geschrieben. Versteckt in dem ganzen Chaos aber auch eine unglückliche Love Story.
produktgruppe:Romane+id:Sabato+name:Ernesto Sabato+price:4480+title:Der Tunnel+description:Bißchen durchgeknallter Maler sucht eine Frau, die einzige, die seine Bilder versteht. Ziemlich düstere Atmosphäre, soviel steht fest.
produktgruppe:Romane+id:Svevo+name:Italo Svevo+price:3290+title:Ein Leben+description:Angestellter im kaufmännischen Bereich ist ein bisschen abgeturnt von seinem Job und dann, wenn's dicke kommt kommt's ja meistens volle Kanne, verliebt er sich auch noch unglücklich.
produktgruppe:Romane+id:Mann+name:Thomas Mann+price:2468+title:Felix Krull+description:Variation zum Leitmotiv Thema von T.M. allerdings in der Light Version.
produktgruppe:Romane+id:Hesse+name:Hermann Hesse+price:2468+title:Das Glasperlenspiel+description:Werk mit Tiefgang. Gegen Chaos hilft nur die Vergeistigung.
produktgruppe:Sachbuecher+id:Eidadauz+name:Werner Eidadauz+price:2850+title:Staunen als Vorraussetzung der Erkenntnis+description:Auf den Pfaden Goethes. Doch im Erstarren such ich nicht mein Heil, das Schaudern ist der Menschheit bester Teil...

usw.

Entscheidend ist nun, dass, wir mit diesen Werten etwas aufbauen, was wir mit JavaScript verwerten können. Es findet nun ein kleiner Kunstgriff statt. Wir brauchen einserseits alle Angaben zu dem Produkt (Produktgruppe, id (Bestellnummer), Preis,Titel, Autor,Beschreibung) andererseits brauchen wir aber auch die bestellte Menge, wobei sich letztere ja ändern kann. Wir haben in einem Formular aber nur zwei Werte, die wir abgreifen können, nämlich den Namen des Formularfeldes und den Value. Wir übergeben also alle statischen Daten an den Namen und werten den Namen mit JavaScript aus. Die Übergabe der Daten an Javascript sieht dann so aus.

name="Christl|Frieda Christl|Hatte M.Luther einen Dachschaden ?|3290"

Die obenstehende Zeichenkette generieren wir uns mit einem serverseitig arbeitenden Programm, zum Beispiel mit PHP, Perl, Visual Basic Script, Cold Fusion oder mit was auch immer. (In diesem Fall machen wir es mit Perl, aber das ist eigentlich egal.) Diese Zeichenkette wiederum können wir nutzen, wenn wir es schaffen, sie in ihre Einzelteile zu zerhacken. Hierfür benötigen wir einen JavaScript Einzeiler.

waren1= bestellt.split('|');

Haben wir die Einzelteile, bauen wir daraus einen zweidimensionalen associative Array.

waren1= bestellt.split('|');
waren[waren1[0]]=new Array();
waren[waren1[0]][0]=waren1[0];
waren[waren1[0]][1]=waren1[1];
waren[waren1[0]][2]=waren1[2];
waren[waren1[0]][3]=waren1[3];
waren[waren1[0]][4]=parent.rechtsoben.document.shopping[i].value;

Wer sich das unter Zugriffe auf Formularelemente, Funktionen und Arrays, Hashes, mehrdimensionale Arrays (Hashes) jetzt in Erinnerung ruft, dem wird schnell deutlich, wie dieser Shop funktionniert. Das serverseitig arbeitende Programm baut die Daten also nur so auf, dass sie von JavaScript verwendet werden können. Der Warenkorb ist aber über JavaScript realisiert.

Mit einer Verbindung aus clientseitiger und serverseitiger Programmierung lässt sich noch ein anderes Problem lösen. Serverseitige Programme arbeiten immer so, dass sie mit oder ohne Variablen angeschoben werden, dann irgendetwas tun und anschliessend eine komplette HTML Seite zurückschiessen. (Ein Ausweg bilden hier nur Java Applets in Verbindung mit Servlets, aber das berücksichtigen wir hier nicht.) Die Tatsache, dass eine komplette HTML Seite zurückgeschossen wird ist insofern nervig, als sich die komplette Seite immer wieder neu aufbaut. Schöner wäre es, man könnte nur einen Teil einer HTML Seite mit neuen Daten füllen und nur diesen Teil dynamisch verändern, nicht aber die ganze Seite. Vielen ist wahrscheinlich jetzt nicht klar, wovon überhaupt die Rede ist, so dass wir empfehlen, mal hier zu clicken. Alles klar ? Macht man einen Eintrag, blendet sich kurz Eintrag erfolgt auf, anschliessend wird der Eintrag gezeigt, ohne dass sich die Seite hierfür neu lädt. Desgleichen kann man durch alle Einträge navigieren, ohne dass sich die Seite neu aufbaut. Das ist, soit dit en passant, auch eher das Verhalten, was man von einer DTP Anwendung her kennt. Das ganze Programm ist nur ein Skript, den man sich hier downloaden kann. Man wirft ihn in einen Ordner, wo PHP verstanden wird und dann funktionniert es. Der Skript selber ist etwas kompliziert, die prinzipielle Vorgehensweise aber ist relativ einfach. Wir haben einen Frame, der unsichtbar ist, bzw. den wir rein theoretisch unsichtbar machen können. Wir zeigen die Stelle, wo der PHP Skript den Frame aufbaut.

if (empty($modul))
{
print "
<html><head><title>Gästebuch mit DHTML</title></head>
<frameset rows=\"80%,20%\" frameborder=0>
<frame name=oben src=gastdhtml_cross_browser.php?modul=1>
<frame name=unten src=gastdhtml_cross_browser.php?modul=2 noresize>
</frameset>
</html> ";
}

Im Frame oben steht das eigentliche Gästebuch, in den Frame unten schiessen wir den JavaScript, der den Frame oben steuert und den wir von PHP produzieren lassen. Aus didaktischen Gründen haben wir für den Frame unten noch 20 % definiert, damit man sich via rechte Maustaste noch den Quelltext anschauen kann, wir hätten diesen Frame aber genauso gut auf 0 % setzen können. Etwas schwieriger ist die Funktion reinfeuern() des PHP Skriptes. Diese Funktion wertet die Datei gaste.txt aus, in der die Einträge der User gespeichert werden. Sie produziert dann aus den Einträgen in dieser Flatfile Datenbank (also gaste.txt) einen JavaScript Array, diesen JavaScript Array schiessen wir zusammen mit JavaScript Funktionen, die wir uns ebenfalls von PHP generieren lassen, in den (unsichtbaren) Frame unten. JavaScript wiederum kann direkt Inhalte in Teilbereiche des Frames oben schiessen, was wir, wenn der JavaScript mal im Frame unten angekommen ist, dann auch tun. Soweit die simple Theorie. Wir zeigen den von PHP produzierten JavaScript Code, also das, was in den Frame unten geschossen wurde.

<html><head><title>Einträge</title>
<script language=javascript>
banane=new Array();
function reinmach5()
{
parent.oben.document.getElementById("feedback").innerHTML="Eintrag erfolgt";
window.setTimeout("wegmach()",300);
}
function wegmach()
{
parent.oben.document.getElementById("feedback").innerHTML="";
}
banane[0]="Andres Ehmann limitatio infos@infos24.de limitatio TESTEN limitatio Wer nicht versteht was passiert soll einfach mal einen Eintrag machen.";
banane[1]="Andres Ehmann limitatio Andres_Ehmann@web.de limitatio DHTML limitatio Ist es nicht schön, dass man durch einen Misch aus DHTML und serverseitiger Programmierung erreichen kann, dass sich nur bestimmte Teile einer Webstit neu laden und nicht immer die ganze Website ?";

function reinmach (a,b)
{
einzelteile=new Array;
var speicherfertig="";

for (i=a;i<=b;i++)
{
if (typeof banane[i] !="undefined")
{
einzelteile=banane[i].split(" limitatio ");
speicher="
<tr><td>"+einzelteile[0]+"</td></tr>
<tr><td>"+einzelteile[1]+"</td></tr>
<tr><td>"+einzelteile[2]+"</td></tr>
<tr><td>"+einzelteile[3]+"</td></tr>
<tr><td><hr></td></tr></tr>";
speicherfertig=speicherfertig.concat(speicher);
}

}
parent.oben.document.getElementById("feedback2").innerHTML="<table>"+speicherfertig+"</table>";
}

function reinmach2()
{
einzelteile=new Array;
var speicherfertig="";
for (i=0;i<=2;i++)
{
if (typeof banane[i] !="undefined")
{
einzelteile=banane[i].split(" limitatio ");
speicher="
<tr><td>"+einzelteile[0]+"</td></tr>
<tr><td>"+einzelteile[1]+"</td></tr>
<tr><td>"+einzelteile[2]+"</td></tr>
<tr><td>"+einzelteile[3]+"</td> </tr>
<tr><td><hr></td></tr> ";
speicherfertig=speicherfertig.concat(speicher);
}
}
parent.oben.document.getElementById("feedback2").innerHTML="<table>"+speicherfertig+"</table>";

wieviele=banane.length / 2;
wieviele=Math.floor(wieviele);

rest=banane.length % 2;

if (rest !=0)
{
wieviele=wieviele+1;

}
var anfang=0;
var ende=2;
anzeige="";
anzeigefertig="";
for (e=0;e<wieviele;e++)
{
anzeige="
<td>
<A href=\'JavaScript:parent.unten.reinmach("+anfang+","+ende+");\' style=text-decoration:none;>\["+e+"\]</A>
</td>";
anzeigefertig=anzeigefertig.concat(anzeige);
anfang=anfang+2;
ende=ende+2;
}

parent.oben.document.getElementById("feedback3").innerHTML="<table><tr>"+anzeigefertig+"</tr></table>";
}
</script></head>
<body onload="reinmach2();reinmach5()"></body></html>

Wer jetzt noch genau wissen will, wie dieser JavaScript Code produziert wurde, der muss sich sich die PHP Funktion reinfeuern() im PHP Skript anschauen.

vorhergehendes Kapitel