Movatterモバイル変換

JavaScript und AJAX
839 S., mit DVD, 39,90 Euro
Rheinwerk Computing
ISBN 3-89842-859-1

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 beispielsweisehttp://servername/skriptname.php. Der Aufrufc:\inetpub\wwwroot\skriptname.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() undinnerHTML). 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 = nDim r As System.Data.IDataReader = cmd.ExecuteReader()While r.Read()   news = news & r("headline") & " +++ "End Whilen.Close()' Sonderzeichen ersetzennews = Replace(news, vbCrLf, "") ' Umbrüche entfernennews = 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 speichernvar news = "<% =news %>";//--></script></head><bodyonload="ticker_div('ticker', news, 500);"><div></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 FunktionServer.HTMLEncode() und in PHP die Funktionhtmlspecialchars()), 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.

<?phpmysql_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("\n", '', $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 speichernvar news = "<?php echo $news; ?>";//--></script></head><bodyonload="ticker_div('ticker', news, 500);"><div></div></body></html>

Hier klicken, um das Bild zu Vergrößern

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 deronchange-Event-Handlerauf 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 Dateiblz.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 URLblz.aspx?BLZ= 7000000 geladen (oderblz.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 Skriptblz.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 mitRequest.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 Parameterblz=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>

Hier klicken, um das Bild zu Vergrößern

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 dasXMLHttpRequest-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.