Dynamische Web-Seiten Weshalb? Wozu?

Web Technologien, wie HTML, CSS, ECMAScript haben typische Verwendungsmöglichkeiten, wie z.B. 

   HTML   Inhalt (content),                      meint "Was es ist"
   CSS    Design, Darstellung ( appearance ),    meint "Wie es ausschaut" 
   ECMAScript Verhalten (client-side behaviour), meint die "Seiten-Dynamik"
⁝ Client-Server Grundlegendes

Es gibt viele Kunden. Jeder Kunde möchte bedient werden. Die alltäglichen Handlungen von "Kellner und Kunden" werden mit IT-Technologien in Software abgebildet. Je universeller und vielfältiger die Umgangsmöglichkeiten miteinander sind, umso komponentenreicher wird Software und Hardware.

Client-seitig vs. Server-seitig Unterscheidungen

Bei verteilten Anwendungen sind mehrere Computer beteiligt ( IT-Infrastruktur ).

Im Bereich der Bereich der Software ( siehe z.B. de.wikipedia Software-Überblick ) und deren Entwicklung gibt es zahlreiche Methoden, Vorgehensmodelle und Entwurfsmuster ( Repository, Software development processe ), wie z.B. Meta Modeling, Feature-driven development maßgefertigter Software- und Datenbanklösungen, en.wikipedia Responsibility-driven_design , Systems_development_life_cycle , Software_development_process , Software_architecture , Domain-Driven Design und Domain-centered Methoden ( und weitere ).

Von den zahlreichen Programmierspachen (siehe z.B. de.wikipdia: Liste_von_Hallo-Welt-Programmen/Programmiersprachen de.wikipdia: Liste_von_Hallo-Welt-Programmen/Sonstige ), werden für die serverseitige Web-Programmierungen mehr oder minder häufig verwendet. Die Comtuter können weltweit verteilt sein. Eine Client-Server-Webanwendung (Bildquelle: wikipedia) betrachtet ( vereinfachend ) lediglich einen Server ( "servierender Kellner" ) und einen Client ( ein Kunde ).

Unterscheidungsmerkmale zwischen Client und Server sind z.B. Ressourcen, die eine Ablaufumgebung für Software und Hardware beinhalten und plattform-spezifisch oder plattform-unabhängig sein können.

client-seitige Dynamik server-seitige Dynamik
Browser-Resourcen, wie XHTML-, XSLT-Fähigkeiten, CSS Resources, URLs, JavaScript, Interface Bibliotheken, DOM, Dead Trees, JSON, AJAX, usw. Platform-Specifische Ressourcen, wie PHP, Java, JSP, Applets, ASP, .NET, Python, Django, Ruby on Rails, ColdFusion, IBM Lotus Notes/Domino, usw.
Clientseitig ist eine weltweite Vereinheitlichung und Einhaltung der "protokollarischen Vereinbarungen" notwendig. Eine clientseitige Anzeige von Webseiten nutzt i.a. einen Browser. Eine serverseitige Systemp-Pogrammierung kann alle Tiefen des serverseitigen Betriebssystems und Serversystems nutzen, wobei natürlich strikt auf die Netz-Konventionen zu achten ist.
client-seitige Dynamik server-seitige Dynamik
Webbasierte Programmierung Leitbilder der Software-Entwicklung

Das Internet ist 2012 ubiquitär (allgegenwärtig, überall, überall vertreten, omnipräsent). Das Internet nutzt zur Übertragung von von Informationen adressenbasierte Vermittlungen. Wegen der Verbreitung des Internet sind webbasierte Darstellungen vielfältig und Inhaltspräsentationen und "HTTP/HTTPS-gestützte Anwendungen" verbreitet. Es gibt

Webbasierte Anwendungen dynamisiert Web-Seiten

Ein Anwendungsprogramm (kurz Anwendung = Applikation, engl. application software, Anwendungssoftware ) braucht ein Betriebssystem und eine geeignete Laufzeitumgebung.
Es gibt verteilte Anwendungen , Webanwendung , de/en.wikipedia: Client-Server-Webanwendung (Bildquelle: wikipedia) , Web application .
Der Begriff App ist eine engl. Kurzform für application. Oft bezeichnet Mobile apps Anwendungen für Smartphones und Tablet-Computer,

Für zahlreiche Aufgaben ist eine personalisierte Präsentationsart und die "augenfreundliche" Dynamisierbarkeit von Web-Inhalten unverzichtbar. Einige Punkte sind:

  1. Personalisierte Präsentationen
  2. Reaktion auf/Verarbeitung von Benutzereingaben
  3. Situationsabhängige Anpassung/Aktualisierung der Inhalte von Web-Seiten
  4. Integration von Datenbankinhalten in anzuzeigende Seiten
  5. Realisierung von Sitzungen (Sessions)
Beispiel zu DHTML (Client, Dynamic HTML) Was meint "Dynamic HTML"?
  • "Dynamic HTML" dient als Sammelbegriff für verschiedene Techniken, die eine dynamische Veränderung von HTML-Seiten erlauben.
  • Wesentliche Bestandteile (DOM = Document Object Model, Ereignismodelle der Browser, Cascading Style Sheets )
  • DHTML macht Dokumente in Struktur und Aussehen vollständig bearbeitbar
  • DOM-API kann mit JavaScript genutzt werden
    Beispiel p-Tag: 
    <p id="Klick" onclick=
  "document.getElementById('Klick').firstChild.nodeValue='Danke!'">
  Bitte Klick
</p>
⁝ Client-seitige Dynamik Wie geht das?
Client-seitige Dynamik Wie funktioniert die Client-seitige Dynamik?

"Client-seitig" bedeutet stark vereinfacht "im Browser". Hierzu einige Punkte:

  • Server liefert als Antwort auf einen Request (ohne weitere besondere Aktivitäten) "vollständige" HTML-Seite aus
  • Diese Antwort des Servers enthält clienseitig ausführbare Bestandteile (oder Verweise auf solche)
  • Die Ausführung der Programmbestandteile einer HTML-Seite wird auf dem Client (im Kontext des Browsers) gemacht
  • Die clienseitig ausführbaren Bestandteile hängen von Browser-Einstellungen und Betriebssystem-Einstellungen ab.
  • Die Leistungsfähigkeit und Sicherheit des Browsers kann dauerhaft geändert, erweitert und beinträchtig werden. (z.B. duch Hilfsprogramme/Plug-ins).
  • Es gab 2 Ansätze für die client-seitige Dynamik: JavaScript/ECMAScript und Java Applets, die sich nur bedingt durchgesetzen konnten (2010).

Ein Browser muß u.a. zahlreiche typisierte Daten ("mime"-Typen) verarbeiten können.

 Funktion für get_mime_types()
  1.  function get_mime_types() { 
  2.    var ua = navigator.userAgent.toLowerCase()
  3.    if(/msie/.test(ua) && !/opera/.test(ua)) {
  4.      alert("MSIE zeigt keine navigator.mimeTypes an");
  5.      return "... schade ...";
  6.    }
  7.    var suf, typ, des, s = ua+"\u000a<table border='1'>";
  8.    for (var j=0, jj=navigator.mimeTypes.length; j < jj; j++) {
  9.      s += "<tr><td>"+j+"\u000a</td><td>"; 
  10.      suf = navigator.mimeTypes[j].suffixes;if(suf==="")suf=" ";
  11.      s += suf +"\u000a</td><td>"; 
  12.      typ = navigator.mimeTypes[j].type;if(typ==="")typ=" ";
  13.      s += typ + "\u000a</td><td>"; 
  14.      des = navigator.mimeTypes[j].description;if(des==="")des=" ";
  15.      s += des + "\u000a</td></tr>"; 
  16.    } return s + "</table>";
  17.   } 
  18.  
  19.  document.write(get_mime_types());

Dieses Programm gibt für den Opera-Broser (Ver 9.64) die folgende Tabelle aus:

Dieses Programm gibt für den Opera-Broser (Ver 9.64) die folgende Tabelle aus:
0   ...  
1 mim, mime, mht, mhtml application/mime  
2 pem application/x-pem-file  
3 crt, ca, cer, 509, der application/x-x509-ca-cert  
4 usr application/x-x509-user-cert  
5 pfx, p12 application/x-pkcs12  
6 js application/x-javascript  
7 js, es application/x-ecmascript  
8 js application/javascript  
9 js, es application/ecmascript  
10 js text/javascript  
11 js, es text/ecmascript  
12 jsobj application/vnd.opera.jsobj  
13 gif image/gif  
14 jpeg, jpe, jpg image/jpeg  
15 jpeg, jpe, jpg image/jpg  
16 jpeg, jpe, jpg image/pjpeg  
17 bmp image/bmp  
18 bmp image/x-windows-bmp  
19 bmp image/x-ms-bmp  
20 xbm image/x-xbitmap  
21 xbm image/xbm  
22 css text/css  
23 htm, html, shtml text/html  
24 txt text/plain  
25   application/x-opera-configuration-siteprefs  
26   application/x-opera-configuration  
27   application/x-opera-skin  
28   application/x-opera-configuration-skin  
29   application/x-opera-configuration-mouse  
30   application/x-opera-configuration-keyboard  
31   application/x-opera-configuration-toolbar  
32   application/x-opera-configuration-menu  
33   application/x-opera-widgets  
34 xml text/xml  
35   application/vnd.wap.xhtml+xml  
36 mxml application/xhtml+voice+xml  
37 mxml application/x-xhtml+voice+xml  
38 xht, xhtm, xhtml application/xhtml+xml  
39 wbxml application/vnd.wap.wbxml  
40 wmlc application/vnd.wap.wmlc  
41 wml text/wml  
42   text/vnd.wap.wml  
43 wbmp image/vnd.wap.wbmp  
44 svg, svgz, svgz, svgz image/svg-xml SVG Viewer 3.03
45 svg, svgz, svgz, svgz image/svg+xml SVG Viewer 3.03
46 svg, svgz, svgz, svgz image/vnd.adobe.svg+xml SVG Viewer 3.03
47 ico image/x-icon  
48 png image/png  
49 png image/x-png  
50 midi, mid, smf, kar audio/midi  
51 mid, midi, smf, kar audio/mid  
52 wav, bwf audio/wav  
53 wav, bwf audio/x-wav  
54 cpr image/x-cpr  
55 avi video/x-msvideo  
56 mpeg, mpg, mpe, m2v, m1v, mpa, m1s, m1a, m75, m15, mp2, mpm, mpv video/mpeg  
57 mp4 video/mp4  
58 pac application/x-ns-proxy-autoconfig  
59 jsc application/x-javascript-config  
60 torrent application/x-bittorrent  
61   text/enriched  
62 mp3, mp2, mpga, mpeg, mpg, m1s, m1a, mpm, mpa, m2a audio/mpeg  
63 m3u audio/x-mpegurl  
64 src application/x-wais-source  
65 sgml, sgm text/sgml  
66 g3f image/g3fax  
67 au, snd, ulw audio/basic  
68 qif application/qif  
69 csv text/comma-separated-values  
70 lha, lzh application/x-lha  
71 aiff, aif, aifc, cdda audio/x-aiff  
72 z application/x-compress  
73 gtar application/x-gtar  
74 gz, gzip, tgz application/x-gzip  
75 bz2 application/bzip2  
76 tar, tgz, gz, bz2 application/x-tar  
77 uu, uue text/x-uuencode  
78 latex, ltx application/x-latex  
79 tcl application/x-tcl  
80 tex application/x-tex  
81 texinfo application/x-texinfo  
82 roff, t, tr application/x-troff  
83 man application/x-troff-man  
84 me application/x-troff-me  
85 ms application/x-troff-ms  
86 mif application/x-framemaker  
87   audio/x-next  
88 pgp, asc application/pgp  
89 hqx application/mac-binhex40  
90 sit application/x-stuffit  
91 bin application/x-macbinary  
92 pict, pic, pct image/x-pict  
93   audio/x-macaudio  
94 qt, mov, mqv video/quicktime  
95 pdf application/pdf Adobe PDF Plug-In For Firefox and Netscape
96 xdp application/vnd.adobe.xdp+xml Adobe PDF Plug-In For Firefox and Netscape
97 xfd application/vnd.adobe.xfd+xml Adobe PDF Plug-In For Firefox and Netscape
98 ps, eps, ai application/postscript  
99 tif, tiff image/tiff  
100 exe, bat, pif, com, scr application/x-msdownload  
101 exe, bat, pif, com, scr application/x-msdos-program  
102 url application/internet-shortcut  
103 zip application/zip  
104 zip application/x-zip-compressed  
105 arj application/x-arj  
106 rar application/x-rar-compressed  
107 doc, dot, wiz, wzs application/msword  
108 rtf application/rtf  
109 rtx text/richtext  
110 xls, xl, xla, xlb, xlc, xld, xlk, xll, xlm, xlt, xlv, xlw application/vnd.ms-excel  
111 pot, ppa, pps, ppt, pwz application/vnd.ms-powerpoint  
112 mpp application/vnd.ms-project  
113 wcm, wdb, wks, wps application/vnd.ms-works  
114 hlp application/winhlp  
115 mdb application/x-msaccess  
116 crd application/x-mscardfile  
117 clp application/x-msclip  
118 m13, m14, mvb application/x-msmediaview  
119 wmf application/x-msmetafile  
120 mny application/x-msmoney  
121 pub application/x-mspublisher  
122 scd application/x-msschedule  
123 trm application/x-msterminal  
124 wri application/x-mswrite  
125   application/asx Npdsplay dll
126   video/x-ms-asf-plugin Npdsplay dll
127   application/x-mplayer2 Npdsplay dll
128 wm video/x-ms-wm Npdsplay dll
129 wma audio/x-ms-wma Npdsplay dll
130 wax audio/x-ms-wax Npdsplay dll
131 wvx video/x-ms-wvx Npdsplay dll
132 wmv video/x-ms-wmv Npdsplay dll
133 asf, asx video/x-ms-asf Npdsplay dll
134 smi, smil application/smil  
135 ssm application/streamingmedia  
136 rsml application/vnd.rn-rsml  
137 rnx application/vnd.rn-realplayer  
138 rmp application/vnd.rn-rn_music_package  
139 rmx application/vnd.rn-realsystem-rmx  
140 rjs application/vnd.rn-realsystem-rjs  
141 rm application/x-pn-realmedia  
142 ram, ra audio/x-pn-realaudio  
143 rv video/vnd.rn-realvideo  
144 rf image/vnd.rn-realflash  
145 rt text/vnd.rn-realtext  
146 rp image/vnd.rn-realpix  
147 sdp application/sdp  
148 sdp application/x-sdp  
149 rpm audio/x-pn-realaudio-plugin  
150 doc, wp4, wp5, wp6, wp, wkb, wpd application/wordperfect5.1  
151 dcr, dir, dxr application/x-director Macromedia Shockwave for Director Netscape plug-in, version 10.1
152 spl application/futuresplash Shockwave Flash 10.0 r22
153 swf application/x-shockwave-flash Shockwave Flash 10.0 r22
154 dd, xml application/vnd.oma.dd+xml  
155   application/octet-stream  
156   multipart/x-mixed-replace  
157   multipart/mixed  
158 nip application/x-drm DRM Store Netscape Plugin
159 * * Default Plug-in
160 mars application/vnd.adobe.x-mars Adobe PDF Plug-In For Firefox and Netscape
161 fdf application/vnd.fdf Adobe PDF Plug-In For Firefox and Netscape
162 xfdf application/vnd.adobe.xfdf Adobe PDF Plug-In For Firefox and Netscape
163 rtsp, rts application/x-rtsp  
164 flc, fli, cel video/flc  
165 aiff, aif, aifc, cdda audio/aiff  
166 mid, midi, smf, kar audio/x-midi  
167 qcp audio/vnd.qcelp  
168 gsm audio/x-gsm  
169 AMR audio/AMR  
170 aac, adts audio/aac  
171 aac, adts audio/x-aac  
172 caf audio/x-caf  
173 mpeg, mpg, m1s, m1v, m1a, m75, m15, mp2, mpm, mpv, mpa video/x-mpeg  
174 mpeg, mpg, m1s, m1a, mp2, mpm, mpa, m2a audio/x-mpeg  
175 3gp, 3gpp video/3gpp  
176 3gp, 3gpp audio/3gpp  
177 3g2, 3gp2 video/3gpp2  
178 3g2, 3gp2 audio/3gpp2  
179 sdv video/sd-video  
180 amc application/x-mpeg  
181 mp4 audio/mp4  
182 m4a audio/x-m4a  
183 m4p audio/x-m4p  
184 m4b audio/x-m4b  
185 m4v video/x-m4v  
186 pntg, pnt, mac image/x-macpaint  
187 pict, pic, pct image/pict  
188 qtif, qti image/x-quicktime  
189 sgi, rgb image/x-sgi  
190 targa, tga image/x-targa  
191 tif, tiff image/x-tiff  
192 jp2 image/jp2  
193 jp2 image/jpeg2000  
194 jp2 image/jpeg2000-image  
195 jp2 image/x-jpeg2000-image  
196   application/x-opera-configuration-voice  
197   application/x-opera-library-voice  
198 xml, xaml application/xml Windows Presentation Foundation (WPF) plug-in for Mozilla browsers
199 mp3 audio/mp3  
200 iso application/x-iso-image  
201 ttf, ttc application/x-font-ttf  
202 dmg application/x-apple-diskimage  
203 docx application/vnd.openxmlformats-officedocument.wordprocessingml.document  
204 dotx application/vnd.openxmlformats-officedocument.wordprocessingml.template  
205 xlsx application/vnd.openxmlformats-officedocument.spreadsheetml.sheet  
206 xltx application/vnd.openxmlformats-officedocument.spreadsheetml.template  
207 pptx application/vnd.openxmlformats-officedocument.presentationml.presentation  
208 ppsx application/vnd.openxmlformats-officedocument.presentationml.slideshow  
209 potx application/vnd.openxmlformats-officedocument.presentationml.template  
210 sldx application/vnd.openxmlformats-officedocument.presentationml.slide  
211 docm application/vnd.ms-word.document.macroEnabled.12  
212 dotm application/vnd.ms-word.template.macroEnabled.12  
213 xlsm application/vnd.ms-excel.sheet.macroEnabled.12  
214 xltm application/vnd.ms-excel.template.macroEnabled.12  
215 xlsb application/vnd.ms-excel.sheet.binary.macroEnabled.12  
216 xlam application/vnd.ms-excel.addin.macroEnabled.12  
217 pptm application/vnd.ms-powerpoint.presentation.macroEnabled.12  
218 ppsm application/vnd.ms-powerpoint.slideshow.macroEnabled.12  
219 potm application/vnd.ms-powerpoint.template.macroEnabled.12  
220 ppam application/vnd.ms-powerpoint.addin.macroEnabled.12  
221 sldm application/vnd.ms-powerpoint.slide.macroEnabled.12  
222 onetoc, onetoc2, onetmp, onepkg application/onenote  
223 odb application/vnd.oasis.opendocument.database  
224 odc application/vnd.oasis.opendocument.chart  
225 odf application/vnd.oasis.opendocument.formula  
226 odg application/vnd.oasis.opendocument.graphics  
227 otg application/vnd.oasis.opendocument.graphics-template  
228 odi application/vnd.oasis.opendocument.image  
229 odm application/vnd.oasis.opendocument.text-master  
230 odp application/vnd.oasis.opendocument.presentation  
231 otp application/vnd.oasis.opendocument.presentation-template  
232 ods application/vnd.oasis.opendocument.spreadsheet  
233 ots application/vnd.oasis.opendocument.spreadsheet-template  
234 odt application/vnd.oasis.opendocument.text  
235 ott application/vnd.oasis.opendocument.text-template  
236 oth application/vnd.oasis.opendocument.text-web  
237 scr application/x-silverlight 3.0.40723.0
238 scr application/divxplayer-plugin  
239 vcf text/x-vcard  
240 imy text/x-imelody  
241 mime message/rfc822  
242 mime multipart/related  
243   application/npruntime-scriptable-plugin;DeploymentToolkit Java(TM) Platform SE binary
244   application/x-msoffice12 Office Plugin for Netscape Navigator
245 pdfxml application/vnd.adobe.pdfxml Adobe PDF Plug-In For Firefox and Netscape
246   application/x-silverlight-2 3.0.40723.0
247 xbap application/x-ms-xbap Windows Presentation Foundation (WPF) plug-in for Mozilla browsers
Wozu wird JavaScript/ECMAScript genutzt? ... einführend ... einfach ...
  • Interpretierte Programmiersprache, Ansätze der Objektorienierung, keine Typisierung
  • Vielzwecksprache ohne Ausrichtung an speziellem Anwendungsbereich
  • ECMAScript -Programm in HTML-Dokumente eingebettet mittels script-Tag (häufig im head-Element): 
    <script">
  alert("Hallo Welt!");
</script>
  • ECMAScript-Programme auch aus anderen Dateien einbindbar: 
    <script type="text/javascript" src="quadrat.js"></script>
  • Objektorientierter Zugriff auf Umgebung des Programmlaufs (z.B. Bestandteile des Browsers, W3C: DOM)
  • Interaktionen des Benutzers mit Hilfe von Eventhandlern zu verarbeiten
  • Beispiele für Eventhandler onfocus, onclick, onsubmit (nur für Formulare)
  • Eventhandler als Attribute von HTML-Tags vorgesehen, über die Zuordnung von JavaScript-Code erfolgen kann.
    Beispiel: 
    <html>
<head>
<title>Quadratberechnung</title>
<script>
  function Quadrat() {
    var x = document.Formular.Eingabe.value;
    var Ergebnis = x * x;
    alert("Das Quadrat von " + x + " = " + Ergebnis);
  }
</script>
</head>
<body>
  <form name="Formular" action="">
    <input type="text" name="Eingabe" size="3">
    <input type="button" value="calc Quadrat" onClick="Quadrat()">
  </form>
</body> </html>
ECMAScript (clientseitig, einführend) Was ist das?

ECMAScript ersetzt die proprietären Entwicklungen, wie z.B. 

JavaScript   ( Trademark of Oracle Corporation)
JScript      ( Microsoft, Windows Script engine;.js,.jse,.wsf,.wsc)
ActionScript ( Macromedia Inc. owned by Adobe Systems ), usw.

ECMAScript ist durch ECMA International (ECMA-262 und gleich ISO/IEC 16262) standardisiert (siehe Link zur Norm ECMAScript-262 pdf 2.5MB .

ECMAScript ist die "Sprache des Web":

Douglas Crockford:
"JavaScript kam aus dem Nichts und breitete sich in alarmieren kurzer Zeit weltweit aus. Es gab nie eine Laborphase, in der sie ausprobiert und aufpoliert werden konnte. Sie wurde, so wie sie war, direkt in Netscape Navigator 2 integriert und war zu diesem Zeitpunkt nicht sonderlich ausgereift. Als Java®-Applets versagten, wurde JavaScript zur "Sprache des Web". Die Popularität von JavaScript hat nahezu nichts mit seiner Qualität als Programmiersprache zu tun."


Mit ECMAScript können

  • Kleine Programme ohne viel Overhead erstellt werden
  • Der Server entlastet und Netzlast-Reduzierungen erreicht werden (AJAX)
  • Der User-Komfort gesteigert
  • Dokumentbestandteilen (DHTML) dynamisiert und personalisiert werden
  • ... und selbständige Web-Applikationen entwickelt werden (Animated Interface, desktopähnlichen Webanwendungen, client-side applications, personalisierte Widgets, Desktop-Gadgets, Authoring Tools). Siehe z.B.: w3.org: widgets, de.wikipedia: Widget, en.wikipedia: GUI_widget
Nachteile von JavaScript Was ist ungünstig?
  • Inkompatibilitäten zwischen Sprachversionen und Browsern
  • Interpretation am Client deaktivierbar
  • Starke Vermischung von HTML-Auszeichnung und ausführbaren Bestandteilen
  • Programmcode ist am Client sichtbar
  • Das Durchlaufen des DOM-Baumes kann destruktiv ausgenuzt werden
Java Applets (Client) Wozu Applets?
  • Die Programmiersprache Java mit den zugehörigen Bibliotheken gilt als mächtige Basis
  • Applets als Java-Klassen werden von der Klasse Applet abgeleitet
  • Applets werden (mit applet- oder object-Tag) in HTML-Seiten eingebettet
  • Ausführbarer Code (.class) wird vom Server auf Client übertragen
  • Interpretation durch Browser und "Java-Byte-Code der Sandbox"
  • Eingeschränkter Zugriff auf lokale Ressourcen und auf Netzwerk (nur auf Server, von dem Applet geladen wurde)
  • Einschränkungen können durch signierte Applets reduziert werden
  • Applets durchlaufen bei Anzeige der HTML-Seite festgelegte Zustandsfolge 
     Init --> Start <===> Stop --> Destroy
  • Applets können Methoden, die bei Zustandsübergängen aufgerufen werden, implementieren (insbes. paint-Methode) 
// Beispiel FirstApplet.java:
import java.awt.*
import java.applet.*

public class FirstApplet extends Applet
{
  String message="";
  public void init()
  {
    message=getParameter("message")
  }
  public void paint (Graphics g)
  {
    g.drawString(message, 10,15);
  }
}

// Beispiel Meldung.html:
<html>
  ...
  <body>
   ...
   <applet code="FirstApplet.class"
        width="350" height="30">
        <param name="message"
           value="Eine Meldung">
   </applet>
   ...
</body>
</html>

Der Einsatz von Applets im Netz erfüllt vielfach nicht die Erwartungen. Hierfür gibt es zahlreiche Gründe ...



⁝ Server-seitige Dynamik Wie geht das?
Server-seitige "Dynamik"? Wie ist das?

Auf der Serverseite sind stets auch singuläre, nicht standardisierte Lösungen möglich. Solange die Netz-Protokolle (z.B. HTTP) eingehalten werden, ist ein Programmierer in der Wahl von serverseitigen Hilfsmittel, Programmiersprachen, Ressourcen, usw. frei.

Eine Server-seitige "Dynamik" bezieht sich mehr auf "Datenströme" und weniger auf eine dynamische Visualisierung (Browser-Layout). Hierzu muß clienseitig ausführbarer Code in die Server-Response eingefügt werden.

Common Gateway Interface Wozu wird CGI verwendet?
  • CGI ermöglicht das Starten von Programmen auf dem Server als Reaktion auf Anfragen
  • Anfrage bezieht sich auf ausführbare Dateien in besonderem Verzeichnis auf dem Server (meist /cgi-bin/)
  • Möglichkeiten zum Start der Programme in Server- Konfiguration festgelegt
  • Beliebige Programmier-/Skriptsprachen (s.u.) einsetzbar (Voraussetzung: Lauffähigkeit auf Server)
  • Programme für jede Anfrage als separate Prozesse gestartet
  • Anwendungen erhalten Daten zur Verarbeitung über URL und Umgebungsvariablen oder Standard-Eingabe
  • Ausgaben der Anwendungen auf der Standard-Ausgabe, die vom Web-Server gelesen und an den Client weitergeleitet werden
  • Insbesondere zur Verarbeitung von Daten aus HTMLFormularen beliebte Technik: 
    <html>
  ...
  <body>
  ...
  <form action="/cgi-bin/myApplication.exe">
    Vorname: <input type="text" name="vn" value=" ">
    Nachname: <input type="text" name="nn" value=" ">
  <input type="submit" name="submit" value="Weiter">
  </form>
  ...
</body>
</html>


⁝ CGI, GET, POST, AJAX Einführend, Vor- und Nachteile
  • Einfache Realisierung von Dynamik unabhängig vom Client
  • Weitgehende Freiheit bezüglich einzusetzender Programmiersprache

Welche Nachteile hat CGI?

  • Hohe Belastung des Servers bei großer Zahl von Anfragen und entsprechender Zahl von Prozessen
  • Zustandsinformationen gehen im Normalfall verloren
Alternativen zur Verminderung der Nachteile:
  • FastCGI: Persistente Prozesse, Anfragen werden aus Warteschlange abgearbeitet
  • ISAPI (Microsoft)/ NSAPI (Netscape): Auf spezielle Web-Server zugeschnittene Schnittstellen, im Adressraum des Web-Servers laufende Prozesse
Welche Sprachen gibt es beim Server? Sprachen, Sprachen, Sprachen ...

Für die Verarbeitung von Netzdaten können beim Server zahlreiche Sprachen und Systeme eingesetzt werden (interpretierend, übersetzend).

  • Server-seitig werden für (kleinere) Anwendungen häufig Skriptsprachen (Pearl, PHP, ASP, usw.) eingesetzt
  • Voraussetzung: Verfügbarkeit entsprechender Interpreter auf dem Server
  • Zwei Ansätze der Abarbeitung:
    • Mit Hilfe separater Interpreter
    • Über Webserver-Erweiterungen (Interpreter in Webserver integriert)
  • Häufig eingesetzte Skript-Sprachen:
    • Perl - (P)ractical (E)xtraction and (R)eport (L)anguage
      • mächtige Skript-Sprache, zahlreiche Module für spezielle Aufgabenstellungen
      • Skripte in separaten Dateien, nicht in HTML-Code eingebettet
    • PHP - (H)ypertext (P)re(p)rocessor
      • In HTML-Code eingebettete Skripte und separate Skript-Dateien
      • Skripte in <?php ...?> eingeschlossen
Beispiel: PHP und Appache-Server ... gehören zusammen ...
  • Umfangreiche Sprache mit zahlreichen vordefinierten Funktionen
  • Schwache Typisierung, keine Typbindung von Variablen
  • Objektorientierung
  • Anweisungen für übliche Kontrollstrukturen
  • Vielfältige String- und Array-Funktionen
  • Unterstützung regulärer Ausdrücke zur Prüfung/Veränderung von Strings
  • Einfache Realisierung von Datenbankzugriffen mittels ODBC
  • Funktionen zur Realisierung/Verwaltung von Sessions
  • Funktionen zur Verarbeitung von XML
  • Funktionen zur Erzeugung von Bildern und PDF-Dokumenten
Beispiel: JavaScript aus PHP heraus aufrufen? Wie geht das?

Wie kann ich JavaScript-Funktionen aus PHP heraus aufrufen?

von Johannes Frömter: JavaScript läuft auf dem Client (im Browser), PHP läuft auf dem Server, also genau am anderen Ende der Welt; wenn die HTML-Seite beim Browser ankommt, ist PHP mit der Arbeit schon fertig. Der Aufruf einer JavaScript-Funktion aus PHP ist also prinzipiell unmöglich.

Allerdings kann man Werte von PHP an JavaScript übergeben; um eine in PHP vorhandene Variable in JavaScript verwenden zu können, muss man sie innerhalb eines <script>-Bereiches ausgeben: 

<script type="text/javascript">
<?php
printf("js_var = '%s';",
        strtr(addslashes($php_var),
        array("\r" => '\r', "" => ' '))
      );
?>
</script>

Auf diese Weise wird die JavaScript-Variable js_var mit dem Wert der PHP-Variable $php_var vorbelegt. Natürlich kann man so auch beliebigen ausführbaren JavaScript-Code ausgeben, den der Browser anschließend verarbeitet. Wichtig ist nur zu verstehen, dass ein logischer, räumlicher und auch zeitlicher Schnitt zwischen PHP- und JavaScript-Code vorhanden ist.

Beispiel: PHP aus JavaScript heraus aufrufen? Wie geht das?

von Johannes Frömter: Da JavaScript auf dem Client und PHP auf dem Server läuft, kann man aus JavaScript auch keine PHP-Funktionen direkt aufrufen. PHP wird immer als das Resultat eines HTTP -Requests ausgeführt, also beim Holen einer Seite mit GET oder beim Verarbeiten eines Formulares mit POST. Es ist also nicht möglich, aus JavaScript heraus eine PHP-Funktion aufzurufen, außer durch Erzeugen eines HTTP -Requests (durch den von PHP eine neue Seite generiert wird).

Einen GET-Request mit JavaScript erreicht man prinzipiell durch 

<script type="text/javascript" language="JavaScript">
window.location.href = "script.php?php_var=" + escape(js_var);
</script>
Im dadurch aufgerufenen PHP-Skript script.php ist dann 
die Variable $_REQUEST['php_var'] 
mit dem Wert von js_var verfügbar. 
Einen POST- oder GET-Request mit einem Formular erreicht man durch 

<script type="text/javascript" language="JavaScript">
document.formularname.submit();
</script>
VB-ASP-Webseiten und MS-Server

Ein Window-Server verwendet i.a. Aktive-Server-Pages (ASP-Webseiten). Ein Rahmen für programmierbare VB-ASP-Webseiten sieht etwa so aus: 

<%@ Page Language="VB"
    AutoEventWireup="false"
    CodeFile="Default.aspx.vb"
    Inherits="_Default" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
<title>Unbenannte Seite</title>
</head>
<body>
<form id="form1" runat="server">
<div>
    
</div>
</form>
</body>
</html>

Ein "Hello World" für Window-Webservices sieht etwa so aus: 

Imports System.Web
Imports System.Web.Services
Imports System.Web.Services.Protocols

<WebService(Namespace:="http://tempuri.org/")> _
<WebServiceBinding(ConformsTo:=WsiProfiles.BasicProfile1_1)> _
<Global.Microsoft.VisualBasic.CompilerServices.DesignerGenerated()> _
Public Class Service
     Inherits System.Web.Services.WebService

    <WebMethod()> _
    Public Function HelloWorld() As String
        Return "Hello World"
    End Function

End Class
Java Servlets und Sun-Server
  • Java-Programme, die dem Servlet API entsprechen: Java-Klassen, welche die Servlet-Klasse oder eine davon abgeleitete Klasse erweiteren (z.B. die Klasse HttpServlet)
  • Laufen in der Umgebung einer Servlet Engine (z.B. Tomcat aus Apache Jakarta Project)
  • Aufrufe ähnlich dem CGI-Verfahren
  • Servlet Engine leitet Anfragen an Servlets weiter
  • Servlet-Verzeichnisse ("Zonen") in Konfiguration der Servlet-Engine bekanntzumachen
  • Bei erster Anfrage wird auszuführende Klasse in JVMProzess geladen und eine Instanz erzeugt
  • Jede weitere Anfrage wird durch neuen Thread der einen Instanz abgearbeitet
  • Evtl. Synchronisation der Threads erforderlich 
// Beispiel FirstServlet.java:
import java.io.*;
import javax.servlet.*;
import javax.servlet.http.*;
public class FirstServlet extends HttpServlet
{
  public void doPost(HttpServletRequest req,
HttpServletResponse res)
        throws ServletException, IOException
        {
          PrintWriter out;
          res.setContentType ("text/html");
          out = res.getWriter();
          out.println ("<HTML><HEAD></HEAD>);
          out.println ("<BODY>");
          out.println ("<B>Ein einfaches Servlet</B>");
          out.println ("</BODY></HTML>");
          out.close;
        }
}

<!-- HTML-Datei: -->
<HTML>
  ...
  <BODY>
  ...
  <FORM ACTION="http://myServer/testZone/FirstServlet"
METHOD="POST">
  ...
  <INPUT TYPE="submit" NAME="Submit" VALUE="Execute">
  </FORM>
...
Java Server Pages (JSP)
Beispiel für JSP-Datei: 
<%! int count = 0; %>
<% count++ %>
<html>
...
<body>
  ...
  Dies ist Aufruf Nummer <%= count %>!
  ...
</body>
</html>

Auch Teile der HTML-Auszeichnung können generiert werden:

<html>
...
<% String s1="bo";
   String s2="dy";
   String s= "<" + s1 + s2 + ">";
%>
<%= s %>
   Dies ist Inhalt des Body-Elementes...
</body>
</html>
  • Java Server Pages stellen eine Erweiterung der Java Servlets dar
  • Java Server Pages enthalten Scripting-Elemente in HTMLCode eingebettet
  • Statische Bestandteile von HTML-Seiten müssen daher nicht durch Ausgabeanweisungen erzeugt werden
  • Scripting-Elemente sind besonders ausgezeichnete Fragmente von Java-Code
  • Wichtige Bestandteile des Scriptings
    • Globale Deklarationen, in <%! ... %> eingeschlossen
    • Scriptlets, normaler Java-Code, in <% ... %> eingeschlossen
    • Ausdrücke, deren Wert textuell in HTML-Code eingefügt wird, in <%= ... %> eingeschlossen
  • Java Server Pages werden in entsprechende Java Servlets umgewandelt, die dann die ursprüngliche Anfrage bedienen 
    |        |                  generiert        |
|        |  Request         compilier        |
| Client |           S e r v e r             |
| . . .  |  .  .  .  .  .  .  .  .  .  .  .  |

     Browser  -----> JSP-Seite  ------>   Servlet

<--------------------------------
                   Response
Beispiel für JSP-Datei 
<%! int count = 0; %>
<% count++ %>
<html>
  ...
  <body>
  ...
  Dies ist Aufruf Nummer <%= count %>!
  ...
</body>
</html>
Auch Teile der HTML-Auszeichnung können generiert werden: 
<html>
...
<% String s1="bo";
   String s2="dy";
   String s= "<" + s1 + s2 + ">";
%>
<%= s %>
  Dies ist Inhalt des Body-Elementes...
 </body>
</html>