Anzeige
Tutorialbeschreibung

Javascript und Ajax - Serverseitige Technologien

Javascript und Ajax - Serverseitige Technologien

In diesem Kapitel werden Beispiele für die Interaktion von diversen server- und clientseitigen Techniken aufgezeigt.

 


Das nun folgende Tutorial ist ein Auszug aus der 7. Auflage des Buches: JavaScript und Ajax von Christian Wenz.

Musik ist heutzutage oft nur Lärm mit Copyright. – Peter Holl

Hab ich doch, Freunde, immer mit Recht den Caffé gehasst. – Johann Wolfgang von Goethe

Von einem gewissen Alter ab tut auch die Freude weh. – Charlie Chaplin

Kapitel 25 Serverseitige Technologien

Früher bestand das World Wide Web aus lauter statischen Webseiten, und wer etwas auf sich hielt, eignete sich JavaScript an und stach dadurch aus der Masse hervor. Mittlerweile ist JavaScript so weit verbreitet, dass einige Seiten gar nicht mehr ohne die clientseitige Skriptsprache auskommen. Wer aber heutzutage »in« sein will, muss einen Schritt weiter gehen und serverseitige Mittel einsetzen. Serverseitige Skriptsprachen laufen – wie der Name schon sagt – auf dem Webserver ab. Es handelt sich also, vereinfacht gesagt, um Programme, die HTML-Dateien ausgeben.

In den vorangegangenen Kapiteln dieses Buches wurden bereits immer wieder mal einige der Vor- und Nachteile von serverseitigen Technologien im Vergleich zu clientseitigen Technologien erläutert. Serverseitige Skriptsprachen sind meist ungleich mächtiger, da sie unter anderem auf das Dateisystem des Servers und auf Datenbanken zugreifen können. Clientseitige Skriptsprachen dagegen erfordern keine Verbindung zu einem Server und sind dadurch – beispielsweise in Hinblick auf die Formularüberprüfung – deutlich leistungsfähiger.

In diesem Kapitel werden einige Beispiele für die Interaktion von server- und clientseitigen Techniken gezeigt. Dazu war es leider notwendig, bei der Serverseite Einschränkungen vorzunehmen. Es gibt eine Reihe von serverseitigen Skriptsprachen und -technologien: ASP(.NET), JSP, Perl, PHP und Python, um nur einige zu nennen. Es ist nicht möglich, all diese Technologien gleichzeitig zu berücksichtigen. Dennoch versuche ich, jeweils mehrere Technologien vorzustellen, um immer eine Alternative bieten zu können.

Der weltweit am häufigsten eingesetzte Webserver, der Apache Webserver (für viele Betriebssysteme und auch im Quellcode erhältlich unter http://httpd.apache.org/), unterstützt eine Reihe von Skriptsprachen, darunter auch Perl und PHP. Perl war lange Zeit der »Marktführer«, was auch an der Integration der Skriptsprache in die Betriebssysteme UNIX und Linux und an der damit verbundenen riesigen Verbreitung lag. Mitt-lerweile liefern die neueren Linux-Distributionen ebenfalls noch den PHP-Sprachinterpreter mit, so dass diese neuere Skriptsprache langsam, aber sicher aufholt. Wir haben uns dafür entschieden, hier PHP den Vorzug zu geben, denn diese Sprache ist – einmal installiert – unserer Meinung nach leichter zu erlernen und hat für den Anfänger weniger Frustpotenzial als Perl.

Die insbesondere im Entwicklerbereich verbreitete Windows-Plattform soll auch bedient werden. Hier ist die Microsoft-Technologie ASP.NET – der Nachfolger von ASP, Active Server Pages – verbreitet, da sie direkt in den Webserver integriert ist. Bei ASP handelt es sich um keine Programmiersprache, sondern um eine Technologie. Die Programmierung selbst muss in einer Skriptsprache erfolgen, wobei im Lieferumfang Visual Basic, C# und JScript.NET (siehe Kapitel 26) enthalten sind. Auch wenn dies hier ein JavaScript-Buch ist, wird im Folgenden dennoch Visual Basic eingesetzt. JScript wird im folgenden Kapitel behandelt.


 

 

25.1 Variablentausch

Was passiert, wenn ein Browser von einem Webserver ein serverseitiges Skript anfordert? In der Regel werden die folgenden Schritte durchgeführt:

>

Der Browser schickt die Anforderung an den Webserver.

 

>

Der Webserver erhält die Anforderung.

 

>

Der Webserver stellt aufgrund der Dateiendung fest, dass es sich um ein serverseitiges Skript handelt.

 

>

Der Webserver veranlasst, dass das serverseitige Skript ausgeführt wird (beispielsweise, indem der Sprachinterpreter aufgerufen und die (HTML-)Ausgabe abgefangen wird).

 

>

Der Webserver schickt das Ergebnis (in der Regel HTML-Code) des serverseitigen Skripts an den Browser.

 

>

Der Browser empfängt die Daten und interpretiert sie (zeigt sie an).

Die serverseitigen Bestandteile der Seite werden also komplett auf dem Server interpretiert. JavaScript-Code wird erst im Browser betrachtet. Daraus folgt, dass der serverseitige Code keinen Zugriff auf JavaScript-Variablen hat. Falls eine Art Variablenaustausch stattfinden soll, kann dieser nur in eine Richtung erfolgen: JavaScript kann auf serverseitige Variablen zugreifen.

Ganz korrekt ist das immer noch nicht. Der JavaScript-Interpreter kann nicht direkt auf serverseitige Variablen zugreifen, aber serverseitige Variablen können JavaScript-Variablen zugewiesen werden.

Betrachten wir zunächst ein Beispiel in PHP. In dieser Sprache werden Variablen durch ein vorangestelltes Dollarzeichen markiert. Unser Ziel ist es nun, auf die Variable $variable von JavaScript aus zuzugreifen. Das geht folgendermaßen:

>

Zunächst einmal muss die Variable im PHP-Teil deklariert und mit einem Wert belegt werden. PHP-Teile in HTML-Dokumenten werden durch <?php und ?> eingefasst. Im Webbrowser sieht man davon wie gesagt nichts mehr, da diese Bestandteile auf dem Server interpretiert und ausgeführt werden.

 

>

Dann muss ein JavaScript-Teil eingebaut werden. In diesem JavaScript-Teil wird eine JavaScript-Variable definiert. Als Wert wird ihr der Wert von $variable zugewiesen.


Bilder

Abbildung 25.1     Die PHP-Variable wird per JavaScript ausgegeben.

Hier ein exemplarisches Listing:

<?php
   $variable = 'PHP'; //PHP-Variable wird gesetzt
?>
<html>
<head>
<title>Variablentausch</title>
</head>
<body>
Wert der Variablen:
<script type="text/javascript"><!--
var v = "<?php echo $variable; ?>";
document.write(v);
//--></script>
</body>
</html>

Was passiert nun, wenn dieses Skript auf dem Server interpretiert wird? Nun, die <?php...?>-Abschnitte werden interpretiert und sind im Browser nicht mehr sichtbar. Der Variablen $variable wird der Wert "PHP" zugewiesen. Die Anweisung echo $variable; führt dazu, dass PHP ausgegeben wird. Am Ende wird also folgendes HTML-Dokument an den Browser geschickt:

<html>
<head>
<title>Variablentausch</title>
</head>
<body>
Wert der Variablen:
<script language="JavaScript"><!--
var v = "PHP";
document.write(v);
//--></script>
</body>
</html>

Die (JavaScript-)Variable v wird also mit dem Wert "PHP" belegt. Sie sehen jetzt auch, warum in der Datei variable.php das <?php echo $variable; ?> mit Anführungszeichen umgeben worden ist. Wäre das nicht der Fall gewesen, hätte das PHP-Skript folgende HTML-Ausgabe produziert:

var v = PHP;

Dies hätte natürlich einen Syntaxfehler nach sich gezogen.

Dasselbe Beispiel sieht in ASP.NET ganz ähnlich aus. Drei Vorbemerkungen seien angebracht:

>

ASP-Code wird durch <% und %> eingeschlossen.

 

>

(Einzeilige) Kommentare werden durch ' gekennzeichnet (entspricht // in JavaScript).

 

>

Variablennamen werden nicht gesondert gekennzeichnet. Allerdings müssen Sie eine Variable vor ihrer Verwendung mit Dim deklarieren (entspricht var in JavaScript).

Damit ist nun folgender Code verständlich:

<%
   Dim variable
   variable = "ASP.NET"  ' ASP.NET-Variable wird gesetzt
%>
<html>
<head>
<title>Variablentausch</title>
</head>
<body>
Wert der Variablen:
<script type="text/javascript"><!--
var v = "<% Response.Write(variable) %>";
document.write(v);
//--></script>
</body>
</html>

Durch Response.Write(Variablenname) wird der Wert der angegebenen Variablen ausgegeben. Obiges Skript führt also zu folgender HTML-Ausgabe:

<html>
<head>
<title>Variablentausch</title>
</head>
<body>
Wert der Variablen:
<script language="JavaScript"><!--
var v = "ASP.NET";
document.write(v);
//--></script>
</body>
</html>

Auch hier gilt wieder: Ohne die Anführungszeichen um das Ausgabekommando würde es zu einer (JavaScript-)Syntaxfehlermeldung kommen.

In ASP.NET gibt es eine Kurzform für die Variablenausgabe: <% =Variablenname %> entspricht <% Response.Write(Variablenname) %>.

Damit haben Sie auch schon das Grundrüstzeug erhalten, um serverseitige und clientseitige Skriptsprachen zusammenarbeiten zu lassen. Im nächsten Abschnitt finden Sie einige Beispiele hierfür.

25.2 Anwendungen  

Für die Behandlung des Themas »Anwendungen« gibt es zwei Möglichkeiten: Entweder präsentiert man viele kleine, einander ähnliche Beispiele oder man stellt nur wenige vor. Serverseitige Anwendungsmöglichkeiten gibt es unendlich viele, aber die meisten davon geben direkt HTML aus, ohne die Möglichkeiten von JavaScript zu nutzen bzw. nutzen zu müssen.

Wir stellen an dieser Stelle einige exemplarische Anwendungen vor. Die vorgestellten Skripten sind nur als Grundgerüste zu betrachten, die entsprechend erweitert werden können und müssen. Prinzipiell geht es eher darum, drei JavaScript-Techniken zu zeigen, die mit serverseitigen Mitteln angereichert werden können:

>

den Aufruf von selbst geschriebenen Funktionen mit serverseitig generiertem Inhalt

 

>

das Schreiben von komplexeren JavaScript-Anweisungen mit serverseitigen Mitteln

 

>

das Füllen von Formularen im Hintergrund

 

25.2.1 Newsticker 

Es gibt in JavaScript verschiedene Ansätze, einen Marquee-Effekt, hinlänglich als Laufschrift bekannt, zu erzeugen. Als Text werden meist statische Inhalte verwendet. In diesem Beispiel jedoch werden Lauftexte aus einer Datenbank erzeugt. Beispielsweise ist es möglich, dass die News auf einer Website von einem externen Dienstleister erzeugt werden, der diese dann automatisch einmal oder mehrmals täglich per FTP auf Ihren Webserver überträgt, auf dem dann ein weiterer Automatismus das Einfügen der Nachrichten in die Datenbank übernimmt.

Die Aufgabe des JavaScript-Programmierers ist dann einfach: Da das Auslesen der Daten vom ASP.NET- oder PHP-Profi erledigt wird, muss nur noch der entsprechende JavaScript-Code für den Lauftext erzeugt werden. Den Großteil der Arbeit nehmen Ihnen dabei die bereits erzeugten Hilfsfunktionen ab.

Wenn Sie die folgenden Listings ausprobieren möchten, müssen Sie mehrere Dinge beachten:

>

PHP bzw. ASP.NET muss auf Ihrem System korrekt installiert sein.

 

>

Sie müssen die serverseitigen Skripten über den Webserver aufrufen, also beispielsweise http://servername/skriptname.php. Der Aufruf c:inetpubwwwrootskriptname.php wird nicht funktionieren!

 

>

Die Listings verwenden Datenbanknamen und -verbindungen, die in dieser Art auf Ihrem System vermutlich nicht existieren. Sie müssen also das Listing dementsprechend für Ihr System anpassen. Fragen Sie gegebenenfalls einen PHP- oder ASP.NET-Experten.

Die ASP.NET- und die PHP-Lösung sind weitgehend identisch. Zunächst werden aus einer Datenbank die ersten drei News gelesen und aneinander gehängt. Dann wird ein <div>-Container für die Ausgabe des Lauftextes erzeugt (alternativ kann es auch ein Textfeld oder die Statusleiste sein). Zu guter Letzt wird die Funktion zur Erzeugung des Lauftextes aufgerufen.

Am Anfang steht der Newsticker. Dieser besteht im Wesentlichen aus der Verwendung von Timeouts und ein wenig DHTML (oder, genauer gesagt, getElementById() und innerHTML). Hier die entsprechende Funktion:

function ticker_div(divid, text, verzoegerung) {

   document.getElementById(divid).innerHTML = text;

   text = text.substring(1, text.length) + text.charAt(0);

   var temp = text

   var pos = 0;

   while (temp.indexOf(""", pos) > –1) {

      temp = temp.substring(0, temp.indexOf(""", pos)) +

         """ +

         temp.substring(temp.indexOf(""", pos) + 1,

                        temp.length);

      pos = temp.indexOf(""", pos) + 1;

   }

   var id = setTimeout(

      "ticker_div("" + divid + "", ""

         + temp + "", " + verzoegerung + ")",

      verzoegerung);

   return id;

}

Nun zur Serverseite; beginnen wir zunächst mit der ASP.NET-Lösung:

<%

Dim news As String = ""

Dim strConn As String = "Trusted_Connection=yes;initial catalog=news;data source=(local)"

Dim n As New System.Data.SqlClient.SqlConnection(strConn)

n.Open()

Dim cmd As New System.Data.SqlClient.SqlCommand()

cmd.CommandText = "SELECT TOP 3 headline FROM news"

cmd.Connection = n

Dim r As System.Data.IDataReader = cmd.ExecuteReader()

While r.Read()

   news = news & r("headline") & " +++ "

End While

n.Close()

 

' Sonderzeichen ersetzen

news = Replace(news, vbCrLf, "") ' Umbrüche entfernen

news = Replace(news, """", """") ' " -> "

news = Server.HTMLEncode(news) ' HTML-Umwandlung

%>

<html>

<head>

<title>Newsticker mit ASP.NET</title>

<script type="text/javascript" src="lauftext.js"></script>

<script type="text/javascript"><!--

// ASP-Variable in JavaScript-Variable speichern

var news = "<% =news %>";

//--></script>

</head>

<body onload="ticker_div('ticker', news, 500);">

<div id="ticker" style="position: absolute;"></div>

</body>

</html>

Beachten Sie die Ersetzung der Sonderzeichen. Im Newstext dürfen beispielsweise keine Umbrüche oder Anführungszeichen auftreten, weil diese dann bei der Zuweisung an die JavaScript-Variable zu Problemen führen würden. Ebenso werden HTML-Sonderzeichen wie etwa spitze Klammern durch die entsprechenden Entitäten ersetzt (das macht in ASP.NET die Funktion Server.HTMLEncode() und in PHP die Funktion htmlspecialchars()), damit später die HTML-Ausgabe funktioniert.

Die PHP-Lösung sieht ähnlich aus. Bei PHP lautet zunächst die Gretchenfrage, ob man als Datenbank auf MySQL setzt (unter Linux ist das fast schon Pflicht, von dem weniger verbreiteten, aber ebenfalls mächtigen Postgres einmal abgesehen) oder – sofern der Webserver unter Windows läuft – auf eine ODBC-Verbindung oder gar direkt auf den Microsoft SQL Server. Ein großer Vergleichstest in einer renommierten Computerzeitschrift hat im Juli 2001 ergeben, dass das performanteste System eine Kombination aus Windows 2000, PHP und Microsoft SQL Server 2000 ist.Generell ist vom Einsatz von MySQL unter Windows abzuraten, da die Datenbank insbesondere für Anfänger bei weitem nicht so komfortabel zu bedienen ist wie das Microsoft-Pendant. Aus Gründen der Ausgewogenheit der Mittel widmet sich der PHP-Abschnitt dennoch dem Zugriff auf eine MySQL-Datenbank; Windows-Nutzer können das Skript ohne großen Aufwand für einen Microsoft-SQL-Server-Zugriff umschreiben oder auf ASP.NET setzen.

<?php

mysql_connect('localhost', 'root', '123');

mysql_select_db('news');

$result = mysql_query('SELECT TOP 3 headline FROM news');

$news = '';

while ($zeile = mysql_fetch_assoc($result)) {

   $news .= $zeile['headline'] . ' +++ ';

}

mysql_close();

 

// Sonderzeichen ersetzen

$news = str_replace("
", '', $news); // Umbrüche entfernen

$news = htmlspecialchars($news); // HTML-Umwandlung

$news = addslashes($news); // " -> "

?>

<html>

<head>

<title>Newsticker mit PHP</title>

<script type="text/javascript" src="lauftext.js"></script>

<script type="text/javascript"><!--

// PHP-Variable in JavaScript-Variable speichern

var news = "<?php echo $news; ?>";

//--></script>

</head>

<body onload="ticker_div('ticker', news, 500);">

<div id="ticker"></div>

</body>

</html>


Bilder

Abbildung 25.2     Die News kommen frisch aus der Datenbank.

Somit haben Sie mit nur wenigen Zeilen JavaScript-Code – und der ASP.NET/PHP-Code hielt sich auch in Grenzen – eine datenbankgestützte, dynamische Newsticker-Applikation geschaffen.


25.2.2 Bankleitzahlen

Damit eine Überweisung innerhalb von Deutschland auch beim Empfänger ankommt, muss der Bankkunde neben der Kontonummer auch die Bankleitzahl der Zielbank angeben. Die Bankleitzahl, kurz BLZ, ist eine achtstellige Ziffer, die eine Bank eindeutig bestimmt. Anhand der Bankleitzahl lässt sich auch zum Teil die geografische Lage der Bank sowie der Banktyp ablesen, doch dies sei nur am Rande erwähnt.

In der hier vorgestellten Beispielanwendung soll das typische Formular einer webbasierten Homebanking-Anwendung emuliert werden. Dort kann man in ein Texteingabefeld die achtstellige Bankleitzahl eintragen. Einige Webbanking-Anwendungen erlauben auch das manuelle Eintragen des Banknamens in ein entsprechendes Textfeld, doch dies ist noch ein Relikt aus den Zeiten, zu denen Überweisungen nur von Hand ausgefüllt wurden – die Angabe des Banknamens soll Schreibfehler bei der BLZ schneller aufdeckbar machen. Die meisten Banken jedoch erlauben dem Benutzer nicht, das Feld auszufüllen, sondern füllen das Feld anhand der eingegebenen BLZ selbst.

Der Bankname ist bei diesen Anwendungen jedoch nur nach einem Neuladen der Seite sichtbar; beispielsweise, wenn der Überweisungsbetrag mit dem noch verfügbaren Betrag auf dem Konto verglichen worden ist und die TAN eingegeben werden soll.

Diese Beispielanwendung soll das Ganze etwas vereinfachen. Direkt nachdem der Benutzer die Bankleitzahl in das Textfeld eingegeben hat, soll in einer Datenbank nachgeprüft werden, ob zu dieser BLZ ein Bankenname bekannt ist. Falls ja, wird dieser in das Textfeld eingetragen.

Der gesamte Prozess muss im Hintergrund stattfinden, was keine leichte Aufgabe ist, schließlich soll das Formular nicht neu geladen werden. Über den Umweg eines unsichtbaren Frames (oder eines unsichtbaren Iframes) ist eine Lösung möglich. Der sichtbare Frame enthält das Formular, und der unsichtbare Frame enthält den Code, der die Datenbankabfrage durchführt und gegebenenfalls das Feld für den Banknamen füllt.

Beginnen wir zunächst mit dem Frameset: ein sichtbarer Frame und ein unsichtbarer.

<html>

<head>

<title>BLZ</title>

</head>

<frameset rows="100%, *">

  <frame border="0" framespacing="0" frameborder="0"

         src="ueberweisung.aspx" name="ueberweisung" />

  <frame border="0" framespacing="0" frameborder="0"

         src="blz.aspx" name="blz" />

</frameset>

</html>

Dies war das Listing für die ASP.NET-Variante; das PHP-Pendant sieht fast identisch aus, nur müssen PHP-Seiten statt ASP.NET-Seiten referenziert werden:

<html>

<head>

<title>BLZ</title>

</head>

<frameset rows="100%, *">

  <frame border="0" framespacing="0" frameborder="0"

         src="ueberweisung.php" name="ueberweisung" />

  <frame border="0" framespacing="0" frameborder="0"

         src="blz.php" name="blz" />

</frameset>

</html>

Das Überweisungsformular – es ist bewusst spartanisch gehalten (siehe Abbildung 25.3 weiter hinten) – beinhaltet bei uns nur zwei Felder: die Bankleitzahl und den Banknamen. Der Bankname soll nicht editierbar sein, was bekanntermaßen mit der folgenden Anweisung verhindert werden kann:

<input type="text" name="bankname" onfocus="this.blur();" />

Sobald das Textfeld den Fokus erhält, verliert es ihn auch sofort wieder.

Interessant ist, was passiert, sobald der Benutzer eine Bankleitzahl eingegeben hat. Im entsprechenden Textfeld tritt dann der onchange-Event-Handler auf den Plan, der genau dann aufgerufen wird, wenn das Feld editiert worden ist, den Fokus verloren hat und dabei seinen Wert geändert hat. In diesem Fall wird im unteren, unsichtbaren Frame die Datei blz.aspx bzw. blz.php neu geladen. Als Parameter wird die gerade eingegebene BLZ übergeben. Das sieht dann so aus:

<input type="text" name="blz"

   onchange="parent.frames['blz'].location.href=

            'blz.aspx?blz=' + this.value;" />

Es wird also im unteren Frame beispielsweise die URL blz.aspx?BLZ= 7000000 geladen (oder blz.php?BLZ=7000000 bei der PHP-Variante). Hier sehen Sie das vollständige Listing des Überweisungsformulars; zunächst wieder in der ASP.NET-Variante:

<html>

<head>

<title>&Uuml;berweisung</title>

</head>

<body>

<form name="ueberweisung">

BLZ <input type="text" name="blz"

           onchange="parent.frames['blz'].location.href=

                    'blz.aspx?BLZ=' + this.value;" /><br />

Bankname <input type="text" name="bankname"

                onfocus="this.blur();" />

</form>

</body>

</html>

Die PHP-Variante sieht wieder fast identisch aus, nur muss auf das PHP-Skript verwiesen werden:

<html>

<head>

<title>&Uuml;berweisung</title>

</head>

<body>

<form name="ueberweisung">

BLZ <input type="text" name="blz"

           onchange="parent.frames['blz'].location.href=

                    'blz.php?BLZ=' + this.value;" /><br />

Bankname <input type="text" name="bankname"

                onfocus="this.blur();" />

</form>

</body>

</html>

Kommen wir nun zum Skript blz.aspx bzw. blz.php. Dort müssen die folgenden Schritte unternommen werden:

>

Die in der URL übergebene BLZ muss ausgelesen werden.

 

>

In einer Datenbankabfrage muss der zugehörige Bankname herausgefunden werden.

 

>

Es muss JavaScript-Code generiert werden, der den ermittelten Banknamen in das Überweisungsformular einträgt.

Von ASP.NET-Seite her benötigt man noch das Wissen, dass die übergebene BLZ mit Request.QueryString("BLZ") ausgelesen werden kann. Das JavaScript-Kommando, um das Feld mit dem Banknamen zu füllen, lautet wie folgt (egal ob PHP oder ASP.NET):

parent.frames["ueberweisung"].document.forms["ueberweisung"].elements["bankname"].value = 

"Wert aus der Datenbank";

Damit lässt sich das Skript programmieren.

<%

Dim bankname As String = ""

If Not Request.QueryString("BLZ") Is Nothing AndAlso _

   Request.QueryString("BLZ") <> "" Then

   Dim strConn As String = "Trusted_Connection=yes;initial catalog=banken;data source=(local)"

   Dim b As New System.Data.SqlClient.SqlConnection(strConn)

   Dim sql As String = "SELECT bankname FROM banken "

   sql = sql & "WHERE blz='" & _

      Replace(Request.QueryString("BLZ"), "'", "") & "'"

   Dim cmd As New System.Data.SqlClient.SqlCommand()

   cmd.CommandText = sql

   cmd.Connection = b

   Dim r As System.Data.IDataReader = cmd.ExecuteReader()

   If r.Read() Then

      bankname = r("bankname")

   End If

   b.Close()

End If

%>

<html>

<head>

<title>BLZ</title>

<script type="text/javascript"><!--

parent.frames["ueberweisung"].document.forms["ueberweisung"].elements["bankname"].value = 

"<% =bankname %>";

//--></script>

</head>

<body>

</body>

</html>

Wird dieses Skript mit dem Parameter blz=7000000 aufgerufen, könnte die Ausgabe in etwa wie folgt aussehen:

<html>

<head>

<title>BLZ</title>

<script type="text/javascript"><!--

parent.frames["ueberweisung"].document.forms["ueberweisung"].elements["bankname"].value = 

"Landeszentralbank";

//--></script>

</head>

<body>

</body>

</html>

Die PHP-Variante sieht ähnlich aus, nur die Art des Datenbankzugriffs ist eine andere. Der Zugriff auf die übergebene Bankleitzahl erfolgt mit $_GET['BLZ']:

<?php

$bankname = '';

if (isset($_GET['BLZ']) && (int)$_GET['BLZ'] > 0) {

   mysql_connect('localhost', 'root', '123');

   mysql_select_db('banken');

   $sql = 'SELECT bankname FROM banken WHERE ';

   $sql = $sql . 'blz='' . (int)($_GET['BLZ']) . ''';

   $result = mysql_query($sql);

   if ($zeile = mysql_fetch_assoc($result)) {

      $bankname = $zeile['bankname'];

   }

   mysql_close();

}

?>

<html>

<head>

<title>BLZ</title>

<script type="text/javascript"><!--

parent.frames["ueberweisung"].document.forms["ueberweisung"]

.elements["bankname"].value = "<?php echo $bankname; ?>";

//--></script>

</head>

<body>

</body>

</html>

Bilder

Abbildung 25.3     Der Bankname wurde automatisch ergänzt.

Damit ist das Beispiel fertiggestellt. Sie müssen sich nun nur noch um die Rahmenparameter kümmern, wie beispielsweise um eine Datenbank mit allen inländischen Bankleitzahlen und den dazugehörigen Banknamen. Die hier vorgestellte Technik ist jedoch auch beliebig auf andere Anwendungen übertragbar – beispielsweise könnte bei einem Online-Bestellschein nach der Eingabe der Bestellnummer (z.  B. aus dem gedruckten Katalog) direkt der Produktname daneben erscheinen. Sie sind auch nicht auf Formular-Textfelder beschränkt, sondern können den Text auch per DHTML in einem <div>-Container ausgeben und somit frei(er) positionieren und vor allem besser layouten.

Ist Ihnen vor allem beim letzten Beispiel etwas aufgefallen? Genau, das Laden der Bankleitzahl ist eine AJAX-Anwendung – hier aber ganz ohne das XMLHttpRequest-Objekt gelöst worden. Erinnern Sie sich an meine Aussage aus Kapitel 18: AJAX ist keine neue Technologie, sondern lediglich ein fescher neuer Name.

 


Das ist zwar schon eine Weile her, aber zeigt dennoch, dass man ideologische Grenzen überwinden und über den Tellerrand schauen sollte.

Das Tutorial ist ein Auszug aus der 7. Auflage des Buches von Christian Wenz:

JavaScript und Ajax - Das umfassende Handbuch
Galileo Computing, 853 Seiten, 8. aktualisierte Auflage

Die Veröffentlichung des Kapitels erfolgt mit freundlicher Genehmigung von Galileo Press.

Mehr Informationen zum aktualisierten Fachbuch für Webentwickler gibt es hier: JavaScript und Ajax
 
Alle Kapitel des Buches:
1 Grundlagen
2 JavaScript-Praxis
3 Professionelles JavaScript
4 Web 2.0 und Ajax
5 Kommunikation
6 Serverseitige Programmierung
7 Sicherheit
8 Praxis
9 Anhang
Bilder


 

Kommentare
Achtung: Du kannst den Inhalt erst nach dem Login kommentieren.
Alternative Portrait
-versteckt-(Autor hat Seite verlassen)
  • 11.01.2018 - 15:21

Danke für das Tutorial.

Alternative Portrait
-versteckt-(Autor hat Seite verlassen)
  • 14.11.2008 - 11:31

Was macht JavaScript im HTML bereich, dafür gibt es doch den JavaScript bereich.

x
×
×