WBA WS1213 ALL - AvA

Webbasierte Anwendungen
Organisatorisches
Univ.-Prof. Dr.-Ing. habil. Gero Mühl
Architektur von Anwendungssystemen (AVA)
Fakultät für Informatik und Elektrotechnik (IEF)
Universität Rostock
Mobiltelefone bitte ausschalten!
Gero Mühl
Webbasierte Anwendungen / Organisatorisches
2
Dozent
Name
Univ.-Prof. Dr.-Ing. habil. Gero Mühl
Adresse
Architektur von Anwendungssystemen
Fakultät für Elektrotechnik und Informatik
Universität Rostock
Albert-Einstein-Str. 22
Büro
Telefon
E-Mail
WWW
Sprechstunde
Raum 267
0381 / 498 7621
[email protected]
http://wwwava.informatik.uni-rostock.de
Dienstag, 15:00 – 16:00 Uhr und
nach Vereinbarung
Gero Mühl
Webbasierte Anwendungen / Organisatorisches
3
Motivation
> Das Internet und das WWW haben die Informatik durch
die weltweite Vernetzung von Rechnern revolutioniert
>
>
>
>
>
>
Zugriff auf entfernte Rechner
E-Mail
Zugriff auf entfernte Dokumente und Verlinkung derselben
Abruf aktueller Informationen mit dynamischen Webseiten
Webbasierte E-Commerce-Anwendungen
…
> Webbasierte Anwendungen
> haben das alltägliche Leben durchdrungen und
> verdrängen zum Teil bereits Desktop-Anwendungen
(z.B. Google Docs)
> Was genau ist aber eine webbasierte Applikation?
Gero Mühl
Webbasierte Anwendungen / Organisatorisches
4
Motivation
> Eine webbasierte Anwendung
ist eine Anwendung, mit der
der Benutzer über einen
gängigen Webbrowser
(Internet Explorer, Mozilla
Firefox etc.) interagiert.
> Der Webbrowser stellt also die
Oberfläche der Anwendung.
> Teile der Anwendungsfunktionalität werden
üblicherweise durch einen
entfernten Webserver erbracht,
mit dem mittels HTTP
kommuniziert wird.
Gero Mühl
Webbasierte Anwendungen / Organisatorisches
5
Inhalt und Lehrziele der Vorlesung
> Inhalt
> Die Vorlesung gibt einen Überblick über die Grundlagen
webbasierter Anwendungen sowie die verschiedenen
Möglichkeiten diese zu realisieren.
> Lehrziele
> Die Studierenden sollen
> die Architektur webbasierter Anwendungen verstehen,
> Protokolle, Dienste und Techniken kennen lernen sowie
> Anwendungen mit verschiedenen Techniken
implementieren können.
Gero Mühl
Webbasierte Anwendungen / Organisatorisches
6
Voraussetzungen und Materialien
> Voraussetzungen
> Informatik-Grundkenntnisse,
> Gute Programmierkenntnisse (z.B. in Java)
> Grundkenntnisse im Bereich Verteilte Systeme
> Materialien
> werden im Stud.IP bereitgestellt
> Modulprüfung
> voraussichtlich mündliche Prüfung
> erfolgreiche Bearbeitung der Übungsaufgaben
Voraussetzung für die Zulassung zur Prüfung
Gero Mühl
Webbasierte Anwendungen / Organisatorisches
7
Vorlesung
> Freitag, 11-13 Uhr c.t.,
Raum SR 110, A.-Einstein-Str. 22, Beginn 19.10.12
> Folien teilweise in englischer Sprache
> In der Regel (kurz) vor der Vorlesung im Stud.IP verfügbar
> Vortrag auf Deutsch
> Zwischenfragen erwünscht!
> Prüfungsrelevante Inhalte können sich aus Diskussionen und
Tafelanschrieben ergeben!
> Auf Literatur wird im jeweiligen Foliensatz verwiesen
> Kapitel in Büchern, Artikel in Zeitschriften oder Papiere bei
Konferenzen und Workshops, Webseiten etc.
Gero Mühl
Webbasierte Anwendungen / Organisatorisches
8
Übung
> Montag, 15-17 Uhr c.t.,
Raum SR 110, A.-Einstein-Str. 22, Beginn 22.10.10
> Inhalt
>
>
>
>
>
Vertiefung des Vorlesungsstoffes
Rechenaufgaben
Programmieraufgaben
Kennenlernen von Produkten und Standards
Vorbereitung auf die Abschlussprüfung
> Übungsblätter im Stud.IP verfügbar
Gero Mühl
Webbasierte Anwendungen / Organisatorisches
9
Gliederung der Vorlesung
0
Organisatorisches
3
1
Einführung
3.1
3.2
3.3
3.4
Grundlegende Dienste und
Anwendungen des Internet
Domain Name Service
E-Mail
FTP
Telnet/SSH
4
4.2
4.3
4.4
4.5
4.6
World Wide Web (WWW)
Client/Server-Architektur
Hypertext Transfer Protocol
Transport Layer Security
Hypertext Markup Language
Cascading Style Sheets
1.1 Geschichte des Internets
1.2 Geschichte des WWW
2
Grundlagen
2.1
2.2
2.3
2.4
2.5
2.6
Netzwerk-Referenzmodelle
Vermittlungsschicht
Transportschicht
Socket-Schnittstelle
Zeichenkodierung
Dienstgüteanforderungen
Gero Mühl
Webbasierte Anwendungen / Organisatorisches
10
Gliederung der Vorlesung
5
Client-seitige Techniken
7
5.1
5.2
5.3
5.4
JavaScript
Ajax
Java Applets
Java RMI
7.1 Apache Wicket
7.2 Google Web Toolkit
6
Server-seitige Techniken
6.1
6.2
6.3
6.4
6.5
6.6
Common Gateway Interface
PHP
Java Servlets
Java Server Pages
Java Server Faces
Enterprise Java Beans
Gero Mühl
Toolkits
Webbasierte Anwendungen / Organisatorisches
11
Literatur
> Cristian Ullenboom. Java ist auch eine Insel. Galileo
Computing, 2003.
> Sun Microsystems. The Java Tutorials.
> Sun Microsystems. Java SE APIs & Documentation.
> Sun Microsystems. Java EE Tutorials.
> Sun Microsystems. Java EE APIs & Documentation.
> W3C Technical Reports and Publications.
> Internet Engineering Task Force (IETF), Requests for
Comments (RFCs)
> Andrew S. Tanenbaum. Computer Networks, 4th Edition.
Pearson Education, 2002.
> Andrew S. Tanenbaum und Maarten van Stehen. Distributed
Systems: Principles and Paradigms, 2nd Edition. Prentice Hall
International, 2006
Gero Mühl
Webbasierte Anwendungen / Organisatorisches
12
AVA-Veranstaltungen im WS 2012/13
> Verteilte Informationssysteme (Bachelor WIN, 2IV = 3CP)
> Integrierte Veranstaltung: dienstags, 13-15 Uhr c.t.,
Raum 037, A.-Einstein-Straße 22
Beginn 23.10.12
> Webbasierte Anwendungen (Bachelor, 2VL + 2UE = 6CP)
> Vorlesung: freitags, 11-13 Uhr c.t.,
Raum SR 110, A.-Einstein-Straße 22,
Beginn 19.10.12
> Übung:
montags, 15-17 Uhr c.t.,
Raum SR 110, A.-Einstein-Str. 22
Beginn 22.10.12
Gero Mühl
Webbasierte Anwendungen / Organisatorisches
13
AVA-Veranstaltungen im WS 2012/13
> KSWS Anwendungssysteme (Master, 2VL + 2Ü + 2P)
> Vorlesung: dienstags, 11-13 Uhr c.t.,
A.-Einstein-Str. 3, Raum SR 204
Beginn 16.10.12
> Middleware-Konzepte (Master, 2VL = 3CP)
> Vorlesung: donnerstags, 13-15 Uhr c.t.,
Raum SR 109, A.-Einstein-Str. 22
Beginn 18.10.12
Gero Mühl
Webbasierte Anwendungen / Organisatorisches
14
Lehrangebot des Lehrstuhls AVA
1./2. Semester
4. Semester
Veranstaltungen in
Bachelor-Studiengängen
Gero Mühl
Algorithmen
und Datenstrukturen
Vortragsseminar
Verteilte
Informationssysteme
Webbasierte
Anwendungen
6./7. Semester
Applikationsserver und
Anwendungsintegration
Literatur-/
Bachelor-Arbeit
1./2. Semester
Verteilte
Algorithmen
MiddlewareKonzepte
1. oder
2. Semester
KSWS
Anwendungssysteme
Projekt-Arbeit
3. Semester
Master-Arbeit
5. Semester
Veranstaltungen in
Master-Studiengängen
Abstrakte
Datentypen
Middleware-Konzepte / Organisatorisches
15
Forschung am Lehrstuhl AVA
> Forschungsbereiche
>
>
>
>
>
>
>
>
>
Verteilte Anwendungssysteme
Middleware, Algorithmen und Protokolle für verteilte Systeme
Organic Computing und Selbstorganisation
Energieeffizienter Betrieb von Rechensystemen
Sekundärspeichersysteme mit neuartigen Speichergeräten
Publish/Subscribe-Systeme
Event-Driven Architecture (EDA)
Complex Event Processing (CEP)
Komposition von Webservices
> Promotion
> AVA bietet Stellen in Forschungsprojekten an
> Ideale Vorbereitung: Abschlussarbeit im selben Themengebiet
Gero Mühl
Webbasierte Anwendungen / Organisatorisches
16
Studentische Arbeiten
> Abschlussarbeiten haben immer Bezug zu den aktuellen
Forschungsthemen des Lehrstuhls
> Aufgabenstellung entsteht im Dialog, basierend auf
Interessen und Vorkenntnissen des Studierenden
> Bearbeitung der Aufgabenstellung mittels wissenschaftlicher
Methoden steht im Vordergrund
> Vorheriger Besuch von Lehrveranstaltungen des Lehrstuhls
ist hilfreich, aber nicht Voraussetzung
> Beispiele für mögliche Themen siehe AVA-Webseite
> http://wwwava.informatik.uni-rostock.de/ava_studarb.html
Gero Mühl
Webbasierte Anwendungen / Organisatorisches
17
Vielen Dank für Ihre Aufmerksamkeit!
Univ.-Prof. Dr.-Ing. habil. Gero Mühl
[email protected]
http://wwwava.informatik.uni-rostock.de
Gero Mühl
Webbasierte Anwendungen / Organisatorisches
18
Webbasierte Anwendungen
Historie
Univ.-Prof. Dr.-Ing. habil. Gero Mühl
Architektur von Anwendungssystemen (AVA)
Fakultät für Informatik und Elektrotechnik (IEF)
Universität Rostock
Überblick
> Vom ARPANET zum Internet
> Evolution und Struktur des Internet
> Evolution des World Wide Web (WWW)
Gero Mühl
Webbasierte Anwendungen / Historie
2
Vom ARPANET zum Internet
Gero Mühl
Webbasierte Anwendungen / Historie
3
Historischer Hintergrund
> 1957: Sowjetunion startet die ersten Satelliten Sputnik I + II
> Sputnik-Schock in USA und Westeuropa
> Verlust der Technologieführerschaft
> Atomare Bedrohung durch Interkontinentalraketen
> 1958: Gründung der Advanced Research Projects Agency
(ARPA) – später Defense Advanced Research Projects
Agency (DARPA) – zum Ausbau und zur Sicherung des
Technologievorsprungs der USA
> Förderung bestehender militärischer und universitärer
Forschungseinrichtungen
> Militärische Nutzbarkeit sowie wirtschaftliche Verwertbarkeit
der Ergebnisse
Gero Mühl
Webbasierte Anwendungen / Historie
4
Der Weg zum ARPANET
> 1961: Grundlegende Arbeiten von
Leonard Kleinrock als PhD-Student am
MIT zur Paketvermittlung und
Warteschlangentheorie
> 1962: Aufbau des Information
Processing Techniques Office (IPTO)
der ARPA durch Joseph C.R. Licklider
mit der Vision des „Galactic Network“
> 1966: Entwurf des ARPANETS durch
Lawrence („Larry“) G. Roberts mit dem
Ziel der Vernetzung der Universitäten
(Ressource-Sharing, Paketvermittlung)
Gero Mühl
Leonard.
Kleinrock
Joseph C:R.
Licklider
Lawrence G.
Roberts
Webbasierte Anwendungen / Historie
5
Design des ARPANETs
> Unterscheidung der genutzten Rechner
> Hosts sind die zu verbindenden Benutzerrechner
(z.B. SDS Sigma 7, SDS 940, IBM 360/75, DEC PDP-10)
> IMPs (Interface Message Processors) sind dedizierte
Netzrechner zur Nachrichtenzerlegung und Paketweiterleitung
> TIPs (Terminal IMPs, später eingeführt) sind spezielle IMPs, die
einen direkten Terminalzugang zum Netz erlauben
> Nutzung angemieteter Leitungen mit 56 Kbps
> Entwicklung von Übertragungs- und Steuerungsprotokollen
> Host-to-Host-Protokoll
> Host-to-IMP-Protokoll
> IMP-to-IMP-Protokoll
Gero Mühl
Webbasierte Anwendungen / Historie
6
Design des ARPANETs
Host–Host
H
O
S
T
H
O
S
T
Quell-IMP–Ziel-IMP
Host–Imp
H
O
S
T
I
M
P
I
M
P
IMP-Subnetz
I
M
P
T
I
P
Remote
Terminal
IMP–IMP
H
O
S
T
Gero Mühl
Local
Terminal
H
O
S
T
Webbasierte Anwendungen / Historie
7
Interface Message Processor (IMP)
> Hergestellt von BBN (Bolt,
Beranek and Newman),
Cambridge, MA
> Basiert auf Honeywell
DDP-516 Minicomputer
mit 24 KB Speicher ohne
Magnetplatte
> Software umfasste nur
150 Lines of Code
> Max. Nachrichtenlänge
von 8063 Bit (Host-to-IMP)
bei max. Paketlänge von
1008 Bit (IMP-to-IMP)
Leonard Kleinrock
am IMP 1 @ UCLA
Gero Mühl
Webbasierte Anwendungen / Historie
8
The Day the Infant Internet Uttered its First Words
»Below is a record of the first message ever sent over the ARPANET. It took
place at 22:30 hours on October 29, 1969. This record is an excerpt from the
"IMP Log" that we kept at UCLA1). I was supervising the student / programmer
Charley Kline (CSK) and we set up a message transmission to go from the
UCLA SDS Sigma 7 Host computer to the SRI2) SDS 940 Host computer. The
transmission itself was simply to "login" to SRI from UCLA. We succeeded in
transmitting the "l" and the "o" and then the system crashed! Hence, the first
message on the Internet was "lo"! We were able to do the full login about an
hour later.«
Leonard Kleinrock
Professor, UCLA
1)
University of California in Los Angeles
2) Stanford Research Institute
Gero Mühl
Webbasierte Anwendungen / Historie
9
The Day the Infant Internet Uttered its First Words
Excerpt from the IMP log at UCLA
Gero Mühl
Webbasierte Anwendungen / Historie
10
Wachstum des ARPANETs
Gero Mühl
Dez. 1969 (Los Angeles, Stanford,
Santa Barbara, Salt Lake City)
Jun. 1970 (9 Knoten)
Sep. 1971 (Knoten bei ARPA,
Erste TIPs)
Aug. 1972 (29 Knoten)
Webbasierte Anwendungen / Historie
11
Wachstum des ARPANETs
Gero Mühl
Sep. 1973 (Verbindungen u.a. nach
Hawaii, Norwegen, England)
Jun. 1974
Jul. 1975
Jul. 1976
Webbasierte Anwendungen / Historie
12
Entwicklung von TCP/IP
> 1972: Erste Anwendungen
> FTP (Dateitransfer)
> E-Mail (SNDMSG, READMAIL, RD)
> Transmission Control Protocol (TCP) /
Internet Protocol (IP)
> 1974: Spezifikation von TCP durch
Robert E. (Bob) Kahn und Vinton G. Cerf
> 1977: Einsatz im ARPANET
> 1978: Entwurf eines eigenständigen
Internet Protocols (IP) durch Vinton G. Cerf,
Jon Postel und Danny Cohen
> Domain Name System (DNS)
> Entwurf durch Jon Postel, Paul Mockapetris
und Craig Partridge zur Unterstützung der
E-Mail-Adressierung
Gero Mühl
Robert E.
(Bob) Kahn
Vinton G.
Cerf
Webbasierte Anwendungen / Historie
13
ARPANET  INTERNET
> 1983: Abkoppelung des MILNET (45 Knoten) vom
ARPANET (68 Knoten)
> 1986: National Science Foundation baut NSFNet auf
> Ausbau eines Backbones hoher Kapazität
(bis 1995, danach dezentral organisiert)
> Bereitstellung von Netzzugängen für Universitäten
> 1989: Abschaltung des ARPANETs
> 1991: Öffnung des NSFNets / Internets zur
kommerziellen Nutzung
Gero Mühl
Webbasierte Anwendungen / Historie
14
Europäische Netze
> Ab 1980: Einzelne proprietäre Netze wie EARN und Bitnet
(Förderung durch IBM) sowie Transpac (Frankreich)
> 1986: Gründung des Réseaux Associés pour la Recherche
Européenne zur Koordinierung der Netzaktivitäten
> Initiierung des Projekts COSINE zur Bereitstellung einer
Netzinfrastruktur auf ISO/OSI Basis
 europäisches X.25-Netz
> Stetig steigender „TCP/IP-Druck“ aus den USA
> 1989: Gründung des Réseaux IP Européens (RIPE) zur
Netzkoordinierung  Aufbau eines europäischen
Backbones ähnlich wie NSFNet
Gero Mühl
Webbasierte Anwendungen / Historie
15
Struktur des Internets
Gero Mühl
Webbasierte Anwendungen / Historie
16
Das Netz der Netze – Logische Sicht
Internet
Subnetz
Router,
Gateway
Gero Mühl
Webbasierte Anwendungen / Historie
17
Das Netz der Netze – Physische Sicht
Subnetz
Router,
Gateway
Gero Mühl
Webbasierte Anwendungen / Historie
18
Logische vs. Physische Sicht
Logische Sicht
Physische Sicht
> Netzwerk ist „Black Box“
> Interne Struktur und
Funktionsweise brauchen den
Nutzern nicht bekannt sein
> Nutzer benötigen nur
Kenntnisse über die
Interaktion mit dem Netz
⇒ Notwendigkeit von
Schnittstellen und Protokollen,
die auch ohne Kenntnis von
Implementierungsdetails zu
funktionsfähigen
Netzen führen
> „Interconnected Networks“
> Internet besteht aus vielen
Teilnetzen (Subnetze), die
durch Router miteinander
verbunden werden
> Hierarchische Anordnung der
Subnetze, wobei „Backbone“Netze nationale, kontinentale
und transkontinentale
Verbindungen bieten
⇒ Größe und
Komplexität erzwingen
dezentrale Administration
Gero Mühl
Webbasierte Anwendungen / Historie
19
Rechner im Internet
Gero Mühl
Webbasierte Anwendungen / Historie
20
Nutzer des Internet
Gero Mühl
Webbasierte Anwendungen / Historie
21
Nutzer des Internet
Gero Mühl
Webbasierte Anwendungen / Historie
22
Domänen im Internet
Quelle: DENIC eG
Gero Mühl
Webbasierte Anwendungen / Historie
23
.de-Domänen im Internet
Quelle: DENIC eG
Gero Mühl
Webbasierte Anwendungen / Historie
24
.de-Domänen im Internet
Quelle: DENIC eG
Gero Mühl
Webbasierte Anwendungen / Historie
25
Quelle: DENIC eG
Verteilung der .de-Domänen (absolut)
Gero Mühl
Webbasierte Anwendungen / Historie
26
Quelle: DENIC eG
Verteilung der .de-Domänen (relativ)
Gero Mühl
Webbasierte Anwendungen / Historie
27
Quelle: CAIDA (Cooperative Association for Internet Data Analysis)
Struktur des Internets (IPv4)
Gero Mühl
Webbasierte Anwendungen / Historie
28
Quelle: CAIDA (Cooperative Association for Internet Data Analysis)
Struktur des Internets (IPv6)
Gero Mühl
Webbasierte Anwendungen / Historie
29
Visualisierungen des Internets
> Dunkelblau: net, ca, us
> Grün: com, org
> Rot: mil, gov, edu
> Gelb: jp, cn, tw, au, de
> Magenta: uk, it, pl, fr
> Blaugrün: br, kr, nl
> Weiß: unbekannt
Quelle:Wikipedia, http://en.wikipedia.org/
wiki/Image:Internet_map_1024.jpg
Gero Mühl
Webbasierte Anwendungen / Historie
30
Evolution des World Wide Webs
Gero Mühl
Webbasierte Anwendungen / Historie
31
World Wide Web (WWW)
> 1989: Vorschlag von Tim Berners-Lee zur
Entwicklung eines Hypertext Systems zur
Dokumentation von Projekten am CERN
> Entwurf von HTTP und HTML
> 1991: Öffentlicher Start des WWW
> 1993: Veröffentlichung des Mosaic-Browsers
durch Marc Andreessen am National Center
for Supercomputing Applications
> 1994: Gründung der Netscape Communications
Corporation durch Marc Andreessen
und Jim Clark
> 1994: Gründung des World Wide Web
Consortiums mit Tim Berners-Lee als Direktor
Gero Mühl
Tim
Berners-Lee
Marc
Andreessen
Webbasierte Anwendungen / Historie
32
Webbrowser
Gero Mühl
Webbasierte Anwendungen / Historie
33
Webbrowser Marktanteile
Gero Mühl
Webbasierte Anwendungen / Historie
34
Webserver-Marktanteile
Quelle: netcraft.com
Gero Mühl
Webbasierte Anwendungen / Historie
35
Evolution des Webs – Webseiten
> Statische Webseiten bieten Zugang zu sich nicht bzw.
nur selten ändernden Informationen
> Realisierung durch Zugriff auf statische, verlinkte
HTML-Dokumente mittels URL und HTTP
> Übertragung des angeforderten Dokuments vom Web
Servers zum Web Client (z.B. Web Browser)
> Dynamische Webseiten ermöglichen den Zugang zu
ausgewählten oder sich ändernden Informationen
> Realisierung: HTML-Dokument wird teilweise erst beim
Zugriff vom Server generiert (serverseitige Techniken)
und/oder nach der Übertragung beim Client erzeugt bzw.
(evtl. auch fortlaufend) verändert (clientseitige Techniken)
Gero Mühl
Webbasierte Anwendungen / Historie
36
Evolution des Webs – Webbasierte Anwendungen
> Kennzeichen
> Gehen über den reinen Abruf von Informationen weit hinaus
> Realisieren teils vollständige Anwendungen
(z.B. Web Shop, Textverarbeitung, Tabellenkalkulation)
> Interaktion mit dem Benutzer mittels komplexer Oberfläche
> Ähnlichkeit mit Desktopanwendungen
> Erfordern
>
>
>
>
Zustandsverwaltung für Benutzer
Authentifizierung/Autorisierung
Personalisierung
…
> Realisierung mittels geeigneter Frameworks (z.B. Ajax, Google Web
Toolkit) in Verbindung mit Middleware wie JEE oder .NET
Gero Mühl
Webbasierte Anwendungen / Historie
37
Exemplarische Fragen zur Lernkontrolle
1.
2.
3.
4.
5.
Beschreiben Sie die historische Entwicklung des Internets!
Welches Netz war der Vorläufer des Internets?
Was unterschied das Internet vom damaligen Telefonnetz?
Woher kommt der Begriff Internet?
Beschreiben Sie die logische und die physische Sicht auf
das Internet!
6. Erläutern Sie die Evolution des WWW von seinen Anfängen
bis zu heutigen webbasierten Anwendungen!
7. Worin unterscheiden sich Internet und WWW bzw. welchen
Dienst stellen beide jeweils bereit?
8. Beschreiben Sie den Unterschied zwischen statischen und
dynamischen Webseiten!
Gero Mühl
Webbasierte Anwendungen / Historie
38
Vielen Dank für Ihre Aufmerksamkeit!
Univ.-Prof. Dr.-Ing. habil. Gero Mühl
[email protected]
http://wwwava.informatik.uni-rostock.de
Gero Mühl
Webbasierte Anwendungen / Historie
39
Webbasierte Anwendungen
Internet Protocol Suite (TCP/IP)
Univ.-Prof. Dr.-Ing. habil. Gero Mühl
Architektur von Anwendungssystemen (AVA)
Fakultät für Informatik und Elektrotechnik (IEF)
Universität Rostock
Überblick
> TCP/IP-Referenzmodell
> Internetschicht
> Transportschicht
> Dienstgüte
Gero Mühl
Webbasierte Anwendungen / Internet Protocol Suite
2
TCP/IP-Referenzmodell
Gero Mühl
Webbasierte Anwendungen / Internet Protocol Suite
3
Schichtenmodelle
> In hierarchischen Architekturen lassen sich
Hierarchieebenen mit unterschiedlichen Funktionen
identifizieren  Schichten
> Jede Schicht
>
>
>
>
>
hat bestimmten Zweck und Funktion
bietet den jeweils höheren Schichten Dienste an
besitzt Schnittstelle zum Zugriff auf angebotene Dienste
abstrahiert von Details der Implementierung
nutzt Dienste tieferer Schichten zur Funktionserbringung
> Ziel: Reduzierung der Komplexität
Gero Mühl
Webbasierte Anwendungen / Internet Protocol Suite
4
Protokollhierarchien
Schicht 3
Schicht 3-Protokoll
Schicht 3
Schicht 2/3Schnittstelle
Schicht 2
Schicht 2/3Schnittstelle
Schicht 2-Protokoll
Schicht 2
Schicht 1/2Schnittstelle
Schicht 1
Schicht 1/2Schnittstelle
Schicht 1-Protokoll
Schicht 1
Physikalisches Medium
Gero Mühl
Webbasierte Anwendungen / Internet Protocol Suite
5
Protokollhierarchien – Beispiel
Gero Mühl
Philosoph
Philosoph/ÜbersetzerIn/
SekretärIn-Architektur
I like
rabbits.
Nachricht
J‘aime
les lapins.
Deutsch
Ich mag
Kaninchen.
Information
für entfernte
Übersetzerin
Übersetzerin
Deutsch
Ich mag
Kaninchen.
Fax # ----Deutsch
Ich mag
Kaninchen.
Information
für entfernten
Sekretär
Sekretär
Fax # ----Deutsch
Ich mag
Kaninchen.
Webbasierte Anwendungen / Internet Protocol Suite
6
Protokoll
> Ein Protokoll legt die Regeln und Konventionen fest,
wie Schicht n der Maschine A mit Schicht n der
Maschine B kommuniziert
> Eine Protokollhierarchie (engl. Protocol Stack) besteht aus der
Schichtung mehrerer Protokolle, bei der ein Protokoll der Schicht
n > 1 auf dem Dienst aufbaut, den das Protokoll der Schicht n – 1
erbringt, ohne dessen Implementierungsdetails zu kennen
> Beim Senden leitet jede Schicht die Daten an die unterliegende
Schicht weiter, bis die physikalische Schicht erreicht ist
> In jeder Schicht können die Daten transformiert (z.B. aufgeteilt)
sowie zusätzliche Informationen (z.B. Header, Trailer)
hinzugefügt werden
> Der Empfang erfolgt entsprechend umgekehrt
Gero Mühl
Webbasierte Anwendungen / Internet Protocol Suite
7
Informationsfluss
M
M
M: Gesamte Nachricht
Mi:Teilnachricht i
Hi: Header der Schicht i
H3
H2
H1
Gero Mühl
H2
H3
H3
M
M1
M1
H3
H2
H1
M2
H2
H2
M2
H1
H2
H3
H3
M
M1
M1
H2
H1
M2
H2
M2
Webbasierte Anwendungen / Internet Protocol Suite
8
Leitungsvermittelt vs. Paketvermittelt
> Leitungsvermittelt
> Bevor zwei Rechner kommunizieren wird ein Weg
festgelegt, über den alle Daten vom Sender zum
Empfänger und vice versa übertragen werden
> Oft wird Bandbreite für die Übertragung reserviert
> Analog zur ursprünglichen Realisierung des Telefonnetzes
> Paketvermittelt
> Jedes Paket reist unabhängig von anderen Paketen und
nimmt potentiell einen anderen Weg
> Einfachere Realisierung, aber Pakete können in einer
anderen Reihenfolge ankommen als sie gesendet wurden
Gero Mühl
Webbasierte Anwendungen / Internet Protocol Suite
9
Verbindungslos vs. Verbindungsorientiert
> Verbindungslos
> Direkter Austausch von Nutzdaten ohne vorige
Abstimmung
> Unidirektionale Kommunikation möglich
> Verbindungsorientiert
> Vor dem Austausch von Nutzdaten wird eine Verbindung
zwischen den Rechnern aufgebaut
> Setzt bidirektionale Kommunikation voraus
> Voraussetzung für zuverlässige Ende-zu-Ende
Kommunikation und Ende-zu-Ende Flusssteuerung
> Zwei Variationen zuverlässiger Ende-zu-Ende
Kommunikation: Nachrichtenfolgen und Byteströme
Gero Mühl
Webbasierte Anwendungen / Internet Protocol Suite
10
Kombinationsmöglichkeiten
Leitungsvermittelt Paketvermittelt
Verbindungslos
Verbindungsorientiert
Gero Mühl
Rohrpost
UDP/IP
Analoges Telefon
TCP/IP
Webbasierte Anwendungen / Internet Protocol Suite
11
TCP/IP-Referenzmodell
> Verarbeitung
> Stellt Anwendungsprotokolle wie HTTP, FTP
oder SMTP zur Verfügung
> Transport
> Kommunikation zwischen Anwendungen
> TCP: verbindungsorientierte, zuverlässige,
Kommunikation auf Basis von Byteströmen
> UDP: unzuverlässige, verbindungslose
Kommunikation auf Basis von Nutzdatenpaketen
> Internet
> Ende-zu-Ende Senden und Empfangen einzelner
Pakete zwischen kommunizierenden Rechnern
Verarbeitung
Transport
Internet
Host-an-Netz
> Host-an-Netz
> Senden, Weiterleiten u. Empfangen von Paketen
zwischen direkt kommunizierenden Rechnern
Gero Mühl
Webbasierte Anwendungen / Internet Protocol Suite
12
TCP/IP-Referenzmodell
Verarbeitung
Verarbeitung
Transport
Transport
Internet
Internet
Internet
Host-an-Netz
Host-an-Netz
Host-an-Netz
Gateway (Router)
Gero Mühl
Webbasierte Anwendungen / Internet Protocol Suite
13
TCP/IP-Referenzmodell
HTTP, SMTP, DNS, IMAP
Protokolle
TCP, UDP
Transport
IP
Netze
Verarbeitung
Internet
LAN, ATM, FDDI, WLAN
Host-an-Netz
Quelle: Wikipedia
> Internet-Schicht/Internet-Protokoll (IP)
> Verbirgt verschiedenste Netzwerke und Netztechnologien
> Bildet Basis unterschiedlichster Dienste und Anwendungen
 Stundenglas-Architektur
Gero Mühl
Webbasierte Anwendungen / Internet Protocol Suite
14
TCP/IP-Referenzmodell
> Internet Protocol (IP)
> Einheitliches, internetweit gültiges Adressierungsschema
> Verbindungslose Weiterleitung (Routing) von Datenpaketen
> Best Effort-Kommunikation ohne weitere Garantien (Pakete
können verändert / dupliziert werden, verloren gehen, etc.)
 Datentransport zwischen verschiedenen, heterogenen Netzen
> Transmission Control Protocol (TCP)
> Verbindungsorientierte Transportbeziehung sichert Übertragung,
so dass Daten wie gesendet ankommen
> Multiplexen/Demultiplexen mehrerer Transport-Beziehungen
pro Host für verschiedene Anwendungen  Ports
> Flusssteuerung (Überlastvermeidung)
 Datentransport zwischen Endprozessen (verschiedenen Hosts)
Gero Mühl
Webbasierte Anwendungen / Internet Protocol Suite
15
TCP/IP – Kommunikationsbeispiel
> Internet-Protokoll (IP)
IP-Adresse
192.168.0.3
> IP-Adresse identifiziert Rechner
> Transport-Protokoll (TCP, UDP)
Applikation Port
Mail-Client 50123
Browser 52987
> Port-Nummer identifiziert
Dienst/Anwendung
IP-Adresse
192.168.0.1
IP-Adresse
192.168.0.2
Applikation Port
Browser 49654
Netz
Client
Gero Mühl
Port
25
80
Dienst
Mail
WWW
Server
Webbasierte Anwendungen / Internet Protocol Suite
16
Fragen?
Gero Mühl
Webbasierte Anwendungen / Internet Protocol Suite
17
Internetschicht
Gero Mühl
Webbasierte Anwendungen / Internet Protocol Suite
18
INTERconnected NETworks
> Internet = Verbund heterogener Netze mit
Datenpaket-Transport zwischen beliebigen Rechnern
US Backbone
Europa Backbone
Nationale
Netze
LAN
LAN
Gero Mühl
Nationale
Netze
LAN
Webbasierte Anwendungen / Internet Protocol Suite
19
Internet Protocol (IPv4)
> IP ermöglicht als „kleinster gemeinsamer Nenner“ aller Netze
den Austausch von Datenpaketen zwischen beliebigen
Rechnern bei heterogenen Netzen
 unterste Schicht mit Ende-zu-Ende Bedeutung
> Einheitliches, internetweit gültiges Adressierungsschema
> Jeder Rechner (strenggenommen jede Netzwerkkarte in jedem
Rechner) erhält eindeutige Kennung (IP-Adresse)
> Verbindungslose Weiterleitung (Routing) von Datenpaketen
vom der Quelle zum Ziel
> Best Effort-Kommunikation ohne weitere Garantien
> Pakete können verändert oder dupliziert werden, verloren
gehen, etc.
Gero Mühl
Webbasierte Anwendungen / Internet Protocol Suite
20
IP-Adressen
> Jeder Anschluss bekommt eigene 32-bittige IP-Adresse
> 4.294.967.296 Adressen  etwa 8 Adressen pro km2
> Notation als Folge von vier 8-Bit Dezimalzahlen
> Beispielsweise 139.30.5.204
> 5 Netzklassen: A, B, C, D und E
0 1 2 3 4 5 6 7
A
0
B
1 0
C
1 1 0
D
1 1 1 0
E
1 1 1 1
Gero Mühl
15
Netz-ID (7 Bits)
31
23
Rechner-ID (24 Bits)
Netz-ID (14 Bits)
Rechner-ID (16 Bits)
Netz-ID (21 Bits)
R.-ID (8 Bits)
Multicast
reserviert
Webbasierte Anwendungen / Internet Protocol Suite
21
IP-Paket
IHL
TOS
Total Length
D MF
F
Identification
TTL
Protocol
Fragment Offset
Header Checksum
Source Address
Destination Address
Header
Version
Data
Content
Options
32 Bit
Gero Mühl
Webbasierte Anwendungen / Internet Protocol Suite
22
IP-Paket
>
>
>
>
>
Version des IP Protokolls
Länge des Headers
Gesamtlänge des Paketes
Wert identifiziert das Paket
1. Flag: unbenutzt
2. Flag – DF (don't fragment)
3. Flag – MF (more fragments)
> Offset
Position des Fragments im Datagramm
> Time to Live
Teilstreckenzähler mit Default = 64
> Protocol
Darüber liegendes Transportprotokoll
> Header Checksum Header-Prüfsumme zur Fehlererkennung
> Source Address
IP-Adresse des Absenders
> Destination Addr. IP-Adresse des Empfängers
> Options
optional, z.B. Sicherheit, Source Routing
Gero Mühl
Version
IHL
Total Length
Identification
Flags
Webbasierte Anwendungen / Internet Protocol Suite
23
Fragmentierung bei IP
> Jedes Paket trägt die notwendige Information, um von der Quelle
zum Ziel zu gelangen (d.h. Quell- und Zieladresse)
> Pakete, die für das physikalische Netzwerk zu groß sind, werden in
kleinere Fragmente aufgeteilt
> Die Fragmente werden unterwegs nicht mehr zusammengesetzt,
sondern jedes Fragment reist als eigenständiges IP-Datagramm
1
x
Ethernet
ETH 1400
0
1400
0
Punkt-zu-Punkt
2
P2P
P2P
P2P
x
1
x
512
More Framents-Flag
Gero Mühl
3
512
512
376
0
FDDI
512
FDDI
FDDI
FDDI
512
512
376
1 512
x
4
0 1024
376
Offset
Webbasierte Anwendungen / Internet Protocol Suite
24
IP-Subnetze
> Ermöglichen eine für die Außenwelt transparente Aufteilung eines
größeren Netzes in mehrere kleinere
> Interpretation eines Teils der Rechneradresse als Subnetz-Adresse
> Erkennung, ob Zieladresse eigenes Subnetz durch logische
UND-Verknüpfung mit der Subnetzmaske
> Ergebnis gleich der eigenen Subnetznummer, dann direktes
Senden; sonst indirektes Senden über Router
> Beispiel: Klasse B-Adresse
214 = 16384 Klasse B Netze
1 1
1 0
14
Netz
27 = 128 Subnetze
7
Subnetz
9
Rechner
1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 0 0 0 0 0 0 0 0 0
Subnetzmaske = 255.255.254.0
Alternative Notation: /23
Gero Mühl
29 - 2 = 510 Rechner
Webbasierte Anwendungen / Internet Protocol Suite
25
IP-Routing
> Wie gelangen IP-Pakete durch evtl. mehrere Netze zum Ziel?
> Routing-Tabellen
> Ordnen IP-Adressen die nächste zu wählende Teilstrecke zu
> Direktes Routing (im selben Netz)
> Indirektes Routing (über Router)
> Tabelle enthält IP-Adressen, keine physischen Adressen
> Routing-Entscheidungen unabhängig von physischen Adressen
> Verbirgt Details der Netze vor IP, klare Separation
> Isoliert Routing-Information in Routing-Tabellen
> IP-Routing ändert nicht die Adressen von Quelle und Ziel
> Paket wird „hopweise“ weitergereicht, bis es sein Ziel erreicht
Gero Mühl
Webbasierte Anwendungen / Internet Protocol Suite
26
IP-Routing-Protokolle
> Aktualisieren die Routing-Tabellen
> Intradomain- vs. Interdomain-Routing
> Beispiele für Intradomain-Routing-Protokolle
> Routing Information Protocol (RIP)
[RFC 1058]
> Router tauschen periodisch Distanzvektoren untereinander aus
> Vektor beinhaltet, Entfernung zu anderen Netzen in „Hops“
> Open Shortest Path First (OSPF)
[RFC 1247]
> Jeder Router kennt Netzwerk und berechnet kürzesten Pfad
> Beispiel für Interdomain Routing-Protokolle
> Border Gateway Protocol (BGP)
Gero Mühl
[RFC 1654]
Webbasierte Anwendungen / Internet Protocol Suite
27
Fragen?
Gero Mühl
Webbasierte Anwendungen / Internet Protocol Suite
28
Transportschicht
Gero Mühl
Webbasierte Anwendungen / Internet Protocol Suite
29
Transportschicht
> Aufgaben der Transportschicht
> Ende-zu-Ende-Kommunikation zwischen Anwendungen
> Weitere Abstraktion von spezifischen Netzeigenschaften
> Unterstützung mehrerer Endpunkte auf einem Rechner
durch Multiplexen und Demultiplexen von
Transportbeziehungen
> Verbindungsorientierte Transportbeziehungen  TCP
>
>
>
>
Fehlerfreie Übertragung
Einhaltung der Reihenfolge
Keine Verluste oder Duplizierungen
Flusssteuerung
> Verbindungslose Transportbeziehungen  UDP
> Best Effort-Auslieferung
Gero Mühl
Webbasierte Anwendungen / Internet Protocol Suite
30
Transmission Control Protocol (TCP)
> RFCs 793, 1122, 1323
> Bereitstellung eines zuverlässigen bidirektionalen Bytestroms
zwischen 2 Endpunkten in unzuverlässigem Netzverbund
> Endpunkt: IP-Adresse + TCP-Portnummer
(z.B. 139.30.1.211:80)
> Verbindungsorientierter Transportdienst
> Teilt Anwendungsdaten in Blöcke (Segments) à max. 64 K Bytes
(meistens ca. 1500 Bytes), die als IP-Paket versandt werden
> Sliding Window Protocol zur Fehlerbehandlung und
Flusskontrolle
Gero Mühl
Webbasierte Anwendungen / Internet Protocol Suite
31
Zuverlässiger Bytestrom
> Die Anwendungsdaten (Bytestrom) werden fehlerfrei
empfangen, ohne Datenverluste oder -duplikate, in der
Reihenfolge, in der sie gesendet wurden
> Dies wird durch das Versenden von Pakten mit
Checksummen und Sequenznummern erreicht
> Die Anwendung selbst sieht keine Paketgrenzen
> ein send kann zu mehreren receives führen und
umgekehrt!
> z.B. send(170 Bytes) + send(230)  receive(400)
Gero Mühl
Webbasierte Anwendungen / Internet Protocol Suite
32
Aufbau eines TCP-Pakets
Header
24
8
16
Source Port
Destination Port
Sequence Number
Acknowledgement Number
HLen
Flags
Window Size
Checksum
Urgent Pointer
32
20 Byte
0
Options
Body
Gero Mühl
Data
Webbasierte Anwendungen / Internet Protocol Suite
33
Aufbau eines TCP-Pakets
> Source- und Destination Port
> Identifizieren die lokalen Endpunkte der Verbindung
> Sequence- and Acknowledgement Number
> Bytenummerierung und Empfangsbestätigung
> HLen (TCP Header Length)
> Anzahl der 32-Bit-Wörter des Headers
> Flags
>
>
>
>
>
>
Gero Mühl
URG:
ACK:
PSH:
RST:
SYN:
FIN:
dringende Daten liegen vor (siehe Urgent Pointer)
Bestätigung der Daten (siehe Acknowledgement Number)
Daten sofort an Anwendung weiterleiten (nicht puffern)
Reset einer Verbindung
Signalisiert Verbindungsaufbau
Signalisiert Verbindungsabbau
Webbasierte Anwendungen / Internet Protocol Suite
34
Aufbau eines TCP-Pakets
> Window Size (Fenstergröße)
> Größe des Empfangsfensters beim Sliding Window
Protocol
> Checksum (Prüfsumme)
> Gebildet über TCP-Header + Daten + IP-Pseudo-Header
> Urgent Pointer (Dringend-Zeiger)
> Zeigt auf dringende Daten (vgl. Interrupt)
> Erlaubt Verarbeitung außerhalb der Reihenfolge
> Options (Optionen)
> 32-Bit-Wörter
> Aushandlung der TCP-Segmentgrößen
> Aushandlung skalierter Fenstergrößen
Gero Mühl
Webbasierte Anwendungen / Internet Protocol Suite
35
TCP-Segmente
> Beide Seiten können ihre maximale Segmentgröße
(MSS) bekannt geben
> Größere Segmente sind effizienter
> MSS  MTU des Netz
–
IP-Header – TCP-Header
(20 Byte)
(20 Byte)
> Z.B. Ethernet MTU = 1500 Byte  MSS = 1460 Byte
> Z.B. Berkeley UNIX Implementierung  MSS = 1024 Byte
> Voreinstellung MSS = 536 Byte  IP-Pakete mit 576 Byte
Gero Mühl
Webbasierte Anwendungen / Internet Protocol Suite
36
Sliding Window Protocol
Fenstergröße
Sender
gesendet und
bestätigt
gesendet aber
nicht bestätigt
kann gesendet
werden
send_base
kann noch nicht
gesendet werden
send_next
Fenstergröße
Empfänger
ausgeliefert an
Anwendung
empfangen und
bestätigt
erwartet
rec_base
Gero Mühl
Kann noch nicht
empfangen werden
Webbasierte Anwendungen / Internet Protocol Suite
37
TCP-Retransmission Timer
> Problem: Wahl des Timeouts für
Wiederholungen bei fehlender Bestätigung?
> Timeout zu kurz  unnötige Wiederholung
> Timeout zu lang  unnötige Verzögerung
von Wiederholungen
> Idee: Orientierung an der Round Trip Time
Timeout
> Round Trip Time („Rundreisezeit“)
> Zeit für eine Nachricht vom Sender zum Empfänger und zurück
> Sich (evtl. schnell) ändernder Parameter
> Dynamische Algorithmen zur Anpassung des
Time-out-Intervalls (Jacobsen, 1988)
Gero Mühl
Webbasierte Anwendungen / Internet Protocol Suite
38
Jacobsen Algorithmus
> Round Trip Time (RTT) sowie Schwankungen der RTT
zur Wahl des Timeouts heranziehen
> Schätzung der Round Trip Time (RTT)
RTT = α1 · RTT + (1 – α1) · M
> Berechnung der durchschnittlichen Abweichung (D)
D = α2 · D + (1 – α2) · |RTT – M|
> Wahl des Timeouts
Timeout = RTT + 4·D
M: RTT des letzten bestätigten Segments
α1, α2: Glättungsfaktoren (typisch α1 = α2 = 7/8)
Gero Mühl
Webbasierte Anwendungen / Internet Protocol Suite
39
TCP-Überlastkontrolle
> Durch Überlast entsteht Paketverlust
> Ursachen
> Überlasteter Empfängerprozess liest Daten zu langsam
> Überlastete Strecken bzw. Router
Sender
Überlauf nach
Netzüberlastung
Empfänger
Gero Mühl
Webbasierte Anwendungen / Internet Protocol Suite
40
TCP-Überlastkontrolle
> TCP führt Überlastkontrolle aus (engl.: Flow Control)
> Ziel: Überlast durch dynamische Anpassung der
Senderate möglichst vermeiden
> Verwendung eines Empfängerfensters beim Empfänger
sowie eines Überlastungsfenster beim Sender
> Aktuelle Größe des Sendefensters ergibt dann sich aus
dem Minimum von Empfänger- und Überlastungsfenster
> Anforderung: Muss auch dann funktionieren, wenn
potentiell viele TCP-Verbindungen zwischen
verschiedenen Rechnern aktiv sind, die sich
physikalische Verbindungen teilen
Gero Mühl
Webbasierte Anwendungen / Internet Protocol Suite
41
Empfängerfenster
> Entspricht der Anzahl an Bytes, die der Empfänger bereit ist,
maximal als nächstes zu akzeptieren
> Angabe der Größe des Empfängerfensters bei Bestätigungen
> 16 Bit Größe  max. 64KB (Skalierungsfaktor i. Header mgl.)
Gero Mühl
Webbasierte Anwendungen / Internet Protocol Suite
42
Überlastungsfenster
> „Slow-Start“- Algorithmus zur Adaption des Überlastungsfensters
[Jacobsen, 1988]  Unterstützung durch alle TCP-Implementierungen
> Ausgehend von Initialwert exponentielle Vergrößerung des
Überlastungsfensters bis zu einem Schwellwert, ab dort lineare Steigerung
> Bei Überlast Zurücksetzen des Schwellwerts auf das halbe aktuelle
Überlastungsfenster und des Überlastungsfensters auf den Initialwert
Schwelle
Größe des Überlastungsfenster
initial 1 KB ( = MSS)
Gero Mühl
Webbasierte Anwendungen / Internet Protocol Suite
43
Überlastungsfenster
8
4
2
1
R1
Gero Mühl
R2
R3
R4
Webbasierte Anwendungen / Internet Protocol Suite
44
TCP–Effizienz: Senderseite
> Tinygrams
> Eine Anwendung sendet ständig kleinste Datenmengen
(z.B. 1 Byte)  enormes Verkehrsaufkommen
> 1 Byte Daten + 20 Byte TCP Header + 20 Byte IP Header
= 41 Byte Übertragungslast für 1 Byte Nutzlast
> Zusätzlicher Aufwand durch z.B. darunter liegendes
Ethernet (14 Bytes Header + 4 Bytes Checksumme)
> Lösung: Nagle-Algorithmus
> Leistungsverbesserung durch Sammeln von Sendedaten
> Allerdings: Bei interaktiven Anwendungen (z.B. SSH, X
Windows) muss Nagle‘s Algorithmus deaktiviert werden
Gero Mühl
Webbasierte Anwendungen / Internet Protocol Suite
45
TCP–Effizienz: Empfängerseite
> Silly Window Syndrome
> Nur kleine Segmente werden geschickt, obwohl der Sendepuffer
genügend Daten für ein größeres Segment enthält
> Ursache
> Anwendung beim Empfänger liest Daten, z.B. byteweise
> Speicher im vollen Puffer wird byteweise frei
> Empfänger bietet zu kleines Empfängerfenster (hier 1 Byte) an,
anstatt zu warten, bis ein größeres Fenster möglich wäre
> Lösung: Clark-Algorithmus
> Empfänger aktualisiert das Fenster nur, wenn Erhöhung um
definierte Mindestmenge möglich ist
Gero Mühl
Webbasierte Anwendungen / Internet Protocol Suite
46
User Datagram Protocol (UDP)
> Verbindungsloser Transportdienst [RFC 768]
> Ermöglicht das Senden einzelner Pakete an einen
Endpunkt (IP-Adresse + UDP-Portnummer)
> Empfänger empfängt einzelne UDP-Pakete
> UDP-Pakete können verloren gehen und in beliebiger
Reihenfolge beim Empfänger eingehen
> Bietet größtmögliche Freiheit und Flexibilität bei weniger
Overhead als bei TCP
> Die Anwendung kümmert sich selbst, falls notwendig,
um Fehlerbehandlung und Flusssteuerung
> Unterstützt auch Multicast-Kommunikation auf Basis von
IP-Multicast
Gero Mühl
Webbasierte Anwendungen / Internet Protocol Suite
47
Aufbau eines UDP Pakets
0
8
UDP-Quellport
Länge
16
24
UDP-Zielport
Prüfsumme
32
Daten
Header
Body
Quell- und Zielport wie bei TCP
Länge
Länge des Datagramms in Bytes
(inkl. 8 Byte Header)
Prüfsumme
Fehlerüberprüfung für Header, Daten und
wichtige IP-Informationen
Gero Mühl
Webbasierte Anwendungen / Internet Protocol Suite
48
Well-Known TCP/UDP-Ports
> Well-Known Ports (Portnummern < 1024) reserviert für
bestimmte Dienste
[http://www.iana.org/assignments/port-numbers]
> TCP- und UDP-Portnummern sind unabhängig
voneinander!
FTP
20
21
SSH
22
Telnet
23
SMTP
25
HTTP
DNS
80
111
53
TCP
NFS
SNMP
161
162
UDP
IP
Gero Mühl
Webbasierte Anwendungen / Internet Protocol Suite
49
Literatur
1. V. Jacobson. Congestion Avoidance and Control.
In Symposium Proceedings on Communications Architectures
and Protocols, pages 314–329, Stanford, CA, USA, 1988.
ACM Press.
2. W. R. Stevens. TCP/IP Illustrated, Volume 1: The Protocols.
Addison-Wesley, 1991.
3. G. R. Wright and W. R. Stevens. TCP/IP Illustrated, Volume 2: The
Implementation. Addison-Wesley, 1995.
4. J. Nagle. Congestion Control in IP/TCP Internetworks. RFC 896,
January 1974.
5. D. D. Clark. Window and Acknowledgement Strategy in TCP. RFC
813, July 1982.
Gero Mühl
Webbasierte Anwendungen / Internet Protocol Suite
50
Fragen?
Gero Mühl
Webbasierte Anwendungen / Internet Protocol Suite
51
Dienstgüte
Gero Mühl
Webbasierte Anwendungen / Internet Protocol Suite
52
World Wide Wait
> Synonym für Probleme im heutigen Internet
> Das Internet ist „best-effort“ – „so gut es eben geht“
> Es gibt keine Garantien für Leistung und Zuverlässigkeit
Gero Mühl
Webbasierte Anwendungen / Internet Protocol Suite
53
Neue Anwendungen und Anforderungen
> Neue Anwendungen
>
>
>
>
>
Audio
Video
Internet Telephony
Tele Learning
...
Dienst
Bitrate
Audio MP3
MPEG Video
Standard Video
HDTV (1080i50/MPEG-2)
100-200 Kbit/s
2 Mbit/s
140 Mbit/s
27 Mbit/s
> Neue Anforderungen
>
>
>
>
Gero Mühl
Echtzeit
Synchronisation
Multicast („Fernsehen“ per Internet)
...
Webbasierte Anwendungen / Internet Protocol Suite
54
Dienstgüte
> Dienstgüte (engl.: Quality of Service (QoS))
> wird vom Empfänger bzw. Kunden festgestellt
> erfordert Ende-zu-Ende-Sicht
> betrifft alle Schichten
> Beispiele für Diensteigenschaften aus Benutzersicht
> Wiedergabequalität, Antwortzeit, Zuverlässigkeit,
Verschlüsselung, ...
> Anforderungen eines Dienstes an das Netzwerk
> Fehlerrate, Verzögerung, Schwankungsbreite (Jitter), Bandbreite
> Synchronisation (z.B. „Lippen-Synchronisation“ bei
Videokonferenz)
Gero Mühl
Webbasierte Anwendungen / Internet Protocol Suite
55
Anwendungen und QoS-Parameter
Gero Mühl
Anwendung
Fehlerrate
Verzögerung
Schwankung
Bandbreite
E-Mail
Hoch
Niedrig
Niedrig
Niedrig
Dateitransfer
Hoch
Niedrig
Niedrig
Mittel
Web–Zugriff
Hoch
Mittel
Niedrig
Mittel
Remote Login
Hoch
Mittel
Mittel
Niedrig
Audio on demand
Niedrig
Niedrig
Hoch
Mittel
Video on demand
Niedrig
Niedrig
Hoch
Hoch
Telephonie
Niedrig
Hoch
Hoch
Niedrig
Video-Konferenz
Niedrig
Hoch
Hoch
Hoch
Webbasierte Anwendungen / Internet Protocol Suite
56
Allgemeine QoS-Techniken
> Überdimensionierung
Senden
> Pufferung beim Empfänger
Ankunft
> Gleicht Schwankungen aus
> Üblich sind ca. 10 sec Pufferung
Wiedergabe
> Eingangssteuerung
(engl. Admission Control)
Übertra- Pufferung
gungszeit
> „Türsteher“ entscheidet,
ob Datenstrom akzeptiert wird
t
> Verkehrsformung (engl. Traffic Shaping)
> „Glätten“ des Datenstroms nach vorheriger Vereinbarung
> Reservierung von Ressourcen
Gero Mühl
Webbasierte Anwendungen / Internet Protocol Suite
57
Verkehrsformung (Traffic Shaping)
> Eine vorrangige Ursache für Überlastsituationen
sind Verkehrsspitzen
> Diese entstehen beispielsweise, wenn Rechner mit stark
ungleichmäßig Rate senden
> Ziel
> Beeinflussung der sendenden Rechner, so dass sie
gleichmäßiger senden und damit weniger
Überlastsituationen auftreten
> Vorgehen
> Beim Sender werden Algorithmen ausgeführt, die den
Verkehr formen
Gero Mühl
Webbasierte Anwendungen / Internet Protocol Suite
58
„Leaky Bucket“
> Begrenzt die
maximale Senderate
> Zu sendende Pakete
kommen in den Eimer
> Die Pakete verlassen
Eimer mit konstanter
Rate und werden
gesendet
> Eimer hat beschränkte
Kapazität
> Bei vollem Eimer werden Pakete verworfen
> Implementierung des
Eimers als Warteschlange
Gero Mühl
© Tanenbaum, Computer Networks
Webbasierte Anwendungen / Internet Protocol Suite
59
„Token Bucket“
> Begrenzt durchschnittliche
Senderate
> Token werden mit
konstanter Rate in
den Eimer gelegt
> Bis zu n Token können
gesammelt werden
> Jede Nachricht nimmt
beim Senden ein Token
> Bursts bis zu n
Nachrichten gehen durch
> Es werden keine
Nachrichten verworfen,
stattdessen wird der
Sender blockiert
Gero Mühl
© Tanenbaum, Computer Networks
Webbasierte Anwendungen / Internet Protocol Suite
60
Verkehrsformung
> Ohne Verkehrsformung (a)
> 2 MB/sec Leaky Bucket (b)
> 2 MB/sec Token Bucket
> mit Kapazität von 250 KB (c)
> mit Kapazität von 500 KB (d)
> mit Kapazität von 750 KB (e)
> 2 MB/sec Token Bucket mit
500 KB Kapazität und
nachfolgendem 10 MB/sec
Leaky Bucket (f)
© Tanenbaum, Computer Networks
Gero Mühl
Webbasierte Anwendungen / Internet Protocol Suite
61
QoS-Erweiterungen für das Internet
Integrated Services (IntServ)
> Annahme: Knappe Ressourcen
> Feingranulare Reservierung von Ressourcen per „Flow“
auf jedem Knoten des Pfades zwischen Sender u. Empfänger
> Umsetzung durch Resource reSerVation Protocol (RSVP)
[RFC 2205, 1997]
> Bietet Garantien
> Nicht skalierbar, nur für Intranets geeignet
1. Path
Empfänger
2. Resv
Sender
Gero Mühl
Webbasierte Anwendungen / Internet Protocol Suite
62
QoS-Erweiterungen für das Internet
Differentiated Services (DiffServ)
> Annahme: Genügend Ressourcen
> Grobgranulare Verteilung der
Ressourcen auf Basis von
Verkehrsklassen
(Flow-Aggregation)
> Bevorzugung von Paketen aufgrund ihrer Klassifikation
> Minimierung des Verwaltungsaufwand
> Bietet keine Garantien
> Keine dynamische Anpassung
> Skalierbarkeit gegeben
Gero Mühl
Webbasierte Anwendungen / Internet Protocol Suite
63
Kombination von IntServ und DiffServ
Subnetz A
Backbone
Subnetz B
IntServ
DiffServ
IntServ
> Endsysteme
> Reservieren
> Garantien
Gero Mühl
> Weitverkehr
> Klassen zuteilen
> Einfache - schnelle! Bearbeitung
Webbasierte Anwendungen / Internet Protocol Suite
64
Exemplarische Fragen zur Lernkontrolle
TCP/IP-Referenzmodell
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
Gero Mühl
Was ist ein Protokoll?
Was ist eine Protokollhierarchie (engl.: protocol stack)?
Aus welchen zwei Hauptbestandteilen besteht ein Paket?
Welche Struktur hat ein Paket der Schicht n?
Erklären Sie den Unterschied zwischen verbindungsorientierter und
verbindungsloser Kommunikation!
Erläutern Sie den Unterschied zwischen leitungsvermittelter und
paketvermittelter Kommunikation!
Erläutern/skizzieren Sie das TCP/IP-Referenzmodell!
Nennen Sie Beispiele für Protokolle der einzelnen Schichten!
Welchen Dienst erbringt eine Schicht der nächst höheren Schicht?
Auf welcher Schicht arbeiten die Router bei TCP/IP?
Welches ist die unterste Schicht mit Ende-zu-Ende Bedeutung?
Webbasierte Anwendungen / Internet Protocol Suite
65
Exemplarische Fragen zur Lernkontrolle
IP
1.
2.
3.
4.
5.
6.
Welche Funktionalität bietet IP?
Wie ist eine IPv4-Addresse aufgebaut?
Was sind Klasse A/B/C-Netze?
Was sind Subnetze und warum werden sie verwendet?
Erläutern Sie das Konzept der Netzmasken!
Wovon hängt die maximal mögliche Rechneranzahl in einem
Subnetz ab?
7. Wie viele Rechner unterstützt ein Subnetz mit der Maske
255.255.255.128?
Gero Mühl
Webbasierte Anwendungen / Internet Protocol Suite
66
Exemplarische Fragen zur Lernkontrolle
TCP und UDP
1.
2.
3.
4.
5.
Welchen Dienst bietet TCP bzw. UDP?
Unterstützt TCP Multikast-Kommunikation?
Was ist ein Port?
Erläutern Sie das Sliding Window Protocol!
Wie wird verhindert, dass interaktive Anwendungen wie z.B.
Telnet zu enormen Datenverkehr durch sogenannte
Tinygrams führen?
6. Wie wird bei TCP vermieden, dass ein schneller Sender den
Empfänger überlastet? Zu welchen Problemen kann dieser
Mechanismus führen?
7. Warum sind zu kurze und zu lange Timeouts beim TCP
Retransmission Timer problematisch? Erläutern Sie den
Vorschlag von Karn!
Gero Mühl
Webbasierte Anwendungen / Internet Protocol Suite
67
Exemplarische Fragen zur Lernkontrolle
Dienstgüte
1. Was versteht man unter Dienstgüte?
2. Nennen Sie Beispiele für Netzwerkeigenschaften, die die
Dienstgüte beeinflussen können!
3. Welche Garantien gibt das Internet?
4. Warum hat der Empfänger einen Puffer z.B. beim Abspielen
eines Films?
5. Was versteht man unter Verkehrsformung?
6. Erläutern sie die Funktion eines Leaky Buckets bzw. eines
Token Buckets?
7. Vergleichen Sie IntServ mit DifServ! Auf welchen Annahmen
beruhen beiden Ansätze?
Gero Mühl
Webbasierte Anwendungen / Internet Protocol Suite
68
Vielen Dank für Ihre Aufmerksamkeit!
Univ.-Prof. Dr.-Ing. habil. Gero Mühl
[email protected]
http://wwwava.informatik.uni-rostock.de
Gero Mühl
Webbasierte Anwendungen / Internet Protocol Suite
69
Webbasierte Anwendungen
Socket-Programmierung
Univ.-Prof. Dr.-Ing. habil. Gero Mühl
Architektur von Anwendungssystemen (AVA)
Fakultät für Informatik und Elektrotechnik (IEF)
Universität Rostock
Überblick
> Socket-Schnittstelle
> Zeichenkodierung
Gero Mühl
Webbasierte Anwendungen / Socket-Programmierung
2
Socket-Schnittstelle
Gero Mühl
Webbasierte Anwendungen / Socket-Programmierung
3
Programmierschnittstelle für TCP/IP?
> Protokolle definieren
> Protokolle definieren nicht
> Aufbau der Nachrichten
(Adresse, Port, etc.)
> Ablauf und Regeln des
Nachrichtenaustausches
> Schnittstelle zur
Anwendung (API)
TCP
UDP
IP
Anwendung
Schnittstelle (API)
Gero Mühl
Webbasierte Anwendungen / Socket-Programmierung
4
Sockets als Programmierschnittstelle
> Socket (engl. für Steckdose) als zentrale Abstraktion
> Repräsentieren einen Kommunikationsendpunkt
> Berkley Sockets / BSD Socket API
> Ursprung in 4.2BSD Unix Operating System (1983)
> De facto Standard Netzwerk API
> Teil des Portable Operating System Interface (POSIX) Standards
 Unterstützung durch fast alle Betriebssysteme
> API besteht aus Menge von C-Funktionen und -Datentypen
> Senden/Empfangen von Daten
> Verbindungsmanagement
> Tiefgreifendere Einstellungen (Puffergrößen, etc.)
> Anbindungen für viele andere Sprachen
> Cobol, Fortran, Haskell, Java, Lisp, Python, Ruby, …
Gero Mühl
Webbasierte Anwendungen / Socket-Programmierung
5
Sockets in Java (Client-Seite)
> Klasse java.net.Socket
> Endpunkt einer TCP-Verbindung
> Bietet zuverlässigen, bidirektionalen Byte-Strom
> Erzeugen und Binden
> public Socket(InetAddress address, int port)
public Socket(String host, int port)
> Bindet Socket an IP-Adresse address (bzw. aufgelösten
Namen host) und Portnummer port des entfernten Rechners
sowie an einen freien Port des lokalen Rechners
> Ein-/Ausgabe
> public InputStream getInputStream()
> public OutputStream getOutputStream()
> public void close()
Gero Mühl
Webbasierte Anwendungen / Socket-Programmierung
6
Beispiel (Client-Seite)
// set up a connection to Uni Rostocks‘s webserver
Socket socket = new Socket("www.uni-rostock.de", 80);
// get associated input and output streams
InputStream in = socket.getInputStream();
OutputStreamWriter out = new OutputStreamWriter(
socket.getOutputStream(), "US-ASCII");
// send HTTP request
out.write("GET / HTTP/1.0\r\n\r\n");
out.flush();
HTTP-Anfrage
senden
// read reply and print it
for( int read=in.read(); read!=-1; read=in.read() ) {
System.out.print((char)read);
}
// free system resources
in.close();
out.close();
socket.close();
Gero Mühl
Antwort byteweise
lesen und ausgeben
Webbasierte Anwendungen / Socket-Programmierung
7
Sockets in Java (Server-Seite)
> Klasse java.net.ServerSocket
> Dient dem „Warten“ auf eingehende Verbindungen
> Erzeugen und Binden
> public ServerSocket(int port)
> Bindet Server-Socket an Port port des lokalen Rechners
> Annehmen eingehender Verbindungen
> public Socket accept()
> Liefert Client-Socket zur eingegangenen Verbindung
> Über den neuen Socket erfolgt die exklusive
Kommunikation mit dem Client
Gero Mühl
Webbasierte Anwendungen / Socket-Programmierung
8
Beispiel (Echo-Server)
// create a server socket and bind it to port 8080
ServerSocket server = new ServerSocket(8080);
// wait for client connection to accept
Socket socket = server.accept();
InputStream in = socket.getInputStream();
OutputStream out = socket.getOutputStream();
Server-Socket an Port 8080
binden und eingehende
Verbindungen annehmen
// echo data that is read from the socket
for(int read=in.read(); read!=-1; read=in.read()) {
System.out.print((char)read);
out.write(read);
Byteweises Kopieren
}
gelesener Daten
// free system resources
in.close(); out.flush(); out.close();
socket.close(); server.close();
Gero Mühl
Webbasierte Anwendungen / Socket-Programmierung
9
Threads
Als normale Java-Objekte
> Motivation: „Mehrere Dinge
gleichzeitig tun“
> Aktivitätseinheit für
nebenläufige Ausführung
> Teilt sich den Speicher mit
anderen Threads
> Besitzen Konstruktoren,
Methoden, Attribute
> Kommunikation durch
gegenseitige Methodenaufrufe
> Vorsicht: Synchronisation
beachten
Gero Mühl
Accept new connections
Handle client #1
…
Java Virtual Machine
Als leichtgewichtige Prozesse
Handle client #n
Shared
object
Shared
object
Shared
object
Shared
object
Webbasierte Anwendungen / Socket-Programmierung
10
Erzeugen von Threads (Variante A)
>
>
>
>
Klasse java.lang.Thread erweitern
Überschreiben der Methode void run() mit eigener Logik
Objekt mit eigenem Konstruktor erzeugen
Starten des Threads durch Methode void start()
> Alter Thread setzt Ausführung nach start() fort
> Neuer Thread beginnt Ausführung in run()
Welche Ausgabe
erzeugt das
Programm?
public class SimpleThread1 extends Thread {
public void run() {
System.out.println("World!");
}
public static void main(String[] args) {
new SimpleThread1().start();
System.out.print("Hello ");
} }
Gero Mühl
Webbasierte Anwendungen / Socket-Programmierung
11
Erzeugen von Threads (Variante B)
> Schnittstelle java.lang.Runnable implementieren
> Methode void run() mit eigener Logik füllen
> Objekt-Instanz der eigenen Klasse erzeugen und
dem Konstruktor der Klasse Thread übergeben
> Starten des Thread-Objektes durch Methode void start()
> Alter Thread setzt Ausführung nach start() fort
> Neuer Thread beginnt Ausführung in run()
public class SimpleThread2 implements Runnable {
Warum ist
Variante A nicht
ausreichend?
public void run() {
try{Thread.sleep(1000);} catch(InterruptedException e) {}
System.out.println(„Thread!");
}
public static void main(String[] args) {
new Thread(new SimpleThread2()).start();
System.out.print(„Hello “);
} }
Gero Mühl
Webbasierte Anwendungen / Socket-Programmierung
12
Beispiel (Multithreaded-Echo)
public class MultithreadedEcho extends Thread {
private Socket socket;
public MultithreadedEcho(Socket socket) {
this.socket = socket;
}
Behandlung eines
einzelnen Clients.
public void run() {
InputStream in = socket.getInputStream();
OutputStream out = socket.getOutputStream();
...
}
public static void main(String[] args) {
...
while (true) {
Socket client = serverSocket.accept();
new MultithreadedEcho(client).start();
} } }
Gero Mühl
Eingehende Verbindungen
akzeptieren und in neuem
Thread behandeln.
Webbasierte Anwendungen / Socket-Programmierung
13
Java New I/O
”Any problem in computer science
can be solved with another layer
of indirection.“
“Any performance problem can
be solved by removing a layer
of indirection.”
> Stream-Konzept bietet
hohen Abstraktionsgrad
 bequeme Programmierung
> Blockierende Operationen
zwingen zu aufwändigem
Multithreading
> Pufferklassen ermöglichen
Nutzung von Systemspeicher
> Kanäle und nicht-blockierende
Operationen
> Auswahl (Selection) sendeund empfangsbereiter Kanäle
 Konventionelle Java I/O
 New Java I/O ab J2SE 1.4
Gero Mühl
Webbasierte Anwendungen / Socket-Programmierung
14
Kanäle
> Neue Programmierabstraktion
> Repräsentieren eine Verbindung zu einer Ressource
(z.B. Datei, Socket) für I/O-Operationen
(z.B. Lesen, Schreiben)
> „Java-Version eines Dateideskriptors“
> Socket-Kanäle öffnen und binden
> Client-Seite
SocketChannel sc = SocketChannel.open();
sc.connect(new InetSocketAddress(host, port));
> Server-Seite
ServerSocketChannel ssc = ServerSocketChannel.open();
ssc.socket().bind(new InetSocketAddress(port));
Gero Mühl
Webbasierte Anwendungen / Socket-Programmierung
15
(Nicht-)Blockierende Operationen
> Kanäle sind entweder blockierend oder nicht-blockierend
> Blockierend (Default):
channel.configureBlocking(true);
> Nicht-blockierend:
channel.configureBlocking(false);
> Lesen von einem Kanal
> int read(ByteBuffer dst)
> Liest verfügbare Bytes in den Puffer dst ein
> Liefert Anzahl gelesener Bytes oder -1 bei End-of-File
> Schreiben in einen Kanal
> int write(ByteBuffer src)
> Schreibt Bytes aus dem Puffer src in den Kanal
> Liefert Anzahl geschriebener Bytes
Gero Mühl
Webbasierte Anwendungen / Socket-Programmierung
16
Selektoren
> Dienen dem Multiplexen von Kanälen
> Bestimmung der I/O-Bereitschaft von Kanälen
> Erzeugung und Registrierung
Selector selector = Selector.open()
SelectionKey key = channel.register(selector, interests)
> Interest Set (interests)
> Angabe der zu testenden I/O-Operationen pro Kanal/Key
> Integer-Wert durch bitweise Oder-Verknüpfung gebildet
aus folgenden Werten
> SelectionKey.OP_READ
> SelectionKey.OP_WRITE
> SelectionKey.OP_CONNECT > SelectionKey.OP_ACCEPT
Gero Mühl
Webbasierte Anwendungen / Socket-Programmierung
17
Selected-Key Set
> Auswahl der I/O-bereiten Kanäle
> int select()
> Aktualisiert das Selected-Key Set der bereiten Kanäle
> Liefert Anzahl der Änderungen (möglicherweise 0)
> Ergebnis der Auswahl: Selected-Key Set
> Set<SelectionKey> selectedKeys()
> Enthält die Keys der bereiten Kanäle zum Zeitpunkt des
letzten select Aufrufs  Gefahr veralteter Informationen
> Testen des Ready-Sets eines Keys
> boolean isReadable()
> boolean isConnectable()
> boolean isWriteable()
> boolean isAcceptable()
> Explizites Entfernen der Keys nach Behandlung notwendig
Gero Mühl
Webbasierte Anwendungen / Socket-Programmierung
18
Beispiel (New I/O – Echo-Server)
// bind a non-blocking server socket channel to port 8080
ServerSocketChannel ssc = ServerSocketChannel.open();
ssc.configureBlocking(false);
InetSocketAddress port = new InetSocketAddress(8080);
ssc.socket().bind(port);
// create a selector and register for accepting new connections
Selector sel = Selector.open();
ssc.register(sel, SelectionKey.OP_ACCEPT);
while( true ) { // main loop
sel.selectedKeys().clear();
sel.select();
Auswahl IObereiter Kanäle
Iteriere über bereite
Kanäle und arbeite
jeden einzeln ab
for( SelectionKey key : sel.selectedKeys() ) {
// handle channel/key
...
} }
Gero Mühl
Webbasierte Anwendungen / Socket-Programmierung
19
Beispiel (New I/O – Verbindungen)
// accept new client connections
if (key.isAcceptable()) {
SocketChannel sc = ssc.accept();
sc.configureBlocking(false);
// register new client connection
sc.register(sel,
SelectionKey.OP_READ,
ByteBuffer.allocate(2048) );
}
Gero Mühl
Beliebige Objekte
können einem Key
beigefügt werden
 Kanalkontext
Webbasierte Anwendungen / Socket-Programmierung
20
Beispiel (New I/O – Lesen)
// read client data into a buffer
if (key.isReadable()) {
SocketChannel sc = (SocketChannel)key.channel();
ByteBuffer buf = (ByteBuffer)key.attachment();
int read = sc.read(buf);
// EOF detected?
if (read < 0) {
client.close(); continue;
}
Kanal und assoziierter Kontext
Interest-Set fürs
// read successful?
Schreiben erweitern
if (read > 0) {
key.interestOps(key.interestOps() | SelectionKey.OP_WRITE);
}
Lesen aus dem
// buffer full?
Interest-Set löschen
if (!buf.hasRemaining()) {
key.interestOps(key.interestOps() & (~SelectionKey.OP_READ));
} }
Gero Mühl
Webbasierte Anwendungen / Socket-Programmierung
21
Beispiel (New I/O – Schreiben)
// write data into channel
if (key.isWritable()) {
SocketChannel sc = (SocketChannel)key.channel();
ByteBuffer buf = (ByteBuffer)key.attachment();
buf.flip();
int write = sc.write(buf);
Puffer zum Schreiben vorbereiten
Interest-Set fürs
// write successful?
Lesen erweitern
if (write > 0) {
key.interestOps(key.interestOps() | SelectionKey.OP_READ);
}
Schreiben aus
// buffer completely written?
Interest-Set löschen
if (!buf.hasRemaining()) {
key.interestOps(key.interestOps() & (~SelectionKey.OP_WRITE));
}
buf.compact();
}
Gero Mühl
Geschriebene Daten entfernen und
Puffer zum Lesen vorbereiten
Webbasierte Anwendungen / Socket-Programmierung
22
Literatur
> Java API Specification
> http://java.sun.com/javase/6/docs/api/
> Java I/O Tutorial
> http://java.sun.com/docs/books/tutorial/essential/io/
> Java Socket Tutorial
> http://java.sun.com/docs/books/tutorial/networking/sockets/
> Java Concurrency Tutorial
> http://java.sun.com/docs/books/tutorial/essential/concurrency/
> Java New I/O
> Ron Hitchens: Java NIO. O‘Reilly, 2002.
Gero Mühl
Webbasierte Anwendungen / Socket-Programmierung
23
Fragen?
Gero Mühl
Webbasierte Anwendungen / Socket-Programmierung
24
Zeichenkodierung
Gero Mühl
Webbasierte Anwendungen / Socket-Programmierung
25
Daten = Informationen?
0xCE 0xB1?
01
1001
110101
10 0 0
1
Wie lässt sich 0xCE 0xB1 interpretieren?
45 518
52 913
(Big Endian)
(Little Endian)
α
(UTF-8)
N1
(7 Bit ASCII)
α
(ISO-Latin-1)
Îą
(ISO-Latin-2)
Gero Mühl
Webbasierte Anwendungen / Socket-Programmierung
26
Zeichenkodierung
> Zeichenvorrat (Character Repertoire)
> Endliche, ungeordnete Menge an Zeichen
> Verschiedene Sprachen und Kulturen
 verschiedene Alphabete (Buchstaben, Ziffern und Symbole)
> Zeichensatz (Character Set oder Charset)
> Anordnung der Zeichen (z.B. in einer Tabelle)
> Zeichen  Nummer (Code Point)
> Zeichenkodierung (Character Encoding)
> Abbildung der Zeichennummer in Speicher-/Übertragungsformat
> Nummer (Code Point)  Bitmuster
Gero Mühl
Webbasierte Anwendungen / Socket-Programmierung
27
ASCII
> American Standard Code for Information Interchange (ASCII)
>
>
>
>
…0
1967 veröffentlichter 7-Bit Zeichensatz
128 Zeichen (95 druckbare Zeichen und 33 Steuerzeichen)
Entspricht dem Zeichenvorrat einer engl. Schreibmaschine
Grundlage (vieler) späterer Zeichensätze
…1
…2
…3
…4
…5
…6
…7
…8
…9
…A
…B
…C
…D
…E
…F
0…
NUL SOH STX ETX EOT ENQ ACK BEL
BS
HT
LF
VT
FF
CR
SO
SI
1…
DLE DC1 DC2 DC3 DC4 NAK SYN ETB CAN EM
FS
GS
RS
US
SUB ESC
2…
SP
!
"
#
$
%
&
'
(
)
*
+
,
-
.
/
3…
0
1
2
3
4
5
6
7
8
9
:
;
<
=
>
?
4…
@
A
B
C
D
E
F
G
H
I
J
K
L
M
N
O
5…
P
Q
R
S
T
U
V
W
X
Y
Z
[
\
]
^
_
6…
`
a
b
c
d
e
f
g
h
i
j
k
l
m
n
o
7…
p
q
r
s
t
u
v
w
x
y
z
{
|
}
~
DEL
ASCII Zeichensatz inkl. Steuerzeichen
Gero Mühl
Webbasierte Anwendungen / Socket-Programmierung
28
Latin-1
> ISO/IEC 8859-1 (Latin-1)
> 8-Bit Zeichensatz für viele westeuropäische Sprachen
> Zeichen 0 – 127 identisch zu ASCII  Kompatibilität
> Zeichen 128 – 159 unbelegt
(bzw. Steuerzeichen in ISO-8859-1)
> Zeichen 160 – 255 mit sprachspezifische Sonderzeichen
…0
8…
…1
…2
…3
…4
…5
…6
…7
…8
…9
…A
…B
…C
PAD HOP BPH NBH IND NEL SSA ESA HTS HTJ VTS PLD PLU
9… DCS PU1 PU2 STS CCH MW SPA EPA SOS SGCI SCI
A… NBSP
CSI
ST
…D
RI
…E
…F
SS2 SS3
OSC PM
APC
¡
¢
£
¤
¥
¦
§
¨
©
ª
«
¬
SHY
®
¯
B…
°
±
²
³
´
µ
¶
·
¸
¹
º
»
¼
½
¾
¿
C…
À
Á
Â
Ã
Ä
Å
Æ
Ç
È
É
Ê
Ë
Ì
Í
Î
Ï
D…
Ð
Ñ
Ò
Ó
Ô
Õ
Ö
×
Ø
Ù
Ú
Û
Ü
Ý
Þ
ß
E…
à
á
â
ã
ä
å
æ
ç
è
é
ê
ë
ì
í
î
ï
F…
ð
ñ
ò
ó
ô
õ
ö
÷
ø
ù
ú
û
ü
ý
þ
ÿ
ISO-8859-1 (inkl. Steuerzeichen).
Gero Mühl
Webbasierte Anwendungen / Socket-Programmierung
29
Latin-2
> ISO/IEC 8859-2 (Latin-2)
> 8-Bit Zeichensatz für viele (süd)osteuropäische Sprachen
> Zeichen 0 – 127 identisch zu ASCII  Kompatibilität
> Zeichen 128 – 159 unbelegt
(bzw. Steuerzeichen in ISO-8859-1)
> Zeichen 160 – 255 mit sprachspezifische Sonderzeichen
…0
8…
…1
…2
…3
…4
…5
…6
…7
…8
…9
…A
…B
…C
PAD HOP BPH NBH IND NEL SSA ESA HTS HTJ VTS PLD PLU
9… DCS PU1 PU2 STS CCH MW SPA EPA SOS SGCI SCI
A… NBSP
CSI
ST
…D
RI
…E
…F
SS2 SS3
OSC PM
APC
Ą
˘
Ł
¤
Ľ
Ś
§
¨
Š
Ş
Ť
Ź
SHY
Ž
Ż
B…
°
ą
˛
ł
´
ľ
ś
ˇ
¸
š
ş
ť
ź
˝
ž
ż
C…
Ŕ
Á
Â
Ă
Ä
Ĺ
Ć
Ç
Č
É
Ę
Ë
Ě
Í
Î
Ď
D…
Đ
Ń
Ň
Ó
Ô
Ő
Ö
×
Ř
Ů
Ú
Ű
Ü
Ý
Ţ
ß
E…
ŕ
á
â
ă
ä
ĺ
ć
ç
č
é
ę
ë
ě
í
î
ď
F…
đ
ń
ň
ó
ô
ő
ö
÷
ř
ů
ú
ű
ü
ý
ţ
˙
ISO-8859-2 (inkl. Steuerzeichen).
Gero Mühl
Webbasierte Anwendungen / Socket-Programmierung
30
Unicode
Zeichen
Nummer
(Codepunkt)
Repräsentation (UTF-8)
a (lat. A)
α (Alpha)
‫( א‬Alef)
U+0061
U+03B1
U+05D0
0x61
0xCE 0xB1
0xD7 0x90
> Unicode
> Gibt jedem Zeichen eine Nummer (Code Point)
> Sprach- und plattformunabhängiger, universeller Zeichensatz
> Unicode Transformation Format (UTF)
> Bildet Nummern auf Bytesequenzen ab
> Verschiedene Möglichkeiten: UTF-7, UTF-8, UTF-16, UTF-32, …
Gero Mühl
Webbasierte Anwendungen / Socket-Programmierung
31
UTF-8 Kodierung
Unicode Bereich
UTF-8 Kodierung
0000 0000 – 0000 007F
0xxxxxxx
0000 0080 – 0000 07FF
110xxxxx 10xxxxxx
0000 0800 – 0000 FFFF
1110xxxx 10xxxxxx 10xxxxxx
0001 0000 – 0010 FFFF
11110xxx 10xxxxxx 10xxxxxx 10xxxxxx
Startbyte
> 0xxxxxxx
Äquivalent zu ASCII
Folgebyte(s)
> 10xxxxxx
> Anzahl: so viele wie nötig
> 1...10x...x
Anzahl der führenden 1 =
Anzahl der Bytes gesamt
Gero Mühl
Webbasierte Anwendungen / Socket-Programmierung
32
Charsets in Java
> Klasse java.nio.charset.Charset
> Liste der auf der Plattform verfügbaren Zeichensätze
public static SortedMap<String,Charset>
availableCharsets()
> Zeichensatz unter kanonischem Namen anfordern
public static Charset forName(String charsetName)
> (Indirekte) Nutzung durch andere Klassen
> Charset-Objekte besitzen Methoden zum
> Kodieren: public ByteBuffer encode(CharBuffer cb)
> Dekodieren: public CharBuffer decode(ByteBuffer bb)
> Charset-Objekte erlauben die Erzeugung von
> Kodierern:
public abstract CharsetEncoder
newEncoder()
> Dekodierern: public abstract CharsetDecoder
newDecoder()
Gero Mühl
Webbasierte Anwendungen / Socket-Programmierung
33
Kodieren / Dekodieren
> Klassen java.io.{InputStreamReader | OutputStreamWriter}
> Angabe des zu nutzenden Zeichensatzes bei Objekterzeugung
> Kodieren:
public OutputStreamWriter(OutputStream out,
String charsetName)
> Dekodieren:
public InputStreamReader(InputStream in,
String charsetName)
> Klasse java.lang.String
> Kodieren:
public byte[] getBytes(String charsetName)
> Dekodieren:
public String(byte[] bytes, String charsetName)
Gero Mühl
Webbasierte Anwendungen / Socket-Programmierung
34
Literatur
> Registrierte Character Sets
> http://www.iana.org/assignments/character-sets
> Unicode
> http://unicode.org/
Gero Mühl
Webbasierte Anwendungen / Socket-Programmierung
35
Exemplarische Fragen zur Lernkontrolle
Sockets
1. Was ist ein Socket?
2. Worin besteht der Unterschied zwischen einem
Server- und einem Client-Socket?
3. Erläutern Sie die prinzipielle Vorgehensweise bei der
Socket-Programmierung in Java!
4. Was sind die wesentlichen Unterschiede zwischen dem
klassischen Vorgehen unter Java und dem Java New I/O?
Gero Mühl
Webbasierte Anwendungen / Socket-Programmierung
36
Exemplarische Fragen zur Lernkontrolle
Zeichenkodierungen
1. Erläutern Sie die Begriffe Zeichenvorrat, Zeichensatz
und Zeichenkodierung!
2. Welche Probleme können auftreten, wenn
Kommunikationspartner (unwissentlich) unterschiedliche
Zeichensätze oder Zeichenkodierungen verwenden?
3. Was versteht man unter Unicode?
4. Worin unterscheiden sich UTF-8, UTF-16 und UTF-32?
5. Wie werden Zeichensätze in Java unterstützt?
Gero Mühl
Webbasierte Anwendungen / Socket-Programmierung
37
Vielen Dank für Ihre Aufmerksamkeit!
Univ.-Prof. Dr.-Ing. habil. Gero Mühl
[email protected]
http://wwwava.informatik.uni-rostock.de
Gero Mühl
Webbasierte Anwendungen / Socket-Programmierung
38
Webbasierte Anwendungen
Grundlegende Dienste
Univ.-Prof. Dr.-Ing. habil. Gero Mühl
Architektur von Anwendungssystemen (AVA)
Fakultät für Informatik und Elektrotechnik (IEF)
Universität Rostock
Überblick
> Domain Name Service (DNS)
> E-Mail
> File Transfer Protocol (FTP)
> Secure Shell (SSH)
Gero Mühl
Webbasierte Anwendungen / Grundlegende Dienste
2
Domain Name Service (DNS)
Gero Mühl
Webbasierte Anwendungen / Grundlegende Dienste
3
Domain Name Service (DNS)
> Dienst zur Abbildung von Namen auf IP-Adressen
> Hierarchisches Domänen-Konzept
> Domänen unabhängig von physischen Netzen
> Beispiel: informatik.uni-rostock.de
> uni-rostock ist Subdomain von de
> Syntax der Namen
> <256 Zeichen, Teile <64 Zeichen
> Groß-/Kleinschreibung unerheblich
> Skalierbarkeit von DNS beruht auf
> Replikation  Robustheit
> Caching  Performance
> Hierarchische Organisation
 dezentrale Namensvergabe
Gero Mühl
Webbasierte Anwendungen / Grundlegende Dienste
4
DNS – Top Level Domains
> Organisatorisch COM, EDU, GOV, MIL, ORG, NET,
INT, ...
> Geographisch
DE, UK, US, AU, TO, ...
root
ibm
com
edu
...
...
purdue
...
ee
db
Gero Mühl
cs
...
ai
de
org
uni-rostock
...
Top Level Domains
heise
informatik
…
...
...
Webbasierte Anwendungen / Grundlegende Dienste
5
Platzierung von Name Servern
> DNS-Namensraum wird in nicht überlappende Zonen eingeteilt
> Jede Zone enthält einen Primary Name Server und evtl. weitere
Secondary Name Server zur Erhöhung der Zuverlässigkeit
> Jeder Name Server kennt mindestens einen übergeordneten Server
> Primary Name Server kennen die Root Name Server
root
com
ibm
...
princeton
ee
cs
db
Gero Mühl
...
edu
org
uni-rostock
...
...
ai
de
...
informatik
…
...
heise
physik
...
Webbasierte Anwendungen / Grundlegende Dienste
6
Datenbank im Name Server
> Speicherung der Abbildungsinformationen
> Einträge heißen Resource Records (RR)
> Jeder Resource Record ist ein 5-Tupel
> Domain Name Domain-Name, für den dieser RR gilt
> Class
Klassifizierung der Information
(meist „IN“ = Internet)
> Type
Typ des Eintrags
> Value
Datenwert (abhängig vom Typ)
> Time-to-Live
Lebensdauer des Eintrags (in Sekunden)
Gero Mühl
Webbasierte Anwendungen / Grundlegende Dienste
7
Resource Record Typen (Beispiele)
Typ
Bedeutung
Wert
SOA
A
MX
NS
CNAME
PTR
HINFO
TXT
NS zuständig für
IP-Adresse f. Namen
E-Mail Knoten
Name Server
Alias
inverse Abbildung
Host-Beschreibung
Beliebiger Text
mehrere Parameter
32-Bit-Integer
Priorität, Empfänger für ...
Name eines NS
Name einer Domäne
Name
ASCII-Text
ASCII-Text
Gero Mühl
Webbasierte Anwendungen / Grundlegende Dienste
8
Beispiel
> dig +nocmd uni-rostock.de any +multiline +noall +answer
uni-rostock.de.
86400 IN A 139.30.8.152
uni-rostock.de.
86400 IN A 139.30.8.153
uni-rostock.de.
86400 IN A 139.30.8.196
uni-rostock.de.
86400 IN A 139.30.8.197
uni-rostock.de.
86400 IN A 139.30.8.29
uni-rostock.de.
86400 IN NS ws-kar1.win-ip.dfn.de.
uni-rostock.de.
86400 IN NS top.uni-rostock.de.
uni-rostock.de.
86400 IN NS hp1.uni-rostock.de.
uni-rostock.de.
86400 IN NS deneb.dfn.de.
uni-rostock.de.
86400 IN SOA top.uni-rostock.de.
hostmaster.uni-rostock.de. (
2010110801 ; serial
28800
; refresh (8 hours)
7200
; retry (2 hours)
604800
; expire (1 week)
172800
; minimum (2 days)
)
uni-rostock.de.
86400 IN MX 26 ida.uni-rostock.de.
uni-rostock.de.
86400 IN MX 11 antivirus.uni-rostock.de.
Gero Mühl
Webbasierte Anwendungen / Grundlegende Dienste
9
Namensdienst
.edu
> Iterative Kooperation der Name Server
> Beispiel
Root
Name
Server
2
3
.princeton.edu
1
4
cicada.cs.princeton.edu
Client
128.112.136.60
8
Princeton
Lokaler
cicada.cs.princeton.edu
Name
Name
cs.princeton.edu, 128.112.136.10 Server
Server
5
6


Gero Mühl
Caching des Ergebnisses im
lokalen Name Server
Bereinigung des Caches entsprechend der
Time-to-Live des Eintrags
7
.cs.princeton.edu
CS
Name
Server
Webbasierte Anwendungen / Grundlegende Dienste
10
Namensdienst
> Beispiel: E-Mail an „[email protected]“
Benutzer
[email protected]
2 cs.princeton.edu
Name
Server
1
Mail
program
Program
3
128.112.136.15
Die
Anwendung,
nicht TCP,
löst den
Namen auf!
128.112.136.15 4
TCP
128.112.136.15
5
IP
Gero Mühl
Webbasierte Anwendungen / Grundlegende Dienste
11
E-Mail
Gero Mühl
Webbasierte Anwendungen / Grundlegende Dienste
12
E-Mail Anforderungen
> Zuverlässiges Verschicken von Text und Daten
> Entkoppelte, Store-and-Forward-Übertragung
(ggf. mit Auslieferungsbestätigung)
> Adressierung von Einzelpersonen und Gruppen
> Strukturierte Nachrichten mit klarer Trennung der Einheiten
> Weiterleiten und Kopieren von Nachrichten
Thunderbird, Outlook,
pine, mutt, mail, …
User
Agent
Transfer
Agent
User
Agent
Transfer
Agent
Transfer
Agent
Postfix, Exim,
Sendmail, …
Gero Mühl
Webbasierte Anwendungen / Grundlegende Dienste
13
Simple Mail Transfer Protocol (SMTP)
>
>
>
>
Spezifiziert in RFC 821 bzw. RFC 2821
Einfaches ASCII-Protokoll
Auslieferung von Mail über TCP-Verbindung (Port 25)
Der Absender (= SMTP Client) kommuniziert mit dem
SMTP Daemon des Empfängers (= SMTP Server)
> Client-Kommandos (Text)
> HELO, MAIL FROM, DATA, QUIT, ...
> Server-Antworten (Ziffern + Text)
>
>
>
>
Gero Mühl
220 (= service ready)
250 (= other party OK)
354 (= send mail)
....
Webbasierte Anwendungen / Grundlegende Dienste
14
SMTP – Beispieldialog
Client
Server
220 fritz.com SMTP service ready
HELO otto.edu
250 fritz.com says hello to otto.edu
MAIL FROM: <[email protected]>
250 sender OK
RCPT TO: <[email protected]>
250 recipient OK
DATA
354 send mail; end with "."-line
text text text text ......
.
250 message accepted
QUIT
221 fritz.com closing connection
Gero Mühl
Webbasierte Anwendungen / Grundlegende Dienste
15
Nachrichtenformate [RFC 822, 2822]
> Aufbau einer Nachricht
> Umschlag (Envelope) + Briefkopf (Header) + Rumpf (Body)
Body
> Umschlag wird von den Transfer Agents benutzt und gebildet
> Header-Felder werden für den Transport benötigt
>
>
>
>
>
>
>
Gero Mühl
To:
Cc:
Bcc:
From:
Sender:
Received:
Return-Path:
(primäre) Empfänger
(sekundäre) Empfänger
(unsichtbare) Empfänger
Briefschreiber
Absender (falls unterschiedlich von From)
pro Zwischen-Transfer-Agent eine Zeile
Rückweg für Antworten
Webbasierte Anwendungen / Grundlegende Dienste
16
Nachrichtenformate [RFC 822, 2822]
> Zusätzliche Felder im Header (optional)
>
Date:
Datum und Zeit des Abschickens
>
Reply-To:
Adresse für Antworten
>
Message-Id:
eindeutige Nummer
>
In-Reply-To:
Bezug ("Message-Id")
>
References:
andere relevante Message-Ids
>
Keywords:
vom Benutzer angegebene Keywords
>
Subject:
Betreff
>
X-?????:
benutzerdefinierte Felder
> Leerzeile trennt Header-Felder vom Inhalt (Body)
Gero Mühl
Webbasierte Anwendungen / Grundlegende Dienste
17
Motivation für MIME
> SMTP ist ein (7 Bit) ASCII Protokoll
> E-Mails bestehen aus Text im US-ASCII-Format
> Problem: Versenden von Nachrichten
> Mit Texten anderer Sprachen
(die nicht in US-ASCII darstellbar sind)
> Mit (beliebigen) binären Inhalten
(z.B. Grafik, Audio, Video)
> Lösung: Multipurpose Internet Mail Extensions (MIME)
>
>
>
>
Gero Mühl
Vorgeschlagen RFC 1341 und überarbeitet in weiteren RFCs
Transport von (Binär)daten als US-ASCII  Kodierung
Keine Änderung des SMTP  Kompatibilität zu Mail-Servern
Aber: Anpassung der Mail-Clients erforderlich
Webbasierte Anwendungen / Grundlegende Dienste
18
MIME Header
> Erweiterung des E-Mail Headers um 5 neue Felder
> MIME-Version
> Erkennung einer MIME Nachricht
> Aktuelle Version 1.0 (trotz mehrfacher Erweiterungen)
> Content-Description
> Optionale, menschen-lesbare Beschreibung des Inhalts
> Content-Id
> Optionaler eindeutiger Bezeichner für den Inhalt
> Content-Transfer-Encoding
> Bezeichnet die Kodierung (Art der Verpackung) des Inhalts
> Content-Type
> Art des Inhalts (z.B. Text, Bild, Audio, etc.)
Gero Mühl
Webbasierte Anwendungen / Grundlegende Dienste
19
Content-Transfer-Encoding
> 7Bit
> Bezeichnet ursprüngliches SMTP-E-Mail-Format
> ASCII Zeichen (Oktetts im Bereich 0x00 – 0x7F) angeordnet
in Zeilen mit max. 1000 Zeichen (inkl. abschließendes CRLF)
> 8Bit
> Beliebige Oktetts in Zeilen mit max. 1000 Zeichen (inkl. CRLF)
> Verletzt ursprünglichen Standard
 vorgesehen für SMTP Erweiterung 8BITMIME
> Binary
> Beliebige Oktetts (für 8BITMIME) ohne Zeilen
> Quoted-Printable
> Lesbare Kodierung für ASCII-Text mit wenigen Sonderzeichen
> Base64
> Dichte Kodierung für binäre Daten
Gero Mühl
Webbasierte Anwendungen / Grundlegende Dienste
20
Quoted-Printable [RFC 2045]
Hüte
H=FCte
(Latin-1)
(Quoted-Printable)
> Beliebige Oktetts werden als Gleichheitszeichen (=) gefolgt
vom Hexadezimalwert des Oktetts kodiert
> Beispiel: ä (Latin-1)  =E4, ü (Latin-1)  =FC
> Druckbare Zeichen (ASCII 32–126) dürfen erhalten bleiben
> Ausnahme Gleichheitszeichen (=)  =3D
> Ausnahme Leerzeichen/Tabulator vor Zeilenumbruch
 =20 / =09
> Harte Zeilenumbrüche (mit Bedeutung) stets als CRLF kodiert
> Einfache Werte 10 und 13  =0A bzw. =0D
> Zeilen umfassen max. 76 Zeichen
> Einfügen weicher Zeilenumbrüche  = gefolgt von CRLF
Gero Mühl
Webbasierte Anwendungen / Grundlegende Dienste
21
Base64 [RFC 2045]
Hüte
SPx0ZQ==
(Latin-1)
(Base64)
> 3 Oktetts (24 Bits) werden in vier 6-Bit-Einheiten zerlegt
 26 = 64 Werte
> Jede 6-Bit-Einheit erhält nach ihrem Wert ein Zeichen
> 0  A, 1  B, …, 25  Z,
> 26  a, 27  b, …, 51  z,
> 52  0, 53  1, …, 61  9, 62  + , 63  /
> Markierungen = und == kennzeichnen die letzte
Eingabegruppe, sofern diese nur aus 16 bzw. 8 Bit besteht
> Nach 76 Zeichen wird ein Zeilenumbruch CRLF eingefügt
> Bei Dekodierung werden Zeichen außerhalb des obigen
Alphabets ignoriert (z.B. eingefügte Zeilenumbrüche CRLF)
Gero Mühl
Webbasierte Anwendungen / Grundlegende Dienste
22
Base64 Beispiel
Text
M
a
n
ASCII
0x4D (77)
0x61 (97)
0x6E (110)
Bit Pattern
Index
Base64
Gero Mühl
010011010110000101101110
0x13 (19) 0x16 (22)
T
W
0x05 (5)
0x2E (46)
F
u
Webbasierte Anwendungen / Grundlegende Dienste
23
Base64 Tabelle
Wert
Zeichen
Wert
Zeichen
Wert
Zeichen
Wert
Zeichen
0x00 (00)
A
0x10 (16)
Q
0x20 (32)
g
0x30 (48)
w
0x01 (01)
B
0x11 (17)
R
0x21 (33)
h
0x31 (49)
x
0x02 (02)
C
0x12 (18)
S
0x22 (34)
i
0x32 (50)
y
0x03 (03)
D
0x13 (19)
T
0x23 (35)
j
0x33 (51)
z
0x04 (04)
E
0x14 (20)
U
0x24 (36)
k
0x34 (52)
0
0x05 (05)
F
0x15 (21)
V
0x25 (37)
l
0x35 (53)
1
0x06 (06)
G
0x16 (22)
W
0x26 (38)
m
0x36 (54)
2
0x07 (07)
H
0x17 (23)
X
0x27 (39)
n
0x37 (55)
3
0x08 (08)
I
0x18 (24)
Y
0x28 (40)
o
0x38 (56)
4
0x09 (09)
J
0x19 (25)
Z
0x29 (41)
p
0x39 (57)
5
0x0A (10)
K
0x1A (26)
a
0x2A (42)
q
0x3A (58)
6
0x0B (11)
L
0x1B (27)
b
0x2B (43)
r
0x3B (59)
7
0x0C (12)
M
0x1C (28)
c
0x2C (44)
s
0x3C (60)
8
0x0D (13)
N
0x1D (29)
d
0x2D (45)
t
0x3D (61)
9
0x0E (14)
O
0x1E (30)
e
0x2E (46)
u
0x3E (62)
+
0x0F (15)
P
0x1F (31)
f
0x2F (47)
v
0x3F (63)
/
Gero Mühl
Webbasierte Anwendungen / Grundlegende Dienste
24
Content-Type [RFC 2046]
> Charakterisieren den Inhalt  Bestimmen Art der Darstellung
> Registrierung der Medientypen bei der IANA [RFC 4288,4289]
> Liste registrierter Typen: http://www.iana.org/assignments/media-types/
Typ / Subtyp
Beschreibung
text
html
HTML-Dateien
plain
Reintext
jpeg
JPEG-Dateien
png
PNG-Dateien
audio
basic
Sound-Dateien
video
mpeg
MPEG-Dateien
octet-stream
Unbekannte Anwendungsdaten
postscript
Postscript
external-body
Nachricht referenziert externen Inhalt
partial
Nachricht mit Teilinhalt
rfc822
Nachricht nach RFC 2822
alternative
Mehrteilige Daten alternativ
digest
Mehrteilige Daten auswahl
mixed
Mehrteilige Daten gemischt
parallel
Mehrteilige Daten parallel
image
application
message
multipart
Gero Mühl
Webbasierte Anwendungen / Grundlegende Dienste
25
X-Typen
> Verwendung nicht-standardisierter Subtypen ist zulässig
> Kennzeichnung mit Präfix „x-“
> Keine Eindeutigkeit
> Aber viele Subtypen im Gebrauch
Typ / Subtyp
application
audio
video
Gero Mühl
Beschreibung
x-dvi
DVI-Dateien
x-framemaker
Framemaker-Dateien
x-gzip
gzip-Archive
x-latex
Latex-Dateien
x-shockwave-flash
Adobe Flash-Dateien
x-tar
tar-Archive
x-ms-wma
Windows Media Audio
x-wav
WAV Dateien
x-ms-wmv
Windows Media Video
Webbasierte Anwendungen / Grundlegende Dienste
26
Multipart Beispiel (Message Parts)
MIME-Version: 1.0
Eine eindeutige Zeichenkette als
From: Alice Alisson <[email protected]>
Begrenzer trennt einzelne
TO: Bob Bobington <[email protected]>
Nachrichtenteile voneinander ab.
Subject: A multipart example
Content-Type: multipart/mixed; boundary=unique-boundary-1
This is the preamble area of a multipart message. Mail readers
that understand multipart format should ignore this preamble.
--unique-boundary-1
Some text appears here... Since no header fields were given the
text is assumed to be US-ASCII.
--unique-boundary-1
Content-type: text/plain; charset=US-ASCII
This could have been part of the previous part, but illustrates
explicit versus implicit typing of body parts.
Gero Mühl
Webbasierte Anwendungen / Grundlegende Dienste
27
Multipart Beispiel (Transfer Encodings)
--unique-boundary-1
Content-Type: text/plain; charset=ISO-8859-1
Content-Transfer-Encoding: quoted-printable
This is Latin-1 text which is encoded using quoted printable=20=
in order to preserve German Umlaute: H=FCte and H=E4user.
--unique-boundary-1
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: Base64
This is UTF-8 text which is Base64
encoded to preserve German
Umlaute: Hüte and Häuser.
VGhpcyBpcyBVVEYtOCB0ZXh0IHdoaWNoIGlzIEJhc2U2NCBlbmNvZGVkIHRvIHByZXN
lcnZlIEdlcm1hbiBVbWxhdXRlOiBIw7x0ZSBhbmQgSMOkdXNlci4=
Gero Mühl
Webbasierte Anwendungen / Grundlegende Dienste
28
Multipart Beispiel (Nesting)
--unique-boundary-1
Content-Type: multipart/parallel; boundary=unique-boundary-2
--unique-boundary-2
Content-Type: audio/basic
Content-Transfer-Encoding: base64
... base64-encoded 8000 Hz audio data goes here ...
--unique-boundary-2
Content-Type: image/png
Content-Transfer-Encoding: base64
... base64-encoded image data goes here ...
Verschachtelung von
Multipart Nachrichten.
--unique-boundary-2
--unique-boundary-1
Content-type: text/richtext
This is richtext. Isn't it cool?
--unique-boundary-1
Gero Mühl
Webbasierte Anwendungen / Grundlegende Dienste
29
JavaMail API
> API und Referenzimplementierung von Sun
> Versenden von E-Mails (SMTP)
> Empfangen/Abrufen von E-Mails (POP3, IMAP)
> JavaMail API
> URL: http://java.sun.com/products/javamail
> Aufnehmen der mail.jar Bibliothek in den Klassenpfad
(java -classpath /path/to/mail.jar MyProgram)
> JavaBeans Activation Framework
> Notwendig für Java SDK 5 und älter
> URL: http://java.sun.com/products/javabeans/glasgow/jaf.html
> Aufnehmen der activation.jar Bibliothek in den Klassenpfad
(java -classpath /path/to/activation.jar
MyProgram)
Gero Mühl
Webbasierte Anwendungen / Grundlegende Dienste
30
Verbindungen
> Klasse javax.mail.Session
> Repräsentiert eine Verbindung zum Server (SMTP, POP3, IMAP)
> Angabe der Konfiguration bei Objekterzeugung
> Einstellungen werden in Form von Schlüssel / Wert-Paaren in einem
Properties-Objekt (Hash-Tabelle) abgelegt
> Übersicht relevanter Schlüssel in Dokumentation der Pakete
com.sun.mail.{smtp | pop3 | imap | dsn} und javax.mail
> Versenden von Nachrichten erfolgt über
Transport-Mechanismus der Verbindung
> Beispiel
Properties props = new Properties();
props.setProperty("mail.smtp.host", "mail.cs.tu-berlin.de");
Session session = Session.getDefaultInstance(props);
Message msg = new MimeMessage(session);
…
Transport.send(msg);
Gero Mühl
Webbasierte Anwendungen / Grundlegende Dienste
31
MIME-Nachrichten
> Klasse javax.mail.MimeMessage
> Repräsentiert eine einfache MIME-Nachricht
> Bietet Methoden zum Setzen
> des Absenders und der Empfänger
> des Betreffs und weiterer Header-Felder
> des Nachrichteninhalts
> Beispiel
InternetAddress from = new InternetAddress("[email protected]");
InternetAddress to = new InternetAddress("[email protected]");
msg = new MimeMessage(session);
msg.setFrom(from);
msg.setRecipient(Message.RecipientType.TO, to);
msg.setSubject("JavaMail API example");
msg.setContent("It works! Isn't it cool?", "text/plain");
Transport.send(msg);
Gero Mühl
Webbasierte Anwendungen / Grundlegende Dienste
32
MIME Multipart-Nachrichten
> Klasse javax.mail.internet.MimeMultipart
> Container für mehrere MIME Nachrichtenteile
> Angabe des Subtyps (mixed, alternative, …) bei Erzeugung
> Klasse javax.mail.internet.MimeBodyPart
> Repräsentiert einen MIME Nachrichtenteil
> Beispiel
MimeBodyPart txt = new MimeBodyPart();
txt.setContent("This is plain text.", "text/plain");
MimeBodyPart html = new MimeBodyPart();
html.setContent("<html><body>This is <b>HTML</b>.</body></html>",
"text/html");
MimeMultipart content = new MimeMultipart("alternative");
content.addBodyPart(txt); content.addBodyPart(html);
Message msg = ...
msg.setContent(content);
Gero Mühl
Webbasierte Anwendungen / Grundlegende Dienste
33
Base64 Kodierung in Java
> JavaMail API
> Selbständige Wahl passender Transfer-Kodierung  Transparenz
> Manuelle Vorgabe durch explizites Setzen des MIME Headers:
msg.setHeader("Content-Transfer-Encoding", "Base64")
> Java SDKs
> Klassen sun.misc.{BASE64Encoder | BASE64Decoder}
> Nicht öffentliches Paket  keine Garantien für die Zukunft
> Alternative: Commons-Bibliothek des Apache Jakarta Projekts:
http://commons.apache.org/codec
> Beispiel
byte[] bytes1 = {0x08, 0x15, 0x47, 0x11};
String s = new BASE64Encoder().encode(bytes1);
byte[] bytes2 = new BASE64Decoder().decodeBuffer(s);
System.out.println(Arrays.equals(bytes1,bytes2));
Gero Mühl
Webbasierte Anwendungen / Grundlegende Dienste
34
Literatur
> Simple Mail Transport Protocol (SMTP)
> http://tools.ietf.org/html/rfc821, http://tools.ietf.org/html/rfc2821
> E-Mail Message Format
> http://tools.ietf.org/html/rfc822, http://tools.ietf.org/html/rfc2822
> Multipurpose Internet Mail Extensions (MIME)
> http://tools.ietf.org/html/rfc1341, http://tools.ietf.org/html/rfc2045
> Quoted Printable
> http://tools.ietf.org/html/rfc1521
> Base64
> http://tools.ietf.org/html/rfc2045
> JavaMail API
> http://java.sun.com/products/javamail/
Gero Mühl
Webbasierte Anwendungen / Grundlegende Dienste
35
File Transfer Protocol (FTP)
Gero Mühl
Webbasierte Anwendungen / Grundlegende Dienste
36
File Transfer Protocol (FTP) [RFC 959]
> Ermöglicht den Transfer von Dateien zwischen Systemen
> Einfacher als die Einbindung von entfernten Dateien
in das lokale Dateisystem (z.B. mittels NFS)
> Bietet einfache Möglichkeit auf gemeinsame Daten zuzugreifen
> Wird meistens für nur lesbare Dateien benutzt
> Falls die Datei verändert wird, muss sie explizit per erneutem
Transfer zurückgeschrieben werden
> Zugang über Benutzerkonto (Name + Passwort)
> Benutzerkonto, Passwort und Daten werden dabei
im Klartext übertragen
> Bietet interaktiven Zugang als auch Programmierschnittstelle
> Verschiedene Datenformate (ASCII und binär)
Gero Mühl
Webbasierte Anwendungen / Grundlegende Dienste
37
FTP-Verbindungen
> Arbeitet mit TCP
> 2 Verbindungen pro Übertragung
> Kontrollport = 21
> Datenport = 20
Daten
Steuerung
Client
Server
Steuerung
Daten
TCP
> Zusätzlich existiert ein Trivial File Transfer Protocol (TFTP)
> Aufbauend auf UDP, kleiner Umfang, einfache Implementierung
Gero Mühl
Webbasierte Anwendungen / Grundlegende Dienste
38
FTP-Sitzung
$ ftp diamant.vsb.informatik.uni-frankfurt.de
Connected to diamant.vsb.informatik.uni-frankfurt.de
220 diamant.vsb.informatik.uni-... FTP server ready.
Name (diamant:otto): anonymous
331 Guest login ok, send ident as password.
Password: [email protected]
230 Guest login ok, access restrictions apply.
ftp> cd pub
200 PORT command ok.
ftp> get some.file.data my.local.data
150 Opening data connection for /bin/ls (141.2.2.1, 2363)
(290455 bytes).
226 Transfer complete.
300000 bytes received in 99 seconds (30 Kbytes/s)
ftp> close
221 Goodbye.
ftp> quit
$
Gero Mühl
Webbasierte Anwendungen / Grundlegende Dienste
39
FTP mit Java
URL url = new URL(
"ftp://user01:[email protected]/README.txt;type=i");
URLConnection urlc = url.openConnection();
InputStream is = urlc.getInputStream(); // To download
OutputStream os = urlc.getOutputStream(); // To upload
Gero Mühl
Webbasierte Anwendungen / Grundlegende Dienste
40
Telnet, SSH
Gero Mühl
Webbasierte Anwendungen / Grundlegende Dienste
41
Telnet [RFC 854]
> Telnet liefert interaktiven Terminalzugang über das Netz
> Unsicher, da Daten, Benutzerkennungen und Passwörter im
Klartext übertragen werden  Secure Shell (SSH)
> Client verbindet sich mittels TCP zu Port 23 des Servers
> Client registriert Tastaturanschläge, schickt sie zum Server,
empfängt die Ergebnisse und leitet sie zum Bildschirm
> Was geschieht bei Ctrl-c oder bei CR/LF?  OS-Integration
> Server leitet alle Daten an das lokale System weiter und gibt
Ergebnisse zurück
Terminal
telnet
Client
Server
telnet
TCP
Betriebssystem
Gero Mühl
Betriebssystem
Webbasierte Anwendungen / Grundlegende Dienste
42
SSH [RFC 4250-4254]
> Sicherer Ersatz für Telnet (TCP / Port 22)
> SSH Suite
1.
2.
3.
4.
5.
6.
ssh: "shell" that connects to the remote machine.
scp: batch file transfers.
sftp: interactive file transfers.
ssh-keygen: generates private-public authentication keys
ssh-copy-id: copies public key to remote host.
ssh-agent: daemon used to automate
client's authentications
7. ssh-add: loads private keys into ssh-agent process
8. ssh-keyscan: get public key of remote host
9. sshd: a server program running on the remote machine
> Bekannte Implementationen: openSSH, PuTTY
Gero Mühl
Webbasierte Anwendungen / Grundlegende Dienste
43
SSH – Einloggen ohne Passworteingabe
> Schlüsselpaar (öffentlicher und privater Schlüssel)
mit nicht-leerer Passphrase erzeugen
> ssh-keygen –t dsa
> Öffentlichen Schlüssel auf entferntem Host hinterlegen
> ssh-copy-id [-i identity_file]
[user@]machine
> Passphrase im ssh-agent hinterlegen
(z.B. beim Start von X)
> ssh-add [identity_file]
> Einloggen ohne Passwort
> ssh [-i identity_file] [user@]machine
Gero Mühl
Webbasierte Anwendungen / Grundlegende Dienste
44
SSH – Tunnel / Local Port Forwarding
> Einrichtung einer Weiterleitung eines lokalen Ports an
einen entfernten Port
> ssh -g -N -L 50022:public_host:22
user@public_host
> Nutzung der Weiterleitung bewirkt Anmeldung auf
Rechner public_host
> ssh –p 50022 user@private_host
Port
50022
Port
22
private_host
Gero Mühl
public_host
Webbasierte Anwendungen / Grundlegende Dienste
45
SSH – Tunnel / Remote Port Forwarding
> Einrichtung einer Weiterleitung eines entfernten Ports
auf einen lokalen Port
> ssh -g -N -R 50023:localhost:22
user@public_host
> Nutzung der Weiterleitung bewirkt Anmeldung auf
Rechner private_host
> ssh –p 50023 user@public_host
Port
22
Port
50023
private_host
Gero Mühl
public_host
Webbasierte Anwendungen / Grundlegende Dienste
46
Jakarta Commons Net
Gero Mühl
Webbasierte Anwendungen / Grundlegende Dienste
47
Jakarta Commons Net
> Sammlung von Java-Klassen unter Open Source-Lizenz
für den Bereich Internetprotokolle
http://commons.apache.org/net
> Unterstützte Protokolle
>
>
>
>
>
>
Gero Mühl
FTP/FTPS
NNTP
SMTP
POP3
Telnet
…
Webbasierte Anwendungen / Grundlegende Dienste
48
Exemplarische Fragen zur Lernkontrolle
DNS und E-Mail
1. Erläutern Sie den Zweck und die Funktionsweise von DNS!
2. Worin besteht der Unterschied zwischen einer rekursiven und einer
iterativen DNS-Anfrage?
3. Warum besitzen gecachte DNS-Einträge eine
begrenzte Lebensdauer?
4. Welche Faktoren tragen wesentlich zur Skalierbarkeit von
DNS bei?
5. Erläutern sie die Funktionsweise von E-Mail?
6. Was ist SMTP und welche Eigenschaften hat dieses Protokoll?
7. Was versteht man unter „Store-and-Forward“?
8. Aus welchen Teilen besteht eine E-Mail? Erläutern Sie MIME!
9. Erklären Sie Quoted Printable sowie Base64!
Gero Mühl
Webbasierte Anwendungen / Grundlegende Dienste
49
Exemplarische Fragen zur Lernkontrolle
Telnet, FTP, SSH
1.
2.
3.
4.
Was ist Telnet?
Was ist FTP?
Warum sind Telnet und FTP nicht sicher?
Wie viele Verbindungen werden bei einem FTP-Transfer
aufgebaut und wozu dienen diese?
5. Was ist SSH und welche Funktionalität umfasst
die SSH-Suite?
6. Erläutern Sie die Anwendungsfälle von SSH-Tunneln!
7. Worin besteht der Unterschied zwischen
Local Port Forwarding und Remote Port Forwarding?
Gero Mühl
Webbasierte Anwendungen / Grundlegende Dienste
50
Vielen Dank für Ihre Aufmerksamkeit!
Univ.-Prof. Dr.-Ing. habil. Gero Mühl
[email protected]
http://wwwava.informatik.uni-rostock.de
Gero Mühl
Webbasierte Anwendungen / Grundlegende Dienste
51
Webbasierte Anwendungen
World Wide Web
Prof. Dr.-Ing. habil. Gero Mühl
Architektur von Anwendungssystemen (AVA)
Fakultät für Informatik und Elektrotechnik (IEF)
Universität Rostock
Überblick
> Architektur des World Wide Web (WWW)
> Hypertext Transfer Protocol (HTTP)
> Hypertext Markup Language (HTML)
> Cascading Style Sheets (CSS)
Gero Mühl
Webbasierte Anwendungen / World Wide Web
2
Architektur des WWW
Gero Mühl
Webbasierte Anwendungen / World Wide Web
3
World Wide Web (WWW)
> Verteiltes Hypertext/Hypermedia-System
> Dezentrale Speicherung von Dokumenten, die aus Text,
Grafik, Audio, Video, etc. bestehen
> Netzartige Verknüpfung der Dokumente mittels Hyperlinks
> Dokumente
>
>
>
>
Gero Mühl
Beschrieben durch Hypertext Markup Language (HTML)
Adressierung mittels Uniform Resource Locators (URL)
Bereitstellung durch Webserver
Übertragung zum Webclient (z.B. Webbrowser) mittels
Hypertext Transfer Protocol (HTTP)
Webbasierte Anwendungen / World Wide Web
4
Architektur
HTML
Dokument
FTP
E-Mail
News
HTTP
Telnet
WWW
Browser
Benutzer
Gero Mühl
Webclient
(HTTP-Client)
…
Webserver
(HTTP-Server)
Webbasierte Anwendungen / World Wide Web
5
Webclients
Grafische Browser
Zeilenorientierte Browser
> Direkt darstellbar sind
> Reine Textdarstellung ohne
Bilder, Audio, Video, etc.
> Bedienung über Tastatur
> Geeignet für Verbindungen mit
geringer Übertragungsrate
> Beispiele
> HTML-, ASCII-Dokumente
> Verbreitete Grafikformate wie
GIF, XPM, JPEG, PNG, etc.
> Einbindung externer Betrachter
>
>
>
>
Postscript, PDF
Audio (WAV, MP3, etc)
Video (MPEG, QuickTime, etc.)
…
> Beispiele
> Firefox
> Konqueror
> Internet Explorer
Gero Mühl
> Lynx
> Emacs
Clients ohne Darstellung
> wget
> cURL
Webbasierte Anwendungen / World Wide Web
6
Webserver
> Exemplarische Produkte
> Apache, Microsoft Internet Information Services (IIS)
> Meist über TCP-Port 80 erreichbar
> Normalerweise eine TCP-Verbindung pro HTTP-Auftrag
> Für die Übertragung von eingebetteten Bildern, Audio,
Video, etc. werden zusätzliche TCP-Verbindungen
aufgebaut
> Typische Fehlermeldungen
> 401
> 404
> 500
Gero Mühl
unauthorized // keine Zugangsberechtigung
not found
// Dokument nicht gefunden
server error // Fehler mit Fehlermeldung
Webbasierte Anwendungen / World Wide Web
7
Webserver Log-Dateien
> Server sammeln statistische Zugriffsinformationen
> Erstellung von Nutzungsprofilen möglich  Datenschutz
> Access Log
> Pro HTTP-Anfrage eine Zeile
> Auswertung durch entsprechende Tools
> Beispiel (Common Access Log Format)
> wc.yale.edu -- [16/Jun/1997:04:29:55-0100]
GET /index.html/ HTTP1.0 200 733
> Error Log
> pro Fehler eine Zeile
> Beispiel (Error Log)
> [16/Jun/1997:04:55:29-0100] [NOT AUTHORIZED]
[host: cs.yale.edu referer: http://hera.gmd.de/]
/index.html
> Andere Error Log-Formate sind möglich
Gero Mühl
Webbasierte Anwendungen / World Wide Web
8
Laden und Anzeigen einer Webseite
> Ausgangspunkt: Eingabe der URL einer Seite
im Webbrowser
1. Verbindungsaufbau zwischen Webbrowser und
Webserver
2. Browser schickt HTTP-Anfrage an den Server
3. Server liefert HTTP-Antwort mit HTML-Dokument bzw.
einem Fehlercode zurück
4. Browser interpretiert HTML-Dokument und zeigt es an
5. Schließen der Verbindung
> Beim Klicken auf einen Link (= URL) läuft der gleiche
Vorgang mit der neuen URL ab
Gero Mühl
Webbasierte Anwendungen / World Wide Web
9
WWW Proxy
GET …
HTTP/1.1 …
HTTP Client
Cache
Proxy
HTTP Server
> Wird zwischen Webbrowser (Client) und Server geschaltet
> Einstellung in Browser-Konfiguration
> Leicht geändertes Format im Request
(komplette URL mit Hostname wird gesendet)
> Proxy (englisch für Bevollmächtigter, Stellvertreter) kann
Seiten cachen, filtern, protokollieren
> Schnellerer Zugriff, mehr Sicherheit, Schutz vor ungewünschten
Inhalten, Ermöglichen einer Strafverfolgung, ...
Gero Mühl
Webbasierte Anwendungen / World Wide Web
10
Universal Resource Locator (URL)
> Fragen beim Zugriff auf WWW Seiten
>
>
>
>
Wie kann auf die Seite zugegriffen werden?
Wo liegt die Seite?
Wie lautet der lokale Name der Seite beim Server?
Wie können weitere Parameter übergeben werden?
> URL [RFC 1738] besteht aus Protokoll, Host und Datei
> Beispiel für Protokolle: http, ftp, file, news, telnet, mailto
> Parameter können als Query am Ende übergeben werden
> Beispiel
http://kbs.cs.tu-berlin.de/cgi-bin/anmeldung.cgi?LV=WBA
Protocol Host Name [ :Port ] [Path (and File Name)]
Gero Mühl
[Query]
Webbasierte Anwendungen / World Wide Web
11
URL-Encoding
> In einem Query-String werden Sonderzeichen und
Non-ASCII-Zeichen URL-kodiert
> Beispiel
„10% von 25$ = 2,50$“ wird zu
„10%25+von+25%24+%3D+2%2C50%24“
> Siehe auch
> http://www.blooberry.com/indexdot/html/topics/
urlencoding.htm
Gero Mühl
Webbasierte Anwendungen / World Wide Web
12
URL Beispiele
> http://wwwava.informatik.uni-rostock.de
> http://www.mit.edu:8001/people/dshapiro/macsites.html
> http://www.google.de/search?q=ava+uni+rostock
> file://WWW/beispiel.html
> ftp://ftp.cs.mit.edu/README
> telnet://[email protected]/
> mailto:[email protected]
Gero Mühl
Webbasierte Anwendungen / World Wide Web
13
Literatur
1. RFC 1738 Uniform Resource Locators (URL)
> http://www.ietf.org/rfc/rfc1738.txt
2. RFC 3986 Uniform Resource Identifier (URI):
Generic Syntax
> http://www.ietf.org/rfc/rfc3986.txt
3. Online-Tool zur URL-Kodierung/Dekodierung
> http://netzreport.googlepages.com/online_tool_zur_url_ko
dierung_de.html
Gero Mühl
Webbasierte Anwendungen / World Wide Web
14
Fragen?
Gero Mühl
Webbasierte Anwendungen / World Wide Web
15
Hypertext Transfer Protocol (HTTP)
Gero Mühl
Webbasierte Anwendungen / World Wide Web
16
Hypertext Transfer Protocol (HTTP)
> Textbasiertes Protokoll (Encoding: US-ASCII) zum
Transfer von Dateien (hauptsächlich) vom
Webserver zum Webclient
> Spezifiziert in RFC 1945 (HTTP 1.0) und
RFC 2616 (HTTP 1.1)
> Ist trotz seines Namens nicht auf den Transport von
HTML-Dokumenten beschränkt
> Setzt meist auf TCP auf, Standard lässt auch anderes zu
> Benutzt Elemente von MIME
 Deklaration des Medientyps
Gero Mühl
Webbasierte Anwendungen / World Wide Web
17
Hypertext Transfer Protocol (HTTP)
> Folgt Request/Response-Interaktion
> Zugriff stets vom Client initiiert  HTTP-Request
> Server antwortet mit HTTP-Response
> HTTP ist zustandslos
> Aufeinanderfolgende HTTP-Zugriffe sind voneinander
unabhängig
> HTTP-Server merkt sich über eine HTTP-Interaktion
hinaus keine Daten für einen Client
> Wichtige Einschränkung für komplexere Anwendungen
> Zustand muss daher oberhalb von HTTP realisiert werden
Gero Mühl
Webbasierte Anwendungen / World Wide Web
18
HTTP-Request
> Request-Zeile
<Method> <Ressource> <HTTP-Version><CR><LF>
> Methode: Request-Anweisung (GET, HEAD, POST, ...)
> Beispiel: GET /index.html?lang=en HTTP/1.0
> Header (optional)
> Beliebig viele Zeilen bestehend aus Name/Wert-Paaren
> Leerzeile signalisiert Ende des Headers
> Jedes Zeilenende wird mit <CR><LF> kodiert
(Java-String: "\r\n")
> Body
> Inhalt (z.B. für POST-Methode)
Gero Mühl
Webbasierte Anwendungen / World Wide Web
19
HTTP-Methoden (HTTP 1.0)
> GET
> Holt Ressource vom Server
> HEAD
> Ähnlich wie GET, liefert aber nur den HTTP-Header
> Wird für Caching von Seiten im Client und in Proxies
verwendet
> POST
> Sendet Daten an den Server, z.B. Daten aus
HTML-Formularen
Gero Mühl
Webbasierte Anwendungen / World Wide Web
20
Beispiel HTTP-Request
GET /index.html HTTP/1.1\r\n
Host: localhost:8080\r\n
User-Agent: Mozilla/5.0 (X11; U; Linux i686; de; rv:1.8.1.11)
Gecko/20071127 Firefox/2.0.0.11\r\n
MIME-Type
Accept: text/xml,application/xml,application/xhtml+xml,
text/html;q=0.9,text/plain;q=0.8,image/png,*/*;q=0.5\r\n
Accept-Language: de-de,de;q=0.8,en-us;q=0.5,en;q=0.3\r\n
Accept-Encoding: gzip,deflate\r\n
Accept-Charset: ISO-8859-1,utf-8;q=0.7,*;q=0.7\r\n
Keep-Alive: 300\r\n
Charset
Connection: keep-alive\r\n
Pragma: no-cache\r\n
Cache-Control: no-cache\r\n
Gero Mühl
Webbasierte Anwendungen / World Wide Web
21
HTTP-Response
> Statuszeile
<HTTP-Version> <Code> <Phrase><CR><LF>
> Beispiel: HTTP/1.0 200 OK
> Header (optional)
> Name/Wert-Paare wie bei Request
> Diverse vordefinierte Felder werden üblicherweise mitgeschickt
> Content-Type:
Art des Inhalts
> Content-Length: Größe des Body
> …
> Body
> Die eigentliche Ressource z.B. HTML-Datei, Bild, Audio, Video, …
> Body besteht aus Bytes  Interpretation abhängig von Typ und
Kodierung des Inhalts
Gero Mühl
Webbasierte Anwendungen / World Wide Web
22
HTTP-Status-Codes
> Informational 1xx
100 Continue
101 Switching Protocols
> Success 2xx
200 OK
201 Created
202 Accepted
204 No Content
> Redirection 3xx
> Client Error 4xx
400 Bad Request
401 Unauthorized
403 Forbidden
404 Not Found
> Server Error 5xx
500 Internal Server Error
501 Not Implemented
502 Bad Gateway
503 Service Unavailable
300 Multiple Choices
301 Moved Permanently
302 Moved Temporarily
304 Not Modified
Gero Mühl
Webbasierte Anwendungen / World Wide Web
23
Beispiel HTTP-Response
HTTP/1.1 200 OK\r\n
Server: Apache-Coyote/1.1\r\n
ETag: W/"8144-1201556374000"\r\n
Last-Modified: Mon, 28 Jan 2008 21:39:34 GMT\r\n
Content-Type: text/html\r\n
MIME-Type
Content-Length: 8144\r\n
Date: Sat, 03 May 2008 13:02:20 GMT\r\n
Charset im Body
\r\n
<?xml version="1.0" encoding="ISO-8859-1"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
…
</html>
Gero Mühl
Webbasierte Anwendungen / World Wide Web
24
HTTP 1.1 (Aktueller Stand)
> Definiert neue Methoden
> TRACE, PUT, DELETE, CONNECT, OPTIONS
> Definiert neue Header-Felder
> Keep-Alive, Connection, ETag, …
> In Beispiel-Request und -Response bereits gesehen
> Verbindungsmanagement
> „Offenhalten“ von Verbindungen  Keep-Alive
> Kürzere Antwortzeiten, verringerter Ressourcenverbrauch
> Verbessertes Caching
> Eindeutige IDs der Dokumentversion  ETag
Gero Mühl
Webbasierte Anwendungen / World Wide Web
25
URLs in Java
> Klasse java.net.URL
> Repräsentiert einen URL  Zeiger auf Ressource im WWW
> String-Repräsentation eines URL für HTTP
"http:" "//" host [":" port] [abs_path ["?" query]]
> Erzeugen eines URL-Objektes
> Diverse Konstruktoren (meist basierend auf Strings)
> Absolute URLs
URL kbs1 = new URL("http://www.kbs.tu-berlin.de/index.html");
URL kbs2 = new URL("http","www.kbs.tu-berlin.de","index.html");
URL kbs3 = new URL("http","www.kbs.tu-berlin.de",
80,"index.html");
> Relative URLs
URL domainUrl
= new URL("http://www.kbs.tu-berlin.de");
URL indexUrl
= new URL(domainUrl, "index.html");
URL teachingUrl = new URL(domainUrl, "teaching.html#ipa");
Gero Mühl
Webbasierte Anwendungen / World Wide Web
26
Informationen über URLs
> Attribute eines URL-Objekts
> Nur lesender Zugriff via Getter-Methoden
> Entsprechen den Bestandteilen der URL
 Protokoll, Host, Port, File, Query, Anker
> Beispiel URL
String spec = "http://www.kbs.tuberlin.de:80/index.html?lang=en#info");
URL url = new URL(spec);
System.out.println(url.getProtocol());
System.out.println(url.getHost());
System.out.println(url.getPort());
System.out.println(url.getFile());
System.out.println(url.getPath());
System.out.println(url.getQuery());
System.out.println(url.getRef());
Gero Mühl
//
//
//
//
//
//
//
http
www.kbs.tu-berlin.de
80
/index.html?lang=en
/index.html
lang=en
info
Webbasierte Anwendungen / World Wide Web
27
Direktes Lesen von einer URL
URL yahoo = new URL("http://www.yahoo.com");
BufferedReader in =
new BufferedReader(
new InputStreamReader(
yahoo.openStream()));
String inputLine;
while ((inputLine = in.readLine()) != null)
System.out.println(inputLine);
in.close();
Gero Mühl
Webbasierte Anwendungen / World Wide Web
28
URLConnection
> Klasse java.net.URLConnection
> Repräsentiert eine Verbindung zu einer URL
> Erzeugung
> Methode openConnection der Klasse URL
URL url = new URL("http://www.kbs.tuberlin.de/index.html");
URLConnection con = url.openConnection();
> Verbindungsablauf
> Objekt-Erzeugung etabliert noch keine Verbindung
 Möglichkeit zum Setzen von Request-Eigenschaften (z.B. Header)
> Expliziter Verbindungsaufbau mittels connect()
> Impliziter Verbindungsaufbau bei Zugriff auf Ressource
> Kommunikation mittels Ein-/Ausgabeströmen sowie
Abfrage von Header-Informationen
> Schließen der Verbindung  Schließen der Ein-/Ausgabeströme
Gero Mühl
Webbasierte Anwendungen / World Wide Web
29
Empfang von Daten
> Lesen der Header-Felder nach Verbindungsaufbau
> Universelle Methode für alle Felder
public String getHeaderField(String fieldName)
> Spezifische Methoden für gebräuchliche Felder wie
public String getContentType()
public int getContentLength()
public String getContentEncoding()
> Eingabestrom zum Lesen des Inhalts
> public InputStream getInputStream()
> Content-Handler
> public Object getContent()
> erzeugt ein Objekt anhand des Content-Typs (MIME-Typ)
(z.B. java.awt.ImageProducer bei GIF oder JPEG)
Gero Mühl
Webbasierte Anwendungen / World Wide Web
30
Senden von Daten
> Setzen von Header-Feldern vor Verbindungsaufbau
> public void setRequestProperty
(String fieldName, String value)
> Belegt das Header-Feld fieldName mit dem Wert value
> Senden der Daten vorbereiten
> public void setDoOutput(boolean dooutput)
> Ausgabestrom zum Senden von Daten
> public OutputStream getOutputStream()
> Liefert Ausgabestrom zur Datenübertragung zum Server
Gero Mühl
Webbasierte Anwendungen / World Wide Web
31
Beispiel URLConnection
String stringToReverse = URLEncoder.encode(args[1], "UTF-8");
URL url = new URL(args[0]); // "http://<reverse servlet>"
URLConnection connection = url.openConnection();
connection.setDoOutput(true);
OutputStreamWriter out =
new OutputStreamWriter(connection.getOutputStream());
out.write("string=" + stringToReverse);
out.close();
BufferedReader in = new BufferedReader(
new InputStreamReader(connection.getInputStream()));
String decodedString;
while ((decodedString = in.readLine()) != null) {
System.out.println(decodedString);
}
in.close();
Gero Mühl
Webbasierte Anwendungen / World Wide Web
32
HttpURLConnection
> Klasse java.net.HttpURLConnection
> Repräsentiert eine HTTP-Verbindung zu einer URL
> HttpURLConnection erweitert die Klasse URLConnection
> public void setRequestMethod(String method)
> Methoden GET, POST, HEAD, PUT, OPTIONS, DELETE
und TRACE
> URLConnection erlaubt hingegen nur Methoden GET und POST
> Abfragen des Status-Codes der Antworten des Servers
> public int getResponseCode() liefert Zahlencode
> public String getResponseMessage() liefert Statustext
> Erzeugung (durch Casting einer URLConnection)
URL url; HttpURLConnection http;
url = new URL("http://www.tu-berlin.de");
http = (HttpURLConnection)(url.openConnection());
Gero Mühl
Webbasierte Anwendungen / World Wide Web
33
Beispiel HttpURLConnection
URL url = new URL("http://server/uri");
HttpURLConnection conn =
(HttpURLConnection)url.openConnection();
conn.setRequestMethod("POST");
conn.setAllowUserInteraction(false);
conn.setDoOutput(true);
conn.setRequestProperty("Content-type","text/xml" );
conn.setRequestProperty("Content-length",
Integer.toString(body.length()));
OutputStreamWriter out =
new(OutputStreamWriter(conn.getOutputStream());
out.print(body);
out.flush();
out.close();
Gero Mühl
Webbasierte Anwendungen / World Wide Web
34
Literatur
1. RFC 1945 Hypertext Transfer Protocol – HTTP/1.0
> http://www.ietf.org/rfc/rfc1945.txt
2. RFC 2616 Hypertext Transfer Protocol – HTTP/1.1
> http://www.ietf.org/rfc/rfc2616.txt
3. The Manual Page - The HTTP protocol
> http://www2.themanualpage.org/http/
Gero Mühl
Webbasierte Anwendungen / World Wide Web
35
Fragen?
Gero Mühl
Webbasierte Anwendungen / World Wide Web
36
HTTPS
Gero Mühl
Webbasierte Anwendungen / World Wide Web
37
HTTPS
> HTTP Secure (HTTPS)
HTTP
> = HTTP + SSL/TLS
> = HTTP + Authentifizierung + Verschlüsselung
SSL/TLS
TCP
> Transport Layer Security (TLS) [RFC 2246, 4346, 5246]
> Standardisierte Weiterentwicklung vom
Secure Sockets Layer (SSL) von Netscape
IP
Ethernet
> Authentifizierung
> Basierend auf ITU X.509 Zertifikate für Public Key-Infrastrukturen
> Authentisierung des Webservers (Webserver-Zertifikat)
> Authentisierung des Clients ebenfalls möglich (Client-Zertifikat)
> Verschlüsselung
> Symmetrische Verschlüsselung oberhalb der Transportschicht
> Verfahren u. a. RC2, RC4, DES, 3-DES, IDEA, AES
Gero Mühl
Webbasierte Anwendungen / World Wide Web
38
HTTPS Verbindungsaufbau
Zertifikat
der CA
1
Prüfung der Signatur des Webserver-Zertifikats
3
https://www.example.com
2
Übertragung des
Privater
Schlüssel
des Webservers
Webserver-Zertifikats
Öffentlicher Schlüssel des Webservers
4
Erzeugung
des Sitzungsschlüssels
Webbrowser
des Clients
Gero Mühl
WebserverZertifikat
Übertragung des verschlüsselten Sitzungsschlüssels
Verschlüsselter Datenaustausch mit
ausgehandeltem Sitzungsschlüssel
6
5
Sitzungsschlüssel
Webserver von
www.example.com
Webbasierte Anwendungen / World Wide Web
39
HTTPS Verbindungsaufbau
1. Verbindungsaufbau zu www.example.com auf Port 443
2. Übertragung des Webserver-Zertifikats zum Browser
3. Prüfung der Signatur des Zertifikats anhand des von der CA
hinterlegten öffentlichen Schlüssels (aus CA-Zertifikat)
> Bei Erfolg ist Identität des Webservers festgestellt
4. Übertragung des verschlüsselten Sitzungsschlüssels
> Erzeugung eines temporären Sitzungsschlüssels zur
symmetrischen Verschlüsselung der Verbindung
> Verschlüsselung des Sitzungsschlüssels mit dem öffentlichen
Schlüssel des Webservers (aus Webserver-Zertifikat)
5. Entschlüsselung des Sitzungsschlüssels mit privatem
Schlüssel des Webservers
6. Verschlüsselter Datenaustausch mit ausgehandeltem
Sitzungsschlüssel
Gero Mühl
Webbasierte Anwendungen / World Wide Web
40
Java Secure Socket Extension (JSSE)
> Java API zu Sicherheitsprotokollen, -algorithmen und -tools
> Unterstützung von SSL/TLS
> Seit Java 1.4 im Standard enthalten
> Secure Sockets und Secure Server Sockets
> Socket Factories
> Gekapselte Erzeugung und Konfiguration von Sockets
> Secure Socket Context
> Konfiguration der Socket Factories
> Key Manager und Trust Manager
> Verwaltung und Prüfung der Schlüssel und Zertifikate
> Sichere HTTP-Verbindung mittels HttpsURLConnection
Gero Mühl
Webbasierte Anwendungen / World Wide Web
41
SocketFactory & ServerSocketFactory
> Klassen javax.net.ssl.SSLSocketFactory und
javax.net.ssl.SSLServerSocketFactory
> Factories zur Erzeugung sicherer Sockets
> Konfigurationsmöglichkeiten wie Schlüssel, Zertifikate,
Kryptoalgorithmen, …
> Default Factories über statische Methoden erreichbar
> SSLSocketFactory.getDefault()
> SSLServerSocketFactory.getDefault()
> Standardkonfiguration enthält keine Client-Authentifikation
Gero Mühl
Webbasierte Anwendungen / World Wide Web
42
SSLSocket und SSLServerSocket
> Klassen javax.net.ssl.SSLSocket und
javax.net.ssl.SSLServerSocket
> Repräsentieren sichere Verbindungsendpunkte
> Funktionalität analog zu normalen Sockets
> Erzeugung mittels Socket Factories
> createSocket(String host, int port)
> createServerSocket(int port)
> Schlüsselpaar muss vom Aufrufenden angelegt
und mitgegeben werden
Gero Mühl
Webbasierte Anwendungen / World Wide Web
43
Beispiel SSLSockets
...
int port = 443;
Default Socket
Factory holen
SSLServerSocketFactory sslFactory =
(SSLServerSocketFactory) SSLServerSocketFactory.getDefault();
ServerSocket sslServerSocket =
sslFactory.createServerSocket(port);
Socket client = sslServerSocket.accept();
Sicherer Server- bzw.
Client-Socket
InputStream in = client.getInputStream();
OutputStream out = client.getOutputStream();
...
Gero Mühl
Webbasierte Anwendungen / World Wide Web
44
Beispiel SSLSockets
> Schlüsselpaar für Server erzeugen
> keytool -genkey –alias=mykey
-dname "cn=Gero Muehl, ou=AVA, o=UHRO, c=DE"
-keystore ServerKeystore
-storepass 123456 -keypass 123456 -validity 180
> Serverzertifikat aus Keystore exportieren
> keytool -export -alias mykey -keystore
ServerKeystore -rfc -file mykey.cer
> Serverzertifikat in neuen Keystore importieren
> keytool -import -alias mycert -file mykey.cer
-keystore ClientTruststore -storepass abcdef
Gero Mühl
Webbasierte Anwendungen / World Wide Web
45
Beispiel SSLSockets
> keytool -list -v -keystore ClientTruststore –storepass abcdef
Keystore-Typ: JKS
Keystore-Provider: SUN
Ihr Keystore enthält 1 Eintrag/-äge.
Aliasname: mycert
Erstellungsdatum: 24.11.2009
Eintragstyp: trustedCertEntry
Eigner: CN=Gero Muehl, OU=AVA, O=UHRO, C=DE
Aussteller: CN=Gero Muehl, OU=AVA, O=UHRO, C=DE
Seriennummer: 4b0c0e0a
Gültig von: Tue Nov 24 17:47:06 CET 2009 bis: Sun May 23 18:47:06 CEST 2010
Digitaler Fingerabdruck des Zertifikats:
MD5: 20:21:85:69:B0:12:CA:53:DF:80:2A:52:D2:62:82:12
SHA1: E8:63:E1:99:46:AC:B2:26:7C:4D:7C:86:52:4E:56:EE:00:6F:C0:B0
Unterschrift-Algorithmusname: SHA1withDSA
Version: 1
*******************************************
*******************************************
Gero Mühl
Webbasierte Anwendungen / World Wide Web
46
Beispiel SSLSockets
> Server starten
> java -Djavax.net.ssl.keyStore=ServerKeystore
-Djavax.net.ssl.keyStorePassword=123456
EchoServerSSL
> Client starten
> java
-Djavax.net.ssl.trustStore=ClientTruststore
-Djavax.net.ssl.trustStorePassword=abcdef
EchoClientSSL
Gero Mühl
Webbasierte Anwendungen / World Wide Web
47
Literatur
1. RFC 2246 The Transport Layer Security (TLS) Protocol Version 1.0
>
http://www.ietf.org/rfc/rfc2246.txt
2. RFC 4346 The Transport Layer Security (TLS) Protocol Version 1.1
>
http://www.ietf.org/rfc/rfc4346.txt
3. RFC 5246 The Transport Layer Security (TLS) Protocol Version 1.2
>
http://www.ietf.org/rfc/rfc5246.txt
4. Java Secure Socket Extension (JSSE) Reference Guide for Java
Platform Standard Edition 6
>
Gero Mühl
http://java.sun.com/javase/6/docs/technotes/guides/security/jsse/JSSE
RefGuide.html
Webbasierte Anwendungen / World Wide Web
48
Fragen?
Gero Mühl
Webbasierte Anwendungen / World Wide Web
49
HTTP Session Management
Gero Mühl
Webbasierte Anwendungen / World Wide Web
50
Zustandsbehaftete Anwendungen
> HTTP ist ein zustandsloses Protokoll!
> Einfache Request/Reply-Interaktion
> Über eine einzelne Interaktion hinaus werden keine
Zustandsinformationen gehalten
> Viele Webanwendungen benötigen Zustandsinformationen
> Workflows (z.B. Bestellvorgang) über mehrere Klicks hinweg
 Erkennung u. Verwaltung zusammengehöriger HTTP-Requests
> Warenkörbe jeglicher Art
> Wiedererkennung von Benutzern/Kunden beim nächsten Besuch
der Webseite
> Verhaltensanalyse von Webseitenbesuchern
 Marketing/Werbung
Gero Mühl
Webbasierte Anwendungen / World Wide Web
51
Sitzungen (engl. Sessions)
> Folge von Kommunikationsvorgängen, die sich auf einen
gemeinsamen Zustand beziehen
> Beispiel Webshop
> Führen eines virtuellen Einkaufswagens
> Ausgewählte Produkte werden stets in den
Einkaufswagen desselben Benutzers abgelegt
> Anmelden als registrierter Benutzer
> Bestellen der Produkte in mehreren Schritten
Wie kann dies mit HTTP umgesetzt werden?
Gero Mühl
Webbasierte Anwendungen / World Wide Web
52
Realisierungsmöglichkeiten von Sitzungen
1. Versteckte Felder eines HTML-Formulars
> Server schreibt Daten in versteckte Formularfelder der
generierten dynamischen HTML-Seite
> Auswertung, wenn Formulardaten zurückgesendet werden
2. Zustand in der URI
> Ähnlich zu versteckten Feldern
> Server kodiert Daten im Query- o. Pfad-Teil der Links einer Seite
> Auswertung durch Server beim Aufruf eines Links
3. HTTP-Cookies
> Setzen und Weitergabe von Daten im HTTP-Header als Teil der
HTTP-Response bzw. des HTTP-Requests
Gero Mühl
Webbasierte Anwendungen / World Wide Web
53
Versteckte Formularfelder
> HTML-Formularen werden unsichtbare Informationen
hinzugefügt, die beim Absenden mit übertragen werden
> Server fügt bei Generierung der Seite ein
verstecktes Formularfeld mit einer ID ein
<input type="hidden" name="SessionID" value="<id>">
> Auslesen der Session-ID aus Formulardaten bei
jeder Anfrage
> Session-Management erfolgt hier auf HTML-Ebene
> Einfache Realisierung
> Benutzer bewegt sich von Formular zu Formular
Gero Mühl
Webbasierte Anwendungen / World Wide Web
54
URI Rewriting
> Zustand/Status wird in der URI abgelegt
> Server fügt beim Generieren der Seite in jede URI,
die in die Session verwickelt ist, eine ID ein
> ID im Query-Teil der URI
http://www.abc.example/servlets/MyServlet?session=ID
> ID im File Path der URI
http://www.abc.example/servlets/MyServlet/ID
> Auswertung des Query Strings bzw. des Pfades bei Anfrage
> Universelle Möglichkeit für Sessions
> URI Rewriting funktioniert mit jedem Browser
> Benutzer kann URI mit Session speichern oder weitergeben
> Gültigkeit der URI meist zeitlich begrenzt
> Möglichkeit des Missbrauchs
Gero Mühl
Webbasierte Anwendungen / World Wide Web
55
Cookies [RFC 2965]
“Cookies are a general mechanism which server side connections
(such as CGI scripts) can use to both store and retrieve information
on the client side of the connection. The addition of a simple,
persistent, client-side state significantly extends the capabilities of
Web-based client/server applications.”
Auszug aus http://wp.netscape.com/newsref/std/cookie_spec.html
> Text der beim Client unter gewähltem Namen abgelegt wird
> Übertragung erfolgt im HTTP-Header
> Browserunterstützung (sofern Cookies akzeptiert werden)
> Textgröße bis 4 KB
> mind. 20 Cookies pro Domäne
> mind. 300 Cookies insgesamt
Gero Mühl
Webbasierte Anwendungen / World Wide Web
56
Aufbau eines Cookies
> Name und Wert
> Inhalt in Form eines Name = Wert-Paares
> Max-Age / Expires
> Verfallsdatum
> Domain, Path und Port
> Einschränkung der URIs an die das Cookie gesendet wird
> Comment und CommentURL
> Für Menschen lesbare Informationen zum Zweck des Cookies
> Optionen Discard und Secure
> Discard: Löschen beim Schließen des Browsers
> Secure: Nur über sichere HTTPS-Verbindungen senden
> Version
> Version 1 ist die ursprüngliche von Netscape  set-cookie
> Version 2 die aktuelle  set-cookie2
Gero Mühl
Webbasierte Anwendungen / World Wide Web
57
Arbeiten mit Cookies
> Setzen von Cookies
> Webserver sendet Set-Cookie im Header der HTTP-Response
Set-Cookie: Session=123; domain=abc.example; path=/
Set-Cookie2: User=XYZ; path=/servlets; secure
> HTTP-Response kann mehrere Set-Cookie-Header enthalten
> Lesen von Cookies
> Browser vergleicht Request-URI mit gespeicherten Cookies
> Sendet alle für Domäne und Pfad passende Cookies
im Cookie Header des HTTP(S)-Requests
Cookie: Session=123; User=XYZ
> Testen und Löschen
> Testen des Browsers durch Setzen und anschließendes Lesen
> Löschen erfolgt durch Setzen eines abgelaufenen Cookies
Gero Mühl
Webbasierte Anwendungen / World Wide Web
58
Cookies und Datenschutz
“Unfortunately, the original intent of the cookie has been subverted by
some unscrupulous entities who have found a way to use this process
to actually track your movements across the Web. They do this by
surreptitiously planting their cookies and then retrieving them in such a
way that allows them to build detailed profiles of your interests,
spending habits, and lifestyle. […] It is rather scary to contemplate how
such an intimate knowledge of our personal preferences and private
activities might eventually be used to brand each of us as members of
a particular group.”
Auszug aus http://www.cookiecentral.com/cookie5.htm
> Werbevermarktung
> Wie kommen Cookies (z.B. von doubleclick.net) in den
Browser ohne deren Webseite zu besuchen?
> Welche Informationen speichern sie und wofür?
Gero Mühl
Webbasierte Anwendungen / World Wide Web
59
Cookies mit Java (Clientseite)
// Receive cookie with session ID in server response
URL url = new URL(
"http://www.a.com/login.cgi?uid=gmuehl&pwd=4711");
HttpURLConnection conn =
(HttpURLConnection)url.openConnection();
Object obj = conn.getContent();
String cookie = conn.getHeaderField("Set-Cookie");
String sessionId =
cookie.substring(0, cookie.indexOf(";"));
...
// Send cookie with session ID to server in new request
URL url = new URL("http://www.a.com/secret.html");
HttpURLConnection conn =
(HttpURLConnection) url.openConnection();
conn.setRequestProperty("Cookie", sessionId);
obj = conn.getContent();
Gero Mühl
Webbasierte Anwendungen / World Wide Web
60
Cookies mit Java (Clientseite)
String urlString = "http://www.sun.com";
CookieManager manager = new CookieManager();
manager.setCookiePolicy(CookiePolicy.ACCEPT_ALL);
CookieHandler.setDefault(manager);
URL url = new URL(urlString);
HttpURLConnection connection =
(HttpURLConnection)url.openConnection();
Object obj = connection.getContent();
connection.disconnect();
CookieStore cookieJar = manager.getCookieStore();
List<HttpCookie> cookies = cookieJar.getCookies();
for (HttpCookie cookie: cookies) {
System.out.println(cookie);
};
url = new URL(urlString);
connection = (HttpURLConnection)url.openConnection();
obj = connection.getContent();
connection.disconnect();
Gero Mühl
Webbasierte Anwendungen / World Wide Web
61
Literatur
1. RFC 2965 - HTTP State Management Mechanism,
http://www.ietf.org/rfc/rfc2965.txt
2. The Java Tutorials, Trail: Custom Networking, Working with
Cookies, http://java.sun.com/docs/books/tutorial/networking/cookies
Gero Mühl
Webbasierte Anwendungen / World Wide Web
62
Fragen?
Gero Mühl
Webbasierte Anwendungen / World Wide Web
63
Hypertext Markup Language (HTML)
Gero Mühl
Webbasierte Anwendungen / World Wide Web
64
Hypertext Markup Language (HTML)
> Textbasierte Auszeichnungssprache zur Beschreibung von
Dokumenten
> Beschreibt logische Struktur eines Dokuments
> Markierungen (Tags) zur Bezeichnung von Dokumentteilen
> Beispiel: <p>Ein Paragraph</p>
> Vordefinierte, nicht erweiterbare Menge an Tags
 logische Struktur nur bedingt abbildbar
> Beschreibt Layout eines Dokuments
> Unpräzise Formatierungstags  konkretes Layout bestimmt Client
> Beispiel: <b>Fettgedruckter Text</b>
> Genauere Layout-Definitionen mittels Cascading Stylesheet (CSS)
> Vernetzung von Dokumenten
> Verweise auf Seiten/Dokumente/Objekte  Link
> Einbinden von (Multimedia-) Objekten (Grafik, Animation, Audio,…)
> Basiert auf Standard Generalized Markup Language (SGML)
> ISO Standard 8879 mit flexibel erweiterbarer Tag-Menge
Gero Mühl
Webbasierte Anwendungen / World Wide Web
65
HTML Standards
> HTML 4.01 [http://www.w3.org/TR/html401/]
> 3 Document Type Definitions (DTDs)
> Strict:
Keine veralteten (deprecated) Elemente
> Transitional: Veraltete Elemente, jedoch keine Rahmen
(Frames)
> Frameset:
Veraltete Elemente und Rahmen
> Empfohlene Version 4.01 / Arbeitsversion 5.0
> XHTML 1.0 [http://www.w3.org/TR/xhtml1/]
> Basiert auf XML
> Empfohlene Version 1.0 / modulare Arbeitsversion 1.1
> Entwicklung von XHTML 2.0 wurde Ende 2009 zugunsten von
HTML 5.0 eingestellt
> Validation (Prüfung der Konformität zum Standard)
> W3C-Online-Validator [http://validator.w3.org]
Gero Mühl
Webbasierte Anwendungen / World Wide Web
66
HTML-Tags
> Im Allgemeinen paarweise (öffnend und schließend)
<tag> … </tag>
> Keine Unterscheidung von Groß- und Kleinschreibung
<TitlE> … <tITle>
> Beliebige Verschachtelung, aber keine teilweise Überlappung
<h1>Ein <b>ungueltiges HTML-Konstrukt.</h1></b>
> Manche Tags können/müssen zusätzliche Attribute enthalten
<a href="http://www.tu-berlin.de">
> Browser-Hersteller versuch(t)en eigene Tags „durchzusetzen“
 Kompatibilitätsprobleme
Gero Mühl
Webbasierte Anwendungen / World Wide Web
67
Beispiele (HTML-Tags)
<html> …… </html>
<head> …… </head>
<title> …… </title>
<body> …… </body>
<hn> …… </hn>
<b> …… </b>
<ul> …… </ul>
<ol> …… </ol>
<li> …… </li>
<br>
<a href="url"> …… </a>
<img src="url">
<pre> …… </pre>
Gero Mühl
Start einer HTML-Seite
Kopf der Seite
Titel der Seite
Rumpf der Seite
Überschrift der Stufe n
Text fett drucken
Ungeordnete Liste
Geordnete Liste
Listenelement
Neue Zeile
Hyperlink auf andere Seite
Laden eines Bildes
Vorformatierter Text
Webbasierte Anwendungen / World Wide Web
68
HTML Grundstruktur
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01
Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta name="author" content="user@kbs">
<title>Titel der Seite</title>
</head>
<body>
<h1>Überschrift</h1>
Eigentlicher Text
</body>
</html>
Gero Mühl
Webbasierte Anwendungen / World Wide Web
69
Elemente zur Textstrukturierung
> Überschriften
<h1>Titel</h1>
<h2>Abschnitt 1</h2>
> Hervorhebung
<b>fett</b>, <i>kursiv</i>, ...
<em>emphatisch</em>
<code>private int getX()</code>
> Trennlinie:
<hr>
> Zeilenumbruch: <br>
> Kommentar:
<!-- Beschreibung -->
Gero Mühl
Webbasierte Anwendungen / World Wide Web
70
Tabellen
> Aufteilung in Zeilen und Spalten
<table>
<tr>
<td>Eins</td>
<td>Zwei</td>
<td>Drei</td>
</tr>
<tr>
<td>One</td>
<td>Two</td>
<td>Three</td>
</tr>
</table>
Gero Mühl
Eins
Zwei
Drei
One
Two
Three
Webbasierte Anwendungen / World Wide Web
71
Listen
> Aufzählung
<ul>
<li>HTML</li>
<li>XHTML</li>
<li>XML</li>
</ul>
> Nummerierung
<ol>
<li>Erstens</li>
<li>Zweitens</li>
</ol>
Gero Mühl
• HTML
• XHTML
• XML
1. Erstens
2. Zweitens
Webbasierte Anwendungen / World Wide Web
72
Bilder und Verweise (Links)
> Bilder
<img src="dilbert.png" alt="Dilbert Cartoon">
> Verweise
<a href="http://www.google.com">Google</a>
<a href="#anhang">Anhang</a> ...
<a name="anhang">Anhang</a>
<a href="mailto:[email protected]">E-Mail</a>
www.dilbert.com
Gero Mühl
Webbasierte Anwendungen / World Wide Web
73
Formulare I
> Dynamische Interaktion des Nutzers mit einem
Webserver
> Programm auf dem Webserver verarbeitet Eingaben
> Formulareingaben per HTTP-GET senden
<form action="cgi-bin/forum.pl" method="get"
accept-charset="ISO-8859-1">
Zeichenkodierung
...
der Formulardaten
</form>
> Formulareingaben per POST versenden
<form action="mailto:[email protected]"
method="post" enctype="text/plain">
...
Formulardaten
</form>
als E-Mail verschicken
Gero Mühl
Webbasierte Anwendungen / World Wide Web
74
Formulare II
> Einzeilige Eingabefelder
<input name="vorname" type="text" size="30"
maxlength="30">
> Mehrzeilige Eingabebereiche
<textarea name="eingabe" cols="50" rows="10">
</textarea>
> Mit Vorbelegung
<input name="vorname" type="text" value="Bill">
<textarea name="eingabe">Vor langer, langer
Zeit...</textarea>
Gero Mühl
Webbasierte Anwendungen / World Wide Web
75
Formulare III
> Auswahllisten
<select name="Tarifzone" size="3">
<option>ABC</option>
<option>AB</option>
<option>BC</option>
</select>
> Vorselektieren und Absendewert bestimmen
<option value="111">ABC</option>
<option value="110" selected>AB</option>
<option value="011">BC</option>
Gero Mühl
Webbasierte Anwendungen / World Wide Web
76
Formulare IV
> Radiobuttons
<input type="radio" name="antwort" value="1"
checked>Ja<br>
<input type="radio" name="antwort"
value="0">Nein<br>
> Checkboxes
<input type="checkbox" name="zutat"
value="tomatoes" checked>Tomaten<br>
<input type="checkbox" name="zutat"
value="paprika" checked>Paprika<br>
<input type="checkbox" name="zutat"
value="zucchini">Zucchini<br>
Gero Mühl
Webbasierte Anwendungen / World Wide Web
77
Formulare V
> Dateien hochladen
Vorgeschrieben
<form action="file.cgi" method="post"
für Dateiuploads
enctype="multipart/form-data">
<p>Wählen Sie eine Datei aus:<br>
<input name="Datei" type="file" size="50"></p>
</form>
> Versteckte Elemente
<input type="hidden" name="session_id"
value="423914556">
> Buttons zum Absenden oder Zurücksetzen
<input type="submit" value="Absenden">
<input type="reset" value="Abbrechen">
<input type="image" src="absenden.png">
Gero Mühl
Webbasierte Anwendungen / World Wide Web
78
Kodierung der Formulardaten
> Bei GET im Header des HTTP-Requests
> UTF-8
GET /cgi-bin/forum.pl?input=H%C3%BCte+und+H%C3%A4user.
HTTP/1.1
> ISO-8859-1
GET /cgi-bin/forum.pl?input=H%FCte+und+H%E4usern
HTTP/1.1
> Bei POST im Body des HTTP-Requests
POST /cgi-bin/forum.pl HTTP/1.1
Content-Type: application/x-www-form-urlencoded;
charset=ISO-8859-1
...
vorname=Gero&nachname=M%FChl
Gero Mühl
Webbasierte Anwendungen / World Wide Web
79
Kodierung der Formulardaten
POST /cgi-bin/forum.pl HTTP/1.1
Accept: text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8
Accept-Charset: ISO-8859-1,utf-8;q=0.7,*;q=0.7
Content-Type: multipart/form-data; boundary=--------------------------19547468711225981001167730729
Content-Length: 478
-----------------------------19547468711225981001167730729
Content-Disposition: form-data; name="vorname"
Gero
-----------------------------19547468711225981001167730729
Content-Disposition: form-data; name="nachname"
Mühl
-----------------------------19547468711225981001167730729
Content-Disposition: form-data; name="Datei"; filename="test.txt"
Content-Type: text/plain
Dies ist eine Textdatei.
-----------------------------19547468711225981001167730729--
Gero Mühl
Webbasierte Anwendungen / World Wide Web
80
Frames
> Mit Frames kann der Anzeigebereich des Browsers in
horizontale und vertikale Bereiche aufgeteilt werden
> Frameset-Definition:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN"
"http://www.w3.org/TR/html4/frameset.dtd">
<html>
<head>…</head>
<frameset cols="200,*">
<frame src="menu.html" name="Menü" scrolling="no"
noresize>
<frame src="start.html" name="Inhalt">
<noframes><body>Alternativer Inhalt für Browser ohne
Frameunterstützung</body></noframes>
</frameset>
</html>
Gero Mühl
Webbasierte Anwendungen / World Wide Web
81
Frames
> Frame-Definition (Datei menu.html):
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01
Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>…</head>
<body>
<a href="start.html" target="Inhalt">Home<br>
<a href="forschung.html" target="Inhalt">Forschung<br>
<a href="lehre.html" target="Inhalt">Lehre<br>
</body>
</html>
> Alternativ: Angabe des Ziel-Frames im <head>-Element
<base target="Inhalt">
Gero Mühl
Webbasierte Anwendungen / World Wide Web
82
Eingebettete Frame (Inline Frames)
> Erzeugen keine direkt Aufteilung des Browserfensters, sondern
Bereiche innerhalb Webseite, in denen fremde Quellen (z.B. HTMLDokumente, -Schnipsel, Bilder etc.) angezeigt werden können
<html>
<head>
...
</head>
<body>
...
<iframe src="frame.html" width="90%"
height="100" name="a_frame">
<p>Ihr Browser kann leider keine
eingebetteten Frames anzeigen</p>
</iframe>
...
</body>
Gero Mühl
Webbasierte Anwendungen / World Wide Web
83
Eingebettete Frame (Inline Frames)
> frame.html
<H2>Inline Frame</H2>
<p>Hier ein bisschen
Text.</p>
Gero Mühl
Webbasierte Anwendungen / World Wide Web
84
Objekte einbetten
<html>
<head>
<object data="test.mp3" type="audio/mpeg"
width="0" height="0"></object>
</head>
<body>
<h1>test</h1>
<object data="test.svg" type="image/svg+xml"
width="200" height="200">
<p>Ihr Browser kann das Objekt leider nicht
anzeigen!</p>
</object>
</body>
</html>
Gero Mühl
Webbasierte Anwendungen / World Wide Web
85
Objekte einbetten
> Alternativ Einbindung von HTML-Code
<object data="frame.html" type="text/html">
Ihr Browser kann das Objekt leider
nicht anzeigen!
</object>
Gero Mühl
Webbasierte Anwendungen / World Wide Web
86
Fragen?
Gero Mühl
Webbasierte Anwendungen / World Wide Web
87
Cascading Style Sheets (CSS)
Gero Mühl
Webbasierte Anwendungen / World Wide Web
88
Cascading Style Sheets (CSS)
> Ergänzender Standard zu HTML
> Aktuelle Version CSS 2.1 http://www.w3.org/TR/CSS2
> Working Drafts zu CSS 3 Modulen  flexibler, modularer Aufbau
> Definieren die Formatierung der HTML-Elemente in einer
Webseite
> Abstände, Schriftart, Größe, Farbe, Fettdruck, etc.
> Definition entweder
> zentral für ein Dokument im <head> Element,
> für einzelne Elemente (inline) oder
> in einer extra Datei (z.B. style.css), die eingebunden wird.
> Alle Möglichkeiten können auch kombiniert werden
> Vorrang: inline vor zentral vor extern
> Auswahl der HTML-Elemente auf die sich eine Formatierung
auswirkt mittels Selektoren
> W3 Validator http://jigsaw.w3.org/css-validator
Gero Mühl
Webbasierte Anwendungen / World Wide Web
89
CSS-Definition im Header
<html>
<head>
<style type="text/css"> <!-h1 { font-size:24pt; color:#FF0000;
font-style:italic; }
h1.hinterlegt { background-color:#FFFF00;}
*.hinterlegt { background-color:#FF0000;} -->
</style>
</head>
<body>
<h1 class="hinterlegt">Überschrift</h1>
<p class="hinterlegt">Paragraph</p>
</body>
</html>
Gero Mühl
Webbasierte Anwendungen / World Wide Web
90
Einbindung CSS-Datei und Inline-Definition
<html>
<head>
<title>Titel der Datei</title>
<link rel="stylesheet" type="text/css“
href="style.css">
Inhalt des style-Elements
<style type="text/css"><!-in HTML-Kommentar für
h1 { font-size:48pt; } -->
ältere Browser, die kein
</style>
CSS verstehen
</head>
<body>
<p class="normal" style="color:#FF0000;">
Element-bezogene Definition
</p>
</body>
</html>
Gero Mühl
Webbasierte Anwendungen / World Wide Web
91
Formatierung je nach Ausgabemedium
> Viele Webseiten sehen nur auf dem Bildschirm gut aus, lassen sich aber
nicht vernünftig ausdrucken
> Separate Stylesheets ermöglichen Formatierung speziell abgestimmt auf
das Ausgabemedium
<head>
<link rel="stylesheet" media="screen" href="web.css">
<link rel="stylesheet" media="print" href="druck.css">
</head>
> Alternative Deklaration innerhalb eines Style-Elements
<style type="text/css">
@media print { … }
@media screen, handheld { … }
</style>
Gero Mühl
Webbasierte Anwendungen / World Wide Web
92
CSS Selektoren
>
>
>
>
>
*
E
E.c
#myid
EF
> E>F
> E~F
> E+F
Gero Mühl
Selektiert jedes Element
Selektiert jedes Element vom Typ E
Selektiert jedes Element der Klasse c
Selektiert das Element mit der ID myid
Selektiert jedes Element F, das ein Nachfahre
von Element E ist
Selektiert jedes Element F, das ein Kind von E ist
Selektiert jedes Element F, das einen Vorgänger E
auf gleicher Ebene hat
Selektiert jedes Element F, das einen direkten
Vorgänger E auf gleicher Ebene hat
Webbasierte Anwendungen / World Wide Web
93
CSS Selektoren
> E:first-child Selektiert ein Element E, wenn es das erste Kind
des direkten Vorfahren ist
> E[foo]
Selektiert jedes Element E, bei dem das
foo-Attribut gesetzt ist (unabhängig vom Wert)
> E[foo=bar] Selektiert jedes Element E, bei dem das
foo-Attribut mit dem Wert bar gesetzt ist
> E[foo^=bar] Selektiert jedes Element E, bei dem das
foo-Attribut mit dem Wert bar beginnt
> E[foo$=bar] Selektiert jedes Element E, bei dem das
foo-Attribut mit dem Wert bar endet
> E[foo*=bar] Selektiert jedes Element E, bei dem das
foo-Attribut den Wert bar enthält
Gero Mühl
Webbasierte Anwendungen / World Wide Web
94
CSS-basierte Layouts
> Bessere Alternative zu Frames und Tabellen
<html>
<head>
<title>Lehrstuhl AVA</title>
<link rel="stylesheet" type="text/css"
href="style.css">
</head>
<body>
<ul id="Navigation">
<li><a href="home">Start</a></li>
<li><a href="forschung">Forschung</a></li>
<li><a href="lehre">Lehre</a></li>
<li><a href="mitarbeiter">Mitarbeiter</a></li>
</ul>
<div id="Inhalt"><h1>Forschung</h1>
<p>Der Lehrstuhl AVA ...</p></div>
</body>
</html>
Gero Mühl
Webbasierte Anwendungen / World Wide Web
95
CSS-basierte Layouts
ul#Navigation {
float: left; width: 22em;
margin: 0; padding: 0;
border: 1px dashed silver;
}
ul#Navigation li {
list-style: none;
margin: 0; padding: 0.5em;
}
ul#Navigation a {
display: block;
padding: 0.2em;
font-weight: bold;
}
ul#Navigation a:link {
color: black;
background-color: #eee;
}
Gero Mühl
ul#Navigation a:visited {
color: #666;
background-color: #eee;
}
ul#Navigation a:hover {
color: black;
background-color: white;
}
ul#Navigation a:active {
color: white;
background-color: gray;
}
div#Inhalt {
margin-left: 22em;
padding: 0 1em;
border: 1px dashed silver;
min-width: 16em;
}
Webbasierte Anwendungen / World Wide Web
96
CSS-basierte Layouts
Gero Mühl
Webbasierte Anwendungen / World Wide Web
97
Exemplarische Fragen zur Lernkontrolle
WWW
1. Erläutern Sie die Architektur des WWW!
2. Wie werden WWW-Seiten
beschrieben/übertragen/adressiert/angezeigt?
3. Welche Schritte laufen beim Laden und Anzeigen einer
Webseite ab?
4. Welche Arten von Web Clients kennen Sie?
5. Was ist ein Proxy und wofür werden Proxies eingesetzt?
6. Wie ist eine URL aufgebaut?
7. Was versteht man unter URL Encoding und
wofür wird diese Kodierung genutzt?
8. Welche Informationen lassen sich dem Log eines
Web Servers gewinnen?
Gero Mühl
Webbasierte Anwendungen / World Wide Web
98
Exemplarische Fragen zur Lernkontrolle
HTTP
1. Erläutern Sie die Funktionsweise von HTTP und die
Eigenschaften dieses Protokolls!
2. Können mit HTTP nur HTML-Dokumente
übertragen werden?
3. Aus welchen Teilen besteht eine HTTP-Nachricht?
4. Welche Methoden/Befehle gibt es bei HTTP?
5. Welche Kodierungen können für den HTTP-Header und den
HTTP-Body verwendet werden?
6. Was bedeutet es genau, dass HTTP zustandslos ist?
7. Welche Möglichkeiten gibt es, in Webanwendungen
zustandsbehaftete Sitzungen zu realisieren?
8. Wofür ist HTTPS da und wie funktioniert es?
9. Wie werden HTTP und HTTPS in Java unterstützt?
Gero Mühl
Webbasierte Anwendungen / World Wide Web
99
Exemplarische Fragen zur Lernkontrolle
HTML und CSS
1. Welchen grundlegenden Aufbau hat ein HTML-Dokument?
2. Welche gestalterischen Elemente unterstützt HTML?
3. Welche zwei Methoden gibt es zur Übergabe von
Formulardaten und worin unterscheiden sich diese?
4. Was ist bei der Kodierung von Formulardaten zu beachten?
5. Was sind Frames?
6. Beschreiben Sie die Möglichkeiten, die CSS bietet!
7. Wie können CSS-Definitionen in ein HTML-Dokument
eingebunden werden?
8. Warum ist es sinnvoll mit CSS mehrere Ausgabemedien zu
unterstützten und wie geschieht dies konkret?
Gero Mühl
Webbasierte Anwendungen / World Wide Web
100
Literatur
> Spezifikationen
> HTML 4.01: http://www.w3.org/TR/html401
> XHTML 1.0: http://www.w3.org/TR/xhtml1
> CSS 2.1: http://www.w3.org/TR/CSS2
> Validatoren
> HTML: http://validator.w3.org
> CSS: http://jigsaw.w3.org/css-validator
> Einführung in HTML, CSS und mehr
> SELFHTML: http://de.selfhtml.org
> Browser Addons
> Firebug (Firefox): http://getfirebug.com
> Developer Toolbar (IE): http://go.microsoft.com/fwlink/?LinkId=92716
Gero Mühl
Webbasierte Anwendungen / World Wide Web
101
Vielen Dank für Ihre Aufmerksamkeit!
Univ.-Prof. Dr.-Ing. habil. Gero Mühl
[email protected]
http://wwwava.informatik.uni-rostock.de
Gero Mühl
Webbasierte Anwendungen / World Wide Web
102
Webbasierte Anwendungen
Client- und Serverseitige Techniken
Univ.-Prof. Dr.-Ing. habil. Gero Mühl
Architektur von Anwendungssystemen (AVA)
Fakultät für Informatik und Elektrotechnik (IEF)
Universität Rostock
Überblick
> Einführung
> Klassifikation von Techniken
> Serverseitige Techniken
> Server Side Includes (SSI)
> Common Gateway Interface (CGI)
> Hypertext Preprocessor (PHP)
> Clientseitige Techniken
> JavaScript
> Java Applets + Java RMI
Gero Mühl
Webbasierte Anwendungen / Techniken
2
Techniken für Webanwendungen
> Vielzahl verschiedener Ansätze und Techniken
> Unterschied in Details  klare Klassifizierung schwierig
> Großes Potential durch Kombination mehrerer Techniken
> Klassifizierung bez. verschiedener Dimensionen möglich
>
>
>
>
>
Client vs. Server
Abstraktion
Funktionsumfang
Sicherheit
…
Der folgende Überblick über existierende Technologien
erhebt keinen Anspruch auf Vollständigkeit.
Gero Mühl
Webbasierte Anwendungen / Techniken
3
Clientseitig vs. Serverseitig
Clientseitig
Serverseitig
> Nutzen der „eingebauten“
Fähigkeiten des Browsers
> Einbindung nachladbarer/
installierbarer Plugins
> Programmierung der Plugins
> Beispiele
> Delegation des HTTP Requests an
externe Komponenten
> Weiterleitung aufgrund URL
 Dispatching
> Komponenten erzeugen Response
> Beispiele
>
>
>
>
>
DHTML/JavaScript
ActiveX
Java Applets
Flash
…
>
>
>
>
>
Server Side Includes (SSI), PHP
Common Gateway Interface (CGI)
Java Server Pages (JSP), Servlets
Java Server Faces (JSF), ASP.NET
…
Die Dynamik der Anwendung kann meist sowohl im Client
als auch auf dem Server realisiert werden.
Gero Mühl
Webbasierte Anwendungen / Techniken
4
Laufzeitumgebung
Mit Laufzeitumgebung
Ohne Laufzeitumgebung
> Container bietet zusätzliche
Funktionalität
> Systemprozesse
> Verantwortung des
Programmierers für
> Sitzung
> Authentifizierung und
Autorisierung
> Ressourcenüberwachung
> …
> Beispiele
> Servlets/JSP/JSF
> ASP.NET
> …
Gero Mühl
> Sitzungsverwaltung
> Sicherheit
> …
> Beispiele
> CGI
> FCGI
> …
Webbasierte Anwendungen / Techniken
5
Abstraktion
Objekt-/Komponentenorientiert
Request/Response
Seitenbeschreibung
> Komponente analysiert Request
> Komponente erzeugt
Response direkt
(z.B. HTML)
> Spezieller Markup für
dynamische Elemente
> Wird bei jeder Anfrage
bearbeitet und im
HTML Dokument
ersetzt
> Seite besteht aus
vorgefertigten
Komponenten
> Ereignisbasiertes
Ausführungsmodell
> Beispiele
> CGI
> Java Servlets
> Beispiele
> JSP
> PHP
> Beispiele
> ASP.NET
> JSF
Gero Mühl
Webbasierte Anwendungen / Techniken
6
Wiederverwendbarkeit
Geringe Wiederverwendbarkeit
Gute Wiederverwendbarkeit
> Konkatenation verschiedener
Ausgabeströme durch
Weiterleitung möglich
> Komponentenmodell und
reiches Typsystem
ermöglichen Orchestrierung
einzelner Komponenten
> Beispiele
> Beispiele
> Servlets
> CGI
Gero Mühl
> ASP.NET
> JSP
Webbasierte Anwendungen / Techniken
7
Fragen?
Gero Mühl
Webbasierte Anwendungen / Techniken
8
Teil 1: Serverseitige Technologien
Gero Mühl
Webbasierte Anwendungen / Techniken
9
Überblick Serverseitige Technologien
> Server Side Includes (SSI)
> Common Gateway Interface (CGI)
> Hypertext Preprocessor (PHP)
> Servlets1
> Java Server Pages (JSP)1
> Java Server Faces (JSF)1
1
Gero Mühl
Besprechung als Teil von J2EE
Webbasierte Anwendungen / Techniken
10
Server Side Includes (SSI)
Gero Mühl
Webbasierte Anwendungen / Techniken
11
Server Side Includes (SSI)
> Anweisungen in HTML-Seiten, die vom Webserver
interpretiert und durch HTML ersetzt werden
> Einbettung der Anweisungen in HTML-Kommentare
> Syntax
<!--#element attribute1=value1
attribute2=value2 ... -->
> Datum/Zeit einblenden
<!--#echo var="DATE_LOCAL" -->
> CGI-Skript ausführen
<!--#include virtual="/cgi-bin/counter.pl" -->
> Befehl ausführen
<!--#exec cmd="ls" -->
Gero Mühl
Webbasierte Anwendungen / Techniken
12
Server Side Includes (SSI)
> Änderungsdatum einblenden
<!--#echo var="LAST_MODIFIED" -->
> Einbinden einer Datei auf dem gleichen Server
<!--#include virtual="/footer.html" -->
> If-then-else-Konstrukt
<!--#if expr='"$DOCUMENT_URI" = "/foo.html"' -->
in foo
<!--#elif expr='"$DOCUMENT_URI" = "/bar.html"' -->
in bar
<!--#else -->
in neither
<!--#endif -->
Gero Mühl
Webbasierte Anwendungen / Techniken
13
Common Gateway Interface (CGI)
Gero Mühl
Webbasierte Anwendungen / Techniken
14
Common Gateway Interface (CGI)
> CGI definiert Schnittstelle für Aufruf von Programmen durch
den Webserver und Übergabe von Argumenten
> Aufruf durch Starten eines Prozesses mit den Clientparametern
> Standardausgabe des Prozesses ist Response
> Meist wird eine dynamisch generierter Webseite zurückgegeben
Anbieter
Webbrowser
Praktikum in Grönland !
Formular anfordern
anmelden

HTTP
Client
Formular liefern
Daten senden
HTTP
Server
Antwort empfangen
/cgi-bin/anmelden.tcsh
Gero Mühl
Webbasierte Anwendungen / Techniken
15
Common Gateway Interface (CGI)
> Per Konvention liegen CGI-Skripte meist
im Verzeichnis /cgi-bin
> Viele Programmiersprache werden unterstützt
> Häufig Skriptsprachen: Shells, Perl, Python, ...
> Aber auch: C, C++, etc.
> Skript antwortet mit neuer Seite (zumindest HTTP-Header)
#!/bin/bash
echo "Content-type: text/html" ; echo
> Einfaches Beispiel
#!/usr/bin/perl
print "Content-type: text/html\n\n";
print "Hello, World.";
Gero Mühl
Webbasierte Anwendungen / Techniken
16
Aufruf eines CGI-Skriptes
> Formular
<form action="/cgi-bin/guestbk.pl" method="get">
<form action="/cgi-bin/stats.pl" method="post">
> Verweis
<a href="/cgi-bin/statistik.pl">
Tagesstatistik</a>
> Grafikreferenz
<img src="/cgi-bin/counter.pl">
> Server Side Include (SSI)
<!-- #exec cgi="/cgi-bin/counter.pl" -->
> Automatisches Laden durch Weiterleitung
<meta http-equiv="refresh"
content="0;URL=/cgi-bin/welcome.pl">
Gero Mühl
Webbasierte Anwendungen / Techniken
17
CGI Parameterübergabe
> GET
> $QUERY_STRING (Umgebungsvariable) wird übergeben
> Zum Beispiel
?vorname=Hans&nachname=M%FCller&...
?query=CGI+Tutorial
> Beinhaltet alle Parameter in einem String
(Leerzeichen durch + ersetzt)
> Wird vom Skript geparst und entsprechend verarbeitet
> POST
> Einlesen der Parameter aus der Standardeingabe
Gero Mühl
Webbasierte Anwendungen / Techniken
18
CGI Beispiele
#!/bin/sh
cat - <<EOF
Content-type: text/html
<HTML><HEAD><TITLE>Datum und Zeit</TITLE></HEAD>
<BODY><H1>Zeit und Datum:
EOF
date
cat - <<EOF
</H1></BODY></HTML>
EOF
Gero Mühl
Webbasierte Anwendungen / Techniken
19
CGI Beispiele
> Zugriff auf Umgebungsvariablen
#!/usr/bin/perl
print "Content-type: text/html\n\n";
foreach $key (keys %ENV) {
print "$key --> $ENV{$key}<br>";
}
> Query-String an Java übergeben, um GET-Request zu verarbeiten
#!/bin/bash
echo $QUERY_STRING | java CGI
> Query-String mit Java auslesen, um GET-Request zu verarbeiten
String queryString = System.getEnv("QUERY_STRING");
> Java-Programm mit Standardeingabe aufrufen (POST-Request)
#!/bin/bash
cat /dev/stdin | java CGI
Gero Mühl
Webbasierte Anwendungen / Techniken
20
CGI Sicherheit
> CGI-Programme sind „von jedem“ aufrufbar
> Ausführung eines Programms ohne Benutzerkonto auf
der Maschine  Berechtigung des CGI-Programms ist
die Berechtigung des WWW-Servers
> Server nicht als root starten, sondern als wwwuser
> Alternativ kann CGI-Programm mit
UID ihres Besitzers laufen
> Problem der Ausführung dynamisch erzeugter
Systemkommandos  Injection
Gero Mühl
Webbasierte Anwendungen / Techniken
21
CGI Diskussion
> Vorteile
> Geringe Anforderungen
> Verfügbarkeit auf Server
> Hohe Flexibilität
> Nachteile
>
>
>
>
Gero Mühl
Niedrige Abstraktionsebene
Sicherheit dem Anwendungsentwickler überlassen
Hoher Ressourcenverbrauch (Prozess pro Request)
Keine Ressourcenüberwachung
Webbasierte Anwendungen / Techniken
22
Hypertext Preprocessor (PHP)
Gero Mühl
Webbasierte Anwendungen / Techniken
23
Hypertext Preprocessor (PHP)
> Viel verwendete serverseitige Skriptsprache
> PHP ist Open Source Software [http://www.php.net]
> Oft in Verbindung mit MySQL verwendet [http://www.mysql.com]
> Verfügbar für viele Plattformen (Windows, Linux, Unix, etc.)
> Einfaches Beispiel
<html>
<head>
<title>PHP-Test</title>
</head>
<body>
<?php echo "<p>Hallo Welt</p>"; ?>
</body>
</html>
Gero Mühl
Webbasierte Anwendungen / Techniken
24
PHP und HTML gemischt
<?php
if (strstr($_SERVER["HTTP_USER_AGENT"], "MSIE")) {
?>
<h3>strstr muss true zurückgegeben haben</h3>
<center><b>Sie benutzen Internet Explorer</b></center>
<?php
} else {
?>
<h3>strstr muss false zurückgegeben haben</h3>
<center><b>Sie benutzen nicht Internet
Explorer</b></center>
<?php
}
?>
Gero Mühl
Webbasierte Anwendungen / Techniken
25
HTML Forms und PHP
> Form
<form action="welcome.php" method="POST">
Enter your name: <input type="text" name="name" />
Enter your age: <input type="text" name="age" />
<input type="submit" />
</form>
> Verarbeiten der Formulardaten
<html>
<body>
Welcome <?php echo $_POST["name"]; ?>.
You are <?php echo $_POST["age"]; ?> years old!
</body>
</html>
Gero Mühl
Webbasierte Anwendungen / Techniken
26
PHP Cookies
> Cookie setzen
<?php
setcookie("uname", $name, time() + 36000);
?>
> Cookie abfragen
<?php
if (isset($uname))
echo "Welcome " . $uname . "!<br />";
else
echo "You are not logged in!<br />";
?>
Gero Mühl
Webbasierte Anwendungen / Techniken
27
ODBC-Datenbankzugriff mit PHP
<?php
$conn=odbc_connect('northwind','','');
if (!$conn) { exit("Connection Failed: " . $conn); }
$sql="SELECT * FROM customers";
$rs=odbc_exec($conn,$sql);
if (!$rs) {exit("Error in SQL");}
echo "<table><tr><th>Firma</th><th>Kontakt</th></tr>";
while (odbc_fetch_row($rs)) {
$compname=odbc_result($rs,"CompanyName");
$conname=odbc_result($rs,"ContactName");
echo "<tr><td>$compname</td>";
echo "<td>$conname</td></tr>";
}
odbc_close($conn);
echo "</table>";
?>
Gero Mühl
Webbasierte Anwendungen / Techniken
28
CSS mit PHP
...
<style type="text/css"> <!-.row_0 { background-color: #FFFFFF;}
.row_1 { background-color: #777777;}
} --> </style>
...
<table width="300">
<?PHP for($i=0;$i<=9;$i++){ ?>
<tr>
<td class="row_<?PHP echo $i % 2; ?>">
Reihe <?PHP echo $i; ?></td>
</tr>
<?PHP } ?>
</table>
Gero Mühl
Webbasierte Anwendungen / Techniken
29
Literatur
1. Apache Tutorial: Introduction to Server Side Includes
>
http://httpd.apache.org/docs/2.2/howto/ssi.html
2. Apache Tutorial: Dynamic Content with CGI
>
http://httpd.apache.org/docs/2.2/howto/cgi.html
3. RFC 3875 The Common Gateway Interface (CGI) Version 1.1
>
http://www.ietf.org/rfc/rfc3875
4. PHP-Handbuch
>
http://www.php.net/manual
5. SELFPHP
>
Gero Mühl
http://www.selfphp.de
Webbasierte Anwendungen / Techniken
30
Fragen?
Gero Mühl
Webbasierte Anwendungen / Techniken
31
Teil 2: Clientseitige Technologien
Gero Mühl
Webbasierte Anwendungen / Techniken
32
Überblick Clientseitige Technologien
> JavaScript
> Ajax
> Pushlets
> LiveConnect
> Java Applets
Gero Mühl
Webbasierte Anwendungen / Techniken
33
JavaScript
Gero Mühl
Webbasierte Anwendungen / Techniken
34
JavaScript
> Von Netscape lizenzierte objektorientierte Skriptsprache;
aktuelle Version 1.8 (Microsoft Pendant JScript)
> Auch als ECMA (European Computer Manufacturers
Association)-Standard (ECMA-262)  ECMASkript
> Aus Sicherheitsgründen eingeschränkte Rechte bei der
Ausführung durch den JavaScript-Interpreter  Sandbox
> Kein Zugriff auf das Dateisystem
> Keine Arbeitsspeicherverwaltung
> …
> Leider viele Inkompatibilitäten zwischen den Browsern
> HTML + CSS + JavaScript = Dynamic HTML (DHTML)
Gero Mühl
Webbasierte Anwendungen / Techniken
35
Möglichkeiten von JavaScript
> Erzeugen von Teilen der Webseite erst beim Client
(z.B. aktuelles Datum einblenden)
> Test von Formulardaten vor dem Absenden
> Identifizieren des Browsers
> Reagieren auf Ereignisse (z.B. Mausbewegung oder -klick)
> Zugriff auf alle HTML-Elemente einer Webseite mittels des
Document Object Model (DOM)
> Animationen
> Kommunikation mit dem Webserver, der die Seite geliefert hat
> Cookie-Management
> …
Gero Mühl
Webbasierte Anwendungen / Techniken
36
Eigenschaften von JavaScript
> Ist zwar objektorientiert, kennt aber keine Klassen,
sondern nur Objekte
 Prototypenbasierte Programmierung
> Lediglich schwache Typisierung
> Unterscheidung lediglich zwischen numerisch
(für Rechenoperationen) und nicht-numerisch
(für zeichenorientierte Operationen)
> Automatischen Konvertierungen von Typen soweit
erforderlich und möglich
> Mögliche Fehlerquelle zur Laufzeit
Gero Mühl
Webbasierte Anwendungen / Techniken
37
Eigenschaften von JavaScript
> Anweisungsblöcke
> ähnlich wie in Java: { ... }
> if … else, switch, ?:
> while, for, do ... while, break,
continue (mit Marken)
> Funktionen
> mit und ohne Rückgabewert (keine Angabe in Signatur)
function produkt(a, b) {
return a * b;
}
Gero Mühl
Webbasierte Anwendungen / Techniken
38
Erzeugen neuer Objekte
// Konstruktur definieren
function Komplex(real, imaginaer) {
this.real = real;
this.imaginaer = imaginaer;
this.summe = function() {
return this.real + this.imaginaer;
}
}
...
var z = new Komplex(1,5); // neues Objekt erzeugen
document.writeln("z = (" + z.real + "," +
z.imaginaer + ")");
document.writeln("Summe von z = " + z.summe());
Gero Mühl
Webbasierte Anwendungen / Techniken
39
Vererbung über Prototyp
function Quaternion(real, imag1, imag2, imag3) {
this.constructor(real, imag1);
this.imag2 = imag2;
this.imag3 = imag3;
}
Quaternion.prototype = new Komplex();
...
var q = new Quaternion(1,3,6,10);
document.writeln("q = (" + q.real + "," +
q.imaginaer + "," +
q.imag2 + "," + q.imag3 + ")");
document.writeln("Summe von Real- und erstem
Imaginärteil = " + q.summe());
Gero Mühl
Webbasierte Anwendungen / Techniken
40
JavaScript einbinden
> JavaScript-Code kann direkt in der HTML-Datei (inline)
notiert oder aus separaten Dateien eingebunden werden
> Beispiel für Inline-Skript
<script type="text/javascript">
<!-// aktuelle Uhrzeit ausgeben
var d = new Date();
document.write(d.getHours() + ":" +
d.getMinutes());
//-->
</script>
<noscript>JavaScript einschalten</noscript>
Gero Mühl
Webbasierte Anwendungen / Techniken
41
JavaScript einbinden
> Einbindung externer JavaScript-Dateien als Teil des
<head>-Elements
> Ermöglicht die Wiederverwendung von Code
> Eingebundene Datei darf nur JavaScript enthalten
> Kann bei großen Skriptdateien und langsamer Verbindung
die Ladezeit einer Seite erheblich erhöhen
<head>
...
<script src="script.js"
type="text/javascript"></script>
...
</head>
Gero Mühl
Webbasierte Anwendungen / Techniken
42
JavaScript Fehlerverarbeitung
> Definition einer Fehlerbehandlungsfunktion
> window.onerror bekommt als Wert den Namen der
Funktion, die im Fehlerfall aufgerufen wird
> Ansonsten werden Fehler im Log gemeldet
<script type="text/javascript">
window.onerror = ausnahme;
function ausnahme(Nachricht, Datei, Position) {
alert("Fehlermeldung:\n" + Nachricht + "\n" +
Datei + "\n" + Position);
return true;
}
</script>
Gero Mühl
Webbasierte Anwendungen / Techniken
43
JavaScript Fehlerverarbeitung
> Ausnahmebehandlung mit try/catch
> ähnliche Syntax wie in Java
> keine verpflichtende Behandlung
> Objekte oder Konstanten können geworfen werden
try {
myFunction(); // kann Ausnahme werfen
}
catch (e) {
... // Behandlung der Ausnahme
}
Gero Mühl
Webbasierte Anwendungen / Techniken
44
HTML Document Object Model (DOM)
> Objekt- und Programmiermodell
für HTML-Dokumente
> Plattform- und sprachunabhängig
> Standard des W3Cs
> Ermöglicht interaktive
Webanwendungen
document
html
head
<html>
<head>
<title>HTML DOM</title>
title
</head>
<body>
<h1>A Heading</h1>
HTML DOM
<p>Some text</p>
</body>
</html>
Gero Mühl
body
h1
p
A Heading
Some text
Webbasierte Anwendungen / Techniken
45
HTML Document Object Model (DOM)
>
Zugriff auf das <html>-Element
document.documentElement
>
Direkter Zugriff auf das <body>-Element
document.body
>
>
>
>
>
>
>
>
>
>
>
Properties und Methoden eines Elements
e.innerHTML
Der Text von Element e
e.nodeName
Der Name von e
e.nodeValue
Der Wert von e
e.parentNode
Der Elternknoten von e
e.childNodes
Die Kinderknoten von e
e.attributes
Die Attribute von e
e.getElementById(id)
Element mit ID id
e.getElementsByTagName(name) Elemente mit Tagnamen name
e.appendChild(node)
Kindknoten node einfügen
e.removeChild(node)
Kindknoten node löschen
Gero Mühl
Webbasierte Anwendungen / Techniken
46
JavaScript Beispiel 1
> Funktionsaufruf sowie Zugriff auf Formulardaten
<html>
<head>
<title>JavaScript-Taschenrechner</title>
<script src="produkt.js"
type="text/javascript"></script>
</head>
<body>
<form name="Form" action="">
<input type="text" name="x" size="3">*
<input type="text" name="y" size="3">
<input type="button" value="=" onClick=
"document.Form.p.value = produkt(
document.Form.x.value,
document.Form.y.value)">
<input type="text" name="p" size="5">
</form>
</body>
</html>
Gero Mühl
Webbasierte Anwendungen / Techniken
47
JavaScript Beispiel 2
> Zugriff auf HTML-Elemente mittels getElementById
> Regelmäßige Ausführung einer Funktion
<h1 id="heading" onmouseover="Farbe()">My blinking heading</h1>
<script type="text/javascript">
var aktiv = window.setInterval("Farbe()", 1000);
var i = 0, farbe = 1;
function Farbe () {
if (farbe == 1) {
document.getElementById("heading").style.color="blue"
farbe = 2;
} else {
document.getElementById("heading").style.color="red"
farbe = 1;
}
i = i + 1;
if (i >= 10) window.clearInterval(aktiv);
}
</script>
Gero Mühl
Webbasierte Anwendungen / Techniken
48
JavaScript Beispiele 3 + 4
> Einmaliger Aufruf einer Funktion nach Timeout
var t = setTimeout("alert('5 seconds!')",5000);
> Neue Seite in Frame schreiben
<html>
<head><title>JavaScript</title></head>
<body>
<iframe width="100%" height="100%"
name="myframe"></iframe>
<script type="text/javascript">
w = window.frames['myframe'].document;
w.open();
w.writeln("<html><head><title>Test</title>
</head><body><h1>Test</h1></body></html>");
w.close();
</script>
</body>
</html>
Gero Mühl
Webbasierte Anwendungen / Techniken
49
JavaScript Beispiel 5
> Animation eines drehenden Kreises aus Punkten
<style type='text/css'>div{position: absolute;
font-size:48px;}</style>
<script type="text/javascript">
for(i=0;i<100;i++)
document.write("<div id='P" + i + "'>.</div>");
window.setInterval("move()", 50);
var alpha = 0;
var x = 2 * Math.PI / 100;
function move() {
for(i = 0;i < 100;i++) {
p = document.getElementById("P"+i).style;
p.left = 125 + 100 * Math.cos(alpha + x * i);
p.top = 110 + 100 * Math.sin(alpha + x * i);
}
alpha = alpha-0.1;
}
</script>
Gero Mühl
Webbasierte Anwendungen / Techniken
50
JavaScript Eventhandler
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
Gero Mühl
onblur
onclick
ondblclick
onfocus
onkeydown
onkeypress
onkeyup
onmousedown
onmousemove
onmouseout
onmouseover
onmouseup
onreset
onselect
onsubmit
Verlassen
einfaches Anklicken
doppeltes Anklicken
Aktivieren
gedrückte Taste
gedrückt gehaltene Taste
losgelassene Taste
gedrückte Maustaste
weiterbewegte Maus
Verlassen des Elements mit der Maus
Überfahren des Elements mit der Maus
losgelassene Maustaste
Zurücksetzen des Formulars
Selektieren von Text
Absenden des Formulars
Webbasierte Anwendungen / Techniken
51
JavaScript Beispiele 6 + 7
> Dynamische grafische Buttons
<img src="button1.jpg"
onmouseover="src='button2.jpg'"
onmouseout="src='button1.jpg'">
> Auf- und zuklappen von Paragraphen
<script type="text/javascript">
function Click(x) {
y = document.getElementById(x).style;
if (y.display == "none") {
y.display = "block";
} else {
y.display = "none";
}
}
</script>
<h1 onclick="Click('Test')">Test</h1>
<p id="Test">Dies ist der Text zu Test.</p>
Gero Mühl
Webbasierte Anwendungen / Techniken
52
JavaScript Beispiel 8
> Kommunikation mit dem Server mittels XMLHttpRequest
> Grundlage für AJAX (Asynchronous JavaScript and XML)
xmlHttp = new XMLHttpRequest();
if (xmlHttp) {
xmlHttp.open('GET','aktie.xml?id=DTE', true);
xmlHttp.onreadystatechange = function () {
if (xmlHttp.readyState == 4) {
newQuote(xmlHttp.responseText);
}
};
xmlHttp.send(null);
}
Gero Mühl
Webbasierte Anwendungen / Techniken
53
AJAX
(Asynchronous JavaScript and XML)
Gero Mühl
Webbasierte Anwendungen / Techniken
54
Klassische Webanwendungen
> Synchrones Request/Reply-Kommunikationsmodell
> Klicken und Warten (Seite neu laden und anzeigen)
> Server in jede Interaktion involviert
 Anwendungen häufig wenig responsiv
> Unterbrechung der Benutzerinteraktion mit Kontextverlust
> Keine weiteren Operationen möglich, während neue Seite
geladen wird  kein unmittelbares Feedback
> Verlust von Seiteninformationen (z.B. Formularinhalte bei
Fehlern) sowie der Position des Scrollbalkens
> Seitengetriebener Workflow
> Navigation durch Server vorgegeben
> Auf HTML beschränkt  wenige nutzbare Bedienelement,
hauptsächlich Formulare und Links
Gero Mühl
Webbasierte Anwendungen / Techniken
55
Klassische Webanwendungen
1.
2.
4.
3.
Webserver
Webbrowser
1.
4.
1.
1. Benutzeraktion
2. HTTP-Request
3. HTTP-Response
(HTML + CSS)
4. Anzeigen der Seite
4.
1.
4.
Client
2.
3.
2.
3.
2.
3.
Netzwerk
Server
Gero Mühl
Zeit
Webbasierte Anwendungen / Techniken
56
AJAX
> AJAX = Asynchronous JavaScript and XML
> DHTML + asynchrone Kommunikation mittels XMLHttpRequest
> Gezieltes (Nach)laden von Informationen im Hintergrund
⇒ Kürzere Antwortzeiten wegen geringerer Datenmenge
⇒ Bessere Interaktivität
> Selektive Aktualisierung, Hinzufügen oder Löschen von Elementen
einer Webseite ohne kompletten Neuaufbau
> Nur geänderte Seitenelemente werden vom Browser neu gerendert
 Kein Flackern o. ä. wie beim kompletten Neuaufbau
> Restliche Elemente bleiben unverändert  Wahrung des Kontexts
> Trennung der Benutzer- von der Datenschnittstelle
> Datengetriebener Workflow
Gero Mühl
Webbasierte Anwendungen / Techniken
57
AJAX
Darstellung der
geladenen Seite
Aktualisierung der
dargestellten Seite
Client
Ajax Engine
asynchroner
XMLHttpRequest
synchroner
HTTP-Request
Server
Zeit
Gero Mühl
Webbasierte Anwendungen / Techniken
58
AJAX Beispiel: Google Maps
2. Nachladen fehlender Kartenteile im
Hintergrund
1. Ziehen der Karte
mit der Maus
Gero Mühl
Webbasierte Anwendungen / Techniken
59
Google Docs and Google Calendar
Gero Mühl
Webbasierte Anwendungen / Techniken
60
Google Mail
Gero Mühl
Webbasierte Anwendungen / Techniken
61
Weitere AJAX Beispiele
> Autovervollständigung bei Suchanfragen
> Überprüfung der Rechtschreibung bei Texteingaben
> Simultane Übersetzung von Texteingaben in
andere Sprache
> Aktualisierung von Seitenteilen per Polling bei
Informationen (Nachrichten, Aktienkurse, etc.)
> Visualisierung von Aktionen (z.B. durch Ladebalken)
> Drag-and-Drop von Text
> Validierung von Formulardaten mit Fehlermeldungen
bei Falscheingaben
> …
Gero Mühl
Webbasierte Anwendungen / Techniken
62
XMLHttpRequest
> API für asynchrone HTTP-Aufrufe
> Zugriff via JavaScript
> Konzept ursprünglich von Microsoft entwickelt  XMLHTTP
function ajaxPOST(url, params, callbackFunction) {
Request-Objekt erzeugen
var request = new XMLHttpRequest();
und HTTP Methode &
request.open("POST", url, true);
Header setzen
request.setRequestHeader("Content-Type",
"application/x-www-form-urlencoded");
request.onreadystatechange = function() {
if (request.readyState == 4 && request.status == 200) {
if (request.responseText) {
callbackFunction(request.responseText);
} } };
request.send(params);
Callback-Funktion
ausführen, wenn Antwort
}
Daten, die per Posterhalten (4) und erfolgreich
Request übertragen
(HTTP 200)
werden sollen
Gero Mühl
Webbasierte Anwendungen / Techniken
63
Suchvorschläge à la Google Suggest
<html>
<head>
<script src="suggest.js"></script>
</head>
<body>
<form>
Name: <input type="text"
onkeyup="suggest(this.value)"/>
</form>
<p>Suggestion: <span id="suggestion"></span></p>
</body>
</html>
Gero Mühl
Webbasierte Anwendungen / Techniken
64
Suchvorschläge à la Google Suggest
suggest.js:
function suggest(str) {
var xmlhttp= new XMLHttpRequest();
var url="suggest.cgi" + "?q=" + str;
xmlhttp.open("GET", url, true);
request.onreadystatechange = function() {
if (xmlhttp.readyState == 4) {
document.getElementById("suggestion").
innerHTML = xmlhttp.responseText;
}
xmlhttp.send(null);
}
Gero Mühl
Webbasierte Anwendungen / Techniken
65
AJAX Bilanz
Vorteile
Nachteile
> Rich Internet Applications
(RIA), ähnlich zu
Desktop-Anwendungen
> JavaScript-Programmierung
durch den Web-Entwickler
> Keine Plugins notwendig
(vgl. Applets, Flash, etc.)
> Browserinkompatibilitäten
> Debugging
> Wartung
> Polling
> Rahmenwerke und Toolkits
(z.B. Dojo)
> Netzverkehr
> Serverbelastung
> Große Beachtung und
Industrieunterstützung
Gero Mühl
Webbasierte Anwendungen / Techniken
66
Literatur
1. Christian Wenz, JavaScript und Ajax: Das umfassende
Handbuch, 7. Auflage, 2008, Galileo Computing
http://openbook.galileocomputing.de/javascript_ajax
2. Christian Wenz, JavaScript: Das umfassende Handbuch,
10. Auflage, 2010, Galileo Computing, ISBN 3836216787
3. XMLHttpRequest
http://www.w3.org/TR/XMLHttpRequest
4. W3Schools AJAX Tutorial
http://www.w3schools.com/Ajax
5. The Dojo Toolkit
http://www.dojotoolkit.org
Gero Mühl
Webbasierte Anwendungen / Techniken
67
Fragen?
Gero Mühl
Webbasierte Anwendungen / Techniken
68
Pushlets
Gero Mühl
Webbasierte Anwendungen / Techniken
69
Aktualisierung von Webseiten
> Ziel: Automatische Aktualisierung
von Webseiten im Browser bei
Änderungen der zugrunde
liegenden Informationen
> Aktienkurse
> Nachrichtenschlagzeilen
> Andere Kunden betrachten
gleiches Produkt im Webshop
> Freunde gehen online
oder offline
> …
Gero Mühl
Webbrowser
Webbasierte Anwendungen / Techniken
70
Realisierung per Client Pull
> Manuelles Pull per Reload Button
> Periodisches Pull der gesamten Seite per HTML-Refresh
<META HTTP-EQUIV="Refresh" CONTENT="4;
URL=http://wwwava.informatik.uni-rostock.de">
> Periodisches Pull der gesamten Seite mittels JavaScript
function neuladen () {
window.location.reload();
}
window.setTimeout("neuladen()", 1000);
> Periodisches Pull von Daten und Aktualisierung der Seite mittels
JavaScript  kein kompletter Neuaufbau der Seite notwendig
Gero Mühl
Webbasierte Anwendungen / Techniken
71
Realisierungen per Server-to-Client Push
> Serverseitige Callbacks
> Server ruft Methoden eines Java Applets auf
> Funktioniert z.B. mit Java RMI und CORBA IIOP
> (Unsichtbares) Applet setzt JavaScript-Kommandos ab
oder nutzt eigene GUI zur Darstellung
> Messaging
> Server schickt UDP-Pakete (Unicast oder Multicast) oder
Daten mittels TCP-Streams an ein Java Applet
> Pushlets
> Server schickt per HTTP-Streaming JavaScriptKommandos an den Client in einen unsichtbaren Frame
Gero Mühl
Webbasierte Anwendungen / Techniken
72
Pushlets (www.pushlets.com)
> Bauen auf HTTP-Streaming auf
> HTTP-Verbindung wird dauerhaft offengehalten
> Über die Verbindung können weiterhin Daten gesendet werden
> Wird vornehmlich von Multimediaanwendungen genutzt
(QuickTime, Real Audio etc.)
> Nutzen Dokument mit zwei Frames
> Unsichtbarer Frame zum Empfang von JavaScript-Code
> Sichtbarer Frame zur Darstellung
> Nutzen optional zweiten unsichtbaren Frame als Ziel für
HTTP-GET/POST, um Daten zum Server zu übertragen
window.frames['GetFrame'].location =
'http://wwwava.informatik.unirostock.de/servlets/aktien.jsp?s=ibm&a=add'
Gero Mühl
Webbasierte Anwendungen / Techniken
73
Pushlets: Client Seite
<HTML><HEAD>
<script type="text/javascript">
var pageStart = "<HTML><HEAD></HEAD><BODY><H1>";
var pageEnd = "</H1></BODY></HTML>";
function push(content) {
window.frames['displayFrame'].document.open();
window.frames['displayFrame'].document.
writeln(pageStart+content+pageEnd);
window.frames['displayFrame'].document.close();
}
</script>
...
</HEAD>
<FRAMESET BORDER="0" COLS="*,0">
<FRAME SRC="display.html" NAME="displayFrame">
<FRAME SRC="pusher.jsp"
NAME="pushletFrame">
</FRAMESET>
</HTML>
Gero Mühl
Webbasierte Anwendungen / Techniken
74
Pushlets: Server Seite
<HTML>
<HEAD>...</HEAD>
<BODY>
<%
String jsPre =
"<scriptlanguage=JavaScript>parent.push('";
String jsPost = "')</script> ";
for (int i = 1; i < 10; i++) {
out.print(jsPre+"Page "+i+jsPost);
out.flush();
try {Thread.sleep(3000);}
catch (InterruptedException e) {}
}
out.print(jsPre+"DONE"+jsPost);
%>
</BODY>
</HTML>
Pusher.jsp
Gero Mühl
Webbasierte Anwendungen / Techniken
75
Java Applets
Gero Mühl
Webbasierte Anwendungen / Techniken
76
Java
> Objekt-orientierte Sprache mit Einfachvererbung von Klassen
sowie Mehrfachvererbung von Schnittstellen
> Java-Programme werden meist in Bytecode übersetzt und
von einer virtuellen Maschine (VM) mittels eines
Bytecode-Interpreters ausgeführt
⇒ Lediglich die VM muss auf dem Zielsystem implementiert sein
> Hierdurch wird (zu einem relativ hohen Grad)
Plattformunabhängigkeit sichergestellt
> Keine neue Idee, siehe z.B. p-code bei UCSD Pascal
> Evtl. Kompilierung in Maschinensprache, z.B. mittels
Just in Time Compiler (JITC)
> Gut geeignet für mobilen Code (mobile Agenten etc.)
Gero Mühl
Webbasierte Anwendungen / Techniken
77
Java-basierte Internet-Technologien
> Java Applets
> In Webseiten eingebettete Java-Programme
> Werden vom Java-fähigen Browser geladen und ausgeführt
> Java Servlets
>
>
>
>
CGI auf „Java-Art“
Erweitern Webserver um dynamische, Java-basierte Webseiten
Werden über URLs angesprochen und liefern Seiteninhalt
Werden vom Webserver instanziiert und ausgeführt
> Java Server Pages (JSP)
> Erweiterung der Servlet-Technologie zur einfachen Anfertigung
von Webseiten, die statischen und dynamischen Inhalt mischen
Gero Mühl
Webbasierte Anwendungen / Techniken
78
Java Applets
Ermöglichen Aktivität auf Client-Seite
Haben (meist) eine GUI (AWT, Swing, etc.)
Können (fast) die gesamte Java-API nutzen
Werden in Webseiten eingebettet und vom Browser in
einem Java Runtime Environment (JRE) ausgeführt
Java Runtime
Environment
>
>
>
>
Gero Mühl
JavaPlugin
1. HTML-Seite laden
2. Java Applet laden
Webbrowser
Webserver
Webbasierte Anwendungen / Techniken
79
Einbettung in HTML-Seite
> HTML-Tag <applet> (deprecated!)
<applet code="chess.class"
codebase="http://wwwava.inforamtik.unirostock.de/applets"
archive="games.jar" width="400" height="400">
<param name="color" value="0xFF0000">
Your Browser ignores the APPLET tag!
</applet>
> Alternativ: Nutzung des <object>-Tags
<object classid="java:chess.class"
codetype="application/java"
width="400" height="400">
<param name="color" value="0xFF000">
</object>
Gero Mühl
Webbasierte Anwendungen / Techniken
80
Klasse Applet
> Applets leiten von java.applet.Applet ab, welches von Panel,
Container und Component abgeleitet ist
> Beispiele für geerbte, überschreibbare Grafik-Methoden
public void paint(Graphics g)
// does nothing by default
// is overridden to do some drawing
public void update(Graphics g)
// default implementation clears area and
// calls paint()
// causes a lot of flickering
public void repaint()
// called by the Applet itself
// to trigger call of update()
> Methoden zur Ereignisbehandlung (Listener-Modell), z.B.
public void addMouseListener(MouseListener l)
public void removeMouseListener(MouseListener l)
protected void processMouseEvent(MouseEvent e)
Gero Mühl
Webbasierte Anwendungen / Techniken
81
Lebenszyklus eines Java Applets
start
destroy
init
stop
> Entsprechende Methoden können überschrieben werden
public
public
public
public
Gero Mühl
void
void
void
void
init()
start()
stop()
destroy()
Webbasierte Anwendungen / Techniken
82
Java Applet Beispiel
public class Simple extends Applet {
StringBuffer buffer = new StringBuffer();
public
public
public
public
void
void
void
void
init()
start()
stop()
destroy()
{
{
{
{
addItem("init... ");
addItem("start... ");
addItem("stop... ");
addItem("destroy...");
}
}
}
}
void addItem(String newWord) {
buffer.append(newWord);
repaint();
}
public void paint(Graphics g) {
g.drawString(buffer.toString(), 5, 15);
}
}
Gero Mühl
Webbasierte Anwendungen / Techniken
83
Applet-spezifische Methoden
> Häufig genutzte Applet-spezifische Methoden
public String[][] getParameterInfo()
public AppletContext getAppletContext()
public String getParameter(String name)
public URL getCodeBase()
public URL getDocumentBase()
public Image getImage(URL url)
public AudioClip getAudioClip(URL url)
public void showStatus(String msg)
Gero Mühl
Webbasierte Anwendungen / Techniken
84
Klasse JApplet
> Erweiterte, von Applet abgeleitet Klasse
> Abgestimmt auf die Nutzung der Java Swing-API
public class HelloWorld extends JApplet {
public void init() {
try {
SwingUtilities.invokeAndWait(new Runnable() {
public void run() { // Create GUI
add(new JLabel("Hello World"));
}
});
} catch (Exception e) {
System.err.println("Error creating GUI");
}
}
}
Gero Mühl
Webbasierte Anwendungen / Techniken
85
Sicherheit von Java Applets
> Ausführung geladener Applets birgt offensichtliche Risiken
> Java enthält einige Sicherheitsvorkehrungen
>
>
>
>
Keine Zeiger
Typsicherheit zur Laufzeit (nicht zum Zeitpunkt der Übersetzung)
Echte Feldgrenzen mit Überprüfung
Byte Code Verifier kann geladenen Byte Code verifizieren
> Applets unterliegen standardmäßig weiteren
Sicherheitsvorkehrungen
>
>
>
>
>
Gero Mühl
Kein Zugriff auf Dateien
Kommunikation nur mit dem Ursprungsrechner des Applets
Bestimmte Systemparameter können nicht ausgelesen werden
Applet-Fenster sehen anders aus, als normale Fenster
...
Webbasierte Anwendungen / Techniken
86
Java Remote Method Invocation
> Ermöglicht Methodenaufrufe auf Java Objekten, die sich in anderen
Java Virtual Machines (JVMs) befinden
> Verbirgt Komplexität entfernter Kommunikation hinter normalem
Methodenaufruf  Netzwerkkommunikation ist transparent
JVM 2
JVM 1
...
x = calculator.
add(7.5, 9.5);
...
7.5, 9.5
calculator
17
Remote-Objekt
Gero Mühl
Webbasierte Anwendungen / Techniken
87
Exemplarisches Anwendungsszenario
> Benutzer lädt Webseite mit eingebettetem TaschenrechnerApplet mittels HTTP von einem Webserver (1.)
> Applet übernimmt Interaktion per GUI mit dem Benutzer
> Eigentliche Funktionalität wird aber auf Serverseite erbracht
> Hierfür ruft das Applet die Methoden des Taschenrechners
mit den Eingaben des Benutzers per Java RMI auf (2.)
•
4
1
0
8
5
2
.
9
6
3
=
+
−
*
/
Webbrowser
Gero Mühl
1. HTTP
2. Java RMI
Webserver
Webbasierte Anwendungen / Techniken
88
Terminologie und Realisierung
> Server bietet Objekt zum entfernten Aufruf an
> Client ruft Methode auf Stub-Objekt auf
> Stub repräsentiert Remote-Objekt auf Clientseite (gleiches Interface!);
setzt Aufruf ab und nimmt Antwort entgegen
> Skeleton nimmt Aufruf entgegen, ruft das Objekt auf und setzt Antwort ab
> Stub und Skeleton übernehmen die Serialisierung/Deserialisierung der
Parameter sowie die Netzwerkkommunikation
....
x = calculator.
add(7.5, 9.5);
....
Stub
Skeleton
calculator
Netz
Client
Gero Mühl
Server
Webbasierte Anwendungen / Techniken
89
Java RMI Eigenschaften
> Bietet Verteilungs- und Lokationstransparenz für Clients
> Java Security-Mechanismen finden Anwendung
> Dynamisches Laden von Klassen (Bytecode) über das
Netzwerk bei Bedarf
> Garbage Collection unreferenzierter Objekte
> HTTP-Tunneling zur Überwindung von Firewalls möglich
Gero Mühl
Webbasierte Anwendungen / Techniken
90
Parameterübergabe
> Remote-Objekte werden per Referenz übergeben
> Empfänger wird Instanz der Stub-Klasse übergeben
> Übergabe anderer Objekte und primitiver Typen per Kopie
> Serialisierung/Deserialisierung: Umwandlung der Objekte in
Bytes zur Übertragung und vice versa durch Stub und Skeleton
> Vgl. Klassen ObjectOutputStream, ObjectInputStream
> Zu übergebende Objekte müssen serialisierbar sein, d.h., das
Markerinterface java.io.Serializable implementieren
> Bytecode von lokal nicht verfügbaren Klassen wird dynamisch
(z.B. über Netzwerk) nachgeladen
Gero Mühl
Webbasierte Anwendungen / Techniken
91
Vorgehensweise
1. Schnittstelle definieren und implementieren
(Remote-Schnittstelle und Remote-Klasse)
2. Stubs und Skeletons mit rmic kompilieren sofern für
Abwärtskompatibilität benötigt
> Skeletons seit Java 1.2 nicht mehr erforderlich
> Stubs seit Java 1.5 nicht mehr erforderlich
3. RMI Registry starten
4. Server implementieren, kompilieren und starten
5. Client implementieren, kompilieren und starten
Gero Mühl
Webbasierte Anwendungen / Techniken
92
Java RMI Beispiel: Klassen
_______Remote________
RemoteSchnittstelle
_________Calculator_______ _
double add(double a, double b)
throws RemoteException;
…
___SimpleCalculator_Stub___
double add(double a, double b);
…
_____RemoteServer_____
___UnicastRemoteObject___
_____SimpleCalculator______
double add(double a, double b);
…
RemoteKlasse
Stub-Klasse
Gero Mühl
Webbasierte Anwendungen / Techniken
93
Java RMI Registry
> Speichert Informationen über Remote-Objekte
(nicht persistent)
> Start der RMI Registry
> Von Kommandozeile: rmiregistry [port]
> Durch Server: LocateRegistry.createRegistry(port);
> Benutzt URL-basierte Namen, z.B.
[rmi://]myhost:port/someJavaobject
> Server registrieren Remote-Objekte
bind(),
unbind(),
rebind()
> Clients lösen Namen auf oder suchen Remote-Objekte
lookup(),
Gero Mühl
list()
Webbasierte Anwendungen / Techniken
94
Java RMI Beispiel – Schnittstelle
import java.rmi.*;
import java.rmi.server.*;
Marker-Schnittstelle
// Defining a Remote Interface
public interface Calculator extends Remote {
double add(double a, double b)
throws RemoteException;
…
}
Gero Mühl
Webbasierte Anwendungen / Techniken
95
Java RMI Beispiel – Remote-Klasse
import java.rmi.*;
import java.rmi.server.*;
// Implementing a Remote Interface
public class SimpleCalculator
extends UnicastRemoteObject
implements Calculator {
public SimpleCalculator
throws RemoteException {};
public double add(
double a, double b) {
return a + b;
}
…
}
Gero Mühl
UnicastRemoteObject-Klasse
> Bietet Unterstützung zur
Erzeugung und zum Export
von Remote-Objekten
> Default-Konstruktor exportiert
erzeugtes Objekt
> Nur exportierte Objekte können
eingehende Aufrufe entgegen
nehmen
> Objekte können auch manuell
exportiert werden
Webbasierte Anwendungen / Techniken
96
Java RMI Beispiel – Server
import java.rmi.*;
import java.rmi.server.*;
public class CalculatorServer {
public static void main(String[] args) {
// Set SecurityManager
System.setSecurityManager(new RMISecurityManager());
try {
// Create remote object
SimpleCalculator calc = new SimpleCalculator();
// Register remote object with RMI Registry
Naming.rebind("//myhost/Calculator", calc);
} catch (Exception e) { … }
// Process keeps running!
}
}
Gero Mühl
Webbasierte Anwendungen / Techniken
97
Java RMI Beispiel – Client Applet
import java.applet.*;
import java.rmi.*;
public class HelloApplet extends Applet {
Calculator calc;
public void init() {
try {
calc = (Calculator)Naming.lookup(
"//" + getCodeBase().getHost() +
"/Calculator");
} catch (Exception e) { … }
…
}
protected double add(double a, double b) {
return calc.add(a,b);
}
…
}
Gero Mühl
Webbasierte Anwendungen / Techniken
98
Java RMI Beispiel – Client Application
import java.rmi.*;
public class CalculatorClient {
public static void main(String args[]) {
// Set SecurityManager
System.setSecurityManager(new RMISecurityManager());
try {
// obtain URL for remote object and
String name = "//" + args[0] + "/Calculator";
// lookup remote object (stub is loaded
// automatically, if not available)
Calculator calc = (Calculator)Naming.lookup(name);
// call method on remote object
double r = calc.add(5,5);
} catch (Exception e) { … }
}
}
Gero Mühl
Webbasierte Anwendungen / Techniken
99
Dynamisches Nachladen von Bytecode
> Objekte werden vor ihrer Übertragung serialisiert und beim
Empfänger wieder deserialisiert, d.h., neu instanziiert
> Hierfür wird der Bytecode der jeweiligen Klasse benötigt
> Die Codebase enthält eine Liste kommaseparierter URLs, von
denen der Empfänger den Bytecode der serialisierten Klassen
nachlädt, sofern dieser nicht lokal verfügbar ist
> Z. B. notwendig, wenn eine unbekannte Subklasse eines
deklarierten Parameters oder Rückgabewertes übergeben wird
> RMI annotiert serialisierte Objekte mit der Codebase, die
beim Aufruf der JVM gesetzt wurde
java –Djava.rmi.server.codebase=http://myhost/mydir
Gero Mühl
Webbasierte Anwendungen / Techniken
100
Java RMI Security
> Java Security Manager
> Kontrolliert Zugang zu sicherheitskritischen Ressourcen wie dem
Dateisystem, dem Netzwerk, der GUI, …
> Kontrolliert Restriktionen für das dynamische Laden von Klassen
> Bei einem Applet erlaubt der Default Security Managers das
Herunterladen von Bytecode vom ursprünglichen Webserver
> Bei einer Java-Applikation (hier: Server und Client
Application) erlaubt der Default Security Manager
standardmäßig kein dynamisches Nachladen von Code
> In diesem Fall muss ein RMI Security Manager mit den
entsprechenden Sicherheitsrichtlinien installiert werden
> System.setSecurityManager(
new RMISecurityManager())
Gero Mühl
Webbasierte Anwendungen / Techniken
101
Sicherheitsrichtlinien
> Sicherheitsrichtlinien werden durch eine Policy-Datei
gesetzt
grant {
permission java.net.SocketPermission
"*:1024-65535", "connect,accept";
permission java.net.SocketPermission
"*:80", "connect";
};
> Werkzeug zum Erstellen einer Policy-Datei  policytool
> Setzen der Policy-Datei für eine JVM
java –Djava.security.policy=mypolicyfile …
Gero Mühl
Webbasierte Anwendungen / Techniken
102
LiveConnect
Gero Mühl
Webbasierte Anwendungen / Techniken
103
LiveConnect
> Ermöglicht die Kommunikation zwischen Java,
JavaScript und anderen Plugins
> Von Netscape entwickelt und ab Version 3.0 unterstützt
vom Netscape Navigator
> Wird mittlerweile auch von anderen Browsern unterstützt
(z.B. Internet Explorer, Firefox)
> Anwendungsbeispiele
> Von JavaScript aus auf Java-Klassen von Java-Applets
(Variablen, Methoden) zugreifen
> Mit JavaScript Applets und Plugins (z.B. Flash) steuern
> Von Java-Applets aus JavaScript-Methoden aufrufen und
auf Properties zugreifen
Gero Mühl
Webbasierte Anwendungen / Techniken
104
LiveConnect: Java  JavaScript
<APPLET CODE="MyApplet1.class" NAME="MyApplet"
WIDTH=150 HEIGHT=25 MAYSCRIPT></APPLET>
import netscape.javascript.*;
...
public class MyApplet1 extends Applet {
...
public writePage(String page) {
JSObject win = JSObject.getWindow(this);
win.eval("document.open();");
win.eval("document.write('"+page+"');");
win.eval("document.close();");
}
}
Gero Mühl
Webbasierte Anwendungen / Techniken
105
LiveConnect: JavaScript  Java
public MyApplet2 extends Applet {
public void setString(String s) {...}
...
}
<APPLET CODE="MyApplet2.class" NAME="MyApplet"
WIDTH=150 HEIGHT=25></APPLET>
<FORM NAME="form">
<INPUT TYPE="button" VALUE="Set"
onClick="document.MyApplet.setString(
document.form.str.value)">
<INPUT TYPE="text" SIZE="20" NAME="str">
</FORM>
Gero Mühl
Webbasierte Anwendungen / Techniken
106
Literatur
1. Standard ECMA-262 ECMAScript Language Specification 3rd edition
(December 1999)
>
http://www.ecma-international.org/publications/standards/Ecma-262.htm
2. Document Object Model Level 1
>
http://www.w3.org/TR/1998/REC-DOM-Level-1-19981001
3. LiveConnect Support for JavaSE 6u10
>
http://java.sun.com/javase/6/docs/technotes/guides/jweb/applet/liveconnect_sup
port.html
4. The Java Tutorials: Invoking JavaScript Code From an Applet
>
http://java.sun.com/docs/books/tutorial/deployment/applet/invokingJavaScriptFr
omApplet.html
5. The Java Tutorials: Invoking Applet Methods From JavaScript Code
>
http://java.sun.com/docs/books/tutorial/deployment/applet/invokingAppletMetho
dsFromJavaScript.html
6. Sun Microsystems, Inc. Java Remote Method Invocation Specification,
Revision 1.10, 2004.
>
http://java.sun.com/j2se/1.5/pdf/rmi-spec-1.5.0.pdf
7. Sun Microsystems, Inc. The Java Tutorials, Trail RMI
>
Gero Mühl
http://java.sun.com/docs/books/tutorial
Webbasierte Anwendungen / Techniken
107
Exemplarische Fragen zur Lernkontrolle
Serverseitige Techniken
1. Was sind Server Side Includes?
2. Nennen Sie Sie einige Anwendungsbeispiele von CGI!
3. Wie werden bei CGI der Requests des Clients bzw. die
Formulardaten dem CGI-Skript übergeben?
4. Welche Sicherheitsprobleme können durch das Anbieten von
CGI Scripts auftreten?
5. Wie ist eine PHP-Seite aufgebaut?
6. Erläutern Sie einige Anwendungsbeispiel von PHP!
Gero Mühl
Webbasierte Anwendungen / Techniken
108
Exemplarische Fragen zur Lernkontrolle
Clientseitige Techniken
1.
2.
3.
4.
5.
Was ist JavaScript?
Nennen Sie einige Anwendungsbeispiele!
Was versteht man unter Dynamic HTML?
Erläutern Sie das HTML-DOM!
Was versteht man unter AJAX und
welche Möglichkeiten bietet es?
6. Welche Vor- und Nachteile hat die Anwendung von AJAX?
7. Wozu kann man Java Applets einsetzen?
8. Wie werden Applets in HTML eingebunden?
9. Welchen Einschränkungen unterliegen Java Applets?
10. Was ist LiveConnect und wozu kann es verwendet werden?
11. Wie kann man Server-to-Client Push realisieren?
12. Wie funktioniert ein Pushlet?
Gero Mühl
Webbasierte Anwendungen / Techniken
109
Exemplarische Fragen zur Lernkontrolle
Java RMI
1. Wozu dient Java RMI?
2. Was sind die wesentlichen Schritte bei der
Nutzung von Java RMI?
3. Wie werden bei RMI Objekte als Parameter übergeben?
Gibt es hierbei einen Unterschied zwischen Remote Objects
und anderen Objekten?
4. Wie kann der Code einer Klasse zur Laufzeit beschafft
werden, wenn er nicht lokal vorliegt?
Gero Mühl
Webbasierte Anwendungen / Techniken
110
Vielen Dank für Ihre Aufmerksamkeit!
Univ.-Prof. Dr.-Ing. habil. Gero Mühl
[email protected]
http://wwwava.informatik.uni-rostock.de
Gero Mühl
Webbasierte Anwendungen / Techniken
111
Webbasierte Anwendungen
Java Enterprise Edition (JEE)
Univ.-Prof. Dr.-Ing. habil. Gero Mühl
Architektur von Anwendungssystemen (AVA)
Fakultät für Informatik und Elektrotechnik (IEF)
Universität Rostock
Überblick
> Einführung und Architektur
> Java Servlets
> Java Server Pages (JSP)
> Java Server Faces (JSF)
> Enterprise Java Beans (EJB)
Gero Mühl
Webbasierte Anwendungen / JEE
2
Einführung und Architektur
Gero Mühl
Webbasierte Anwendungen / JEE
3
Java Enterprise Edition (Java EE)
> Rahmenwerk für Design, Entwicklung und Deployment
mehrschichtiger verteilter Enterprise-Anwendungen
Aktuelle
Version
6
> Anwendungsschichten von Java EE
>
>
>
>
Client-Tier  Client-Rechner
Web-Tier
Java EE Application Server
Business-Tier
Enterprise Information System (EIS)-Tier  Datenbankserver
> Technologien von Java EE
> Webclients, Clientanwendungen und Applets  Client Tier
> Servlets, Java Server Pages (JSPs) und
Java Server Faces (JSF)  Web Tier
> Enterprise Java Beans (EJBs)  Business Tier
Gero Mühl
Webbasierte Anwendungen / JEE
4
Java EE Architektur
Java EE Application Server
Client
Client
Servlet
JSP
JSF
Gero Mühl
EJB
EJB
Client
Client Tier
RDBMS
TM
Legacy
EJB
Web Container
EJB Container
Enterprise
Information
Systems
Web Tier
Business Tier
EIS Tier
Webbasierte Anwendungen / JEE
5
Java Servlets
Gero Mühl
Webbasierte Anwendungen / JEE
6
Java Servlets
> Serverseitige Java-Programmschnipsel
> Servlet = Zusammenziehung von Server und Applet
> „Servlets sind für den Server das, was Applets für den
Client (Webbrowser) sind“
Aktuelle
> „CGI auf Java-Art“
Version
3.0
> Plattformunabhängige Alternative zu CGI
> Einfacher zu schreiben
> Schneller und sicherer in der Ausführung
> Java-API steht zur Verfügung (außer GUI)
Gero Mühl
Webbasierte Anwendungen / JEE
7
Servlet Container
> Fungiert als Laufzeitumgebung
> Stellt Dienste bereit
>
>
>
>
>
>
Gero Mühl
Lifecycle Management
Session Management
Authentifizierung und Autorisierung
Transaktionen und Persistenz
Verwaltung von Ressourcen
…
Webbasierte Anwendungen / JEE
8
Architektur
> Servlets werden über
Webserver mittels URL
angesprochen
> Webserver übergibt
HTTP-Request mit
„passender“ URL an
Servlet-Container, der
das anzusprechende
Servlet instanziiert
WebBrowser
1. HTTP-Request
> Servlet wird mit
HTTP-Request aufgerufen
und liefert HTTP-Response
Gero Mühl
2. HTTP-Response
Apache
WebServer
Connector
Apache JServ
Protocol (AJP)
Servlet
Tomcat
ServletContainer
Webbasierte Anwendungen / JEE
9
Schnittstellen und Klassen
______javax.servlet.Servlet______
void init(ServletConfig config)
void service(ServletRequest req,
ServletResponse res)
void destroy()
Interface
Class
____javax.servlet.ServletRequest____
_javax.servlet.http.HttpServletRequest_
___javax.servlet.GenericServlet___
___javax.servlet.ServletResponse___
__javax.servlet.http.HTTPServlet__
doGet(HttpServletRequest req,
HttpServletResponse res)
doPost(HttpServletRequest req,
HttpServletResponse res)
______MySimpleServlet________
Gero Mühl
_javax.servlet.http.HttpServletResponse_
Vom Servlet-Entwickler
zu implementieren
Webbasierte Anwendungen / JEE
10
Schnittstelle Servlet / Klasse GenericServlet
init
> Interface Servlet
>
>
>
>
Von jeder Servlet-Klasse zu implementieren
Klassenlader des Containers lädt Servlet-Klasse
Container delegiert Client-Anfrage an Servlet
Abarbeitung eigenem Thread
> Wichtige Methoden der Schnittstelle
service
destroy
> void init(ServletConfig config)
> Einmaliger Aufruf durch Container zur Initialisierung
> void service(ServletRequest req, ServletResponse res)
> Verarbeiten einer Anfrage und Erzeugen der zugehörigen Antwort
> void destroy()
> Einmaliger Aufruf durch Container am Lebensende
zur Freigabe von Ressourcen
> Klasse GenericServlet unabhängig vom verwendeten Protokoll
> Eigenes Servlet von GenericServlet ableiten
> service-Methode überschreiben
Gero Mühl
Webbasierte Anwendungen / JEE
11
Klasse HTTPServlet
> Klasse javax.servlet.http.HttpServlet
> Verarbeitung von HTTP-Anfragen durch doMethod()-Methoden,
die den Methoden des HTTP-Protokolls entsprechen
> doGet(), doPost(), doHead(), doPut(), doDelete(),
doOptions() und doTrace()
> doMethod(HttpServletRequest req,
HttpServletResponse res)
> Parameter sind HTTP-spezifische Request- / Response-Objekte
> Vorgehen
> Eigenes Servlet von HttpServlet ableiten
> Benötigte doMethod()-Methode(n) überschreiben
Gero Mühl
Webbasierte Anwendungen / JEE
12
Klasse HttpServletRequest
> Repräsentiert HTTP-Request des Clients
> Methoden
> String getHeader(String field)
> Abfragen von HTTP-Header-Feldern
> String getQueryString()
> Liefert Query String bei GET-Requests
> String getParameter(String name)
> Parameter aus GET- oder POST-Request holen
> BufferedReader getReader()
ServletInputStream getInputStream()
> Zum Lesen von Zeichen bzw. Binärdaten aus dem Body
> Cookie[] getCookies()
> Liefert alle Cookies des Requests
> …
Gero Mühl
Webbasierte Anwendungen / JEE
13
Klasse HttpServletResponse
> Repräsentiert HTTP-Response für den Client
> Methoden
> void setHeader(String field, String value)
> Setzen beliebiger HTTP-Header-Felder
> Für die wichtigsten Header-Felder existieren eigene Methoden
> void setContentType(String type)
> Setzt Typ des Bodys der Response (z.B. auf text/html)
> void sendError(int sc, String msg)
> Fehlermeldung senden (z.B. 404, „Seite nicht gefunden“)
> PrintWriter getWriter()
ServletOutputStream getOutputStream()
> Zum Schreiben von Zeichen bzw. Binärdaten
> …
Gero Mühl
Webbasierte Anwendungen / JEE
14
Servlet Beispiel
Annotation kennzeichnet Klasse
als Servlet und gibt URL an
HttpServlet erweitern und benötigte Methoden überschreiben
@WebServlet("/hello")
public class MySimpleServlet extends HttpServlet {
@Override
public void doGet(HttpServletRequest req,
HttpServletResponse res)
throws ServletException, IOException {
res.setContentType("text/html");
PrintWriter out = res.getWriter();
out.println("<html><head>“);
out.println("<title>Response</title></head>");
out.println("<body><h1>HelloWorld</h1>");
out.println("</body></html>");
out.close();
HTML-Ausgabe erzeugen
}
}
Gero Mühl
Webbasierte Anwendungen / JEE
15
Servlet Beispiel 2
<FORM METHOD="POST" ACTION="/servlet/FormServlet">
<INPUT NAME="firstname" TYPE="text" SIZE="30">
<INPUT NAME="lastname" TYPE="text" SIZE="30">
<INPUT NAME="age"
TYPE="text" SIZE="3">
<INPUT TYPE="SUBMIT">
</FORM>
HTML-Formular
public void doPost(HttpServletRequest request,
HttpServletResponse response)
throws ServletException, IOException {
firstname = request.getParameter("firstname");
lastname = request.getParameter("lastname");
ageString = request.getParameter("age");
…
Servlet
}
Formularparameter
aus Request extrahieren
Gero Mühl
Webbasierte Anwendungen / JEE
16
Deployment einer Web-Anwendung
> Eine Web-Applikation besteht typischerweise aus einem
einzelnem Web Archive (.WAR Datei)
> ist im Prinzip eine JAR-Datei
> bildet einen Applikationskontext
> Struktur des Archivs
index.html
META-INF/
MANIFEST.MF
WEB-INF/
web.xml
lib/
classes/
ava/
Gero Mühl
Metainformationen über
den Inhalt des Archivs
Optionaler
Deployment Descriptor
Bibliotheken
Klassen
MySimpleServlet.class
Webbasierte Anwendungen / JEE
17
Servlets und Threads
> Zusammenspiel von Container und Servlets
> Container bearbeitet jede Client-Anfrage in der Regel
in einem eigenen Thread
> Er hält meist jedoch nur eine Servlet-Instanz pro Servlet-Klasse
vor, die sich die Threads teilen müssen
> Ohne weitere Vorkehrungen sind Probleme bei gleichzeitigem
Zugriff mehrerer Threads auf ein Servlet zu erwarten
> Lösungen für durch Multithreading verursachte Probleme
> Servlets zustandslos implementieren
> Methoden synchronisieren  Schlüsselwort synchronized
> Kritische Auswirkungen auf Leistung möglich
> Schnittstelle javax.servlet.SingleThreadModel
implementieren (deprecated)  immer nur ein Request
gleichzeitig auf einer Servlet-Instanz aktiv
Gero Mühl
Webbasierte Anwendungen / JEE
18
Servlets Sessions
> Sessions repräsentieren Client/Server-Beziehung
> Servlet Container bietet Session Management als Service an
> Verwendet Cookies wenn möglich, sonst URI Rewriting
> Sessions sind im gesamten ServletContext sichtbar
> Klasse javax.servlet.http.HttpSession
> Abstrahiert von Cookies und URI Rewriting
> Dient als Container für beliebige serialisierbare Objekte, die auf dem
Server liegen  Client bekommt nur eine Identifikation
> HttpServletRequest#getSession()
> Erzeugt neue Session, falls noch keine vorhanden
> Wiederholte Aufrufe liefern existierende Session
> Anwendungsdaten werden als Attribute an Sessions gebunden
> session.setAttribute(name, value)
> value = session.getAttribute(name)
Gero Mühl
Webbasierte Anwendungen / JEE
19
Servlets Sessions
> Sessions „fressen“ Betriebsmittel (z.B. Speicher)
> Explizite Invalidierung der Session
> session.invalidate()
> Globaler Timeout in web.xml einstellbar
> Einstellbarer Per-Session-Timeout
> session.setMaxInactiveTimeout()
Gero Mühl
Webbasierte Anwendungen / JEE
20
Servlet Cookie API
> Klasse javax.servlet.http.Cookie repräsentiert
einen Cookie
> Konstruktor
> public Cookie(String name, String value)
> Setzen im Response Header (HTTPServletRequest)
> response.addCookie(userCookie);
> Lesen aus Request Header (HTTPServletRequest)
> Cookie[] cookies = request.getCookies();
Gero Mühl
Webbasierte Anwendungen / JEE
21
Getter/Setter-Methoden von
javax.servlet.http.Cookie
> boolean isHttpOnly()
void setHttpOnly(boolean only)
> Cookie nicht an clientseitige Scripts übergeben (Setzen und Testen)
> boolean getSecure()
void setSecure(boolean flag)
> Cookie darf nur per HTTPS übertragen werden (Setzen und Testen)
> String getName()
void setName(String name)
> String getValue()
void setValue(String value)
> String getDomain()
void setDomain(String domain)
Gero Mühl
Webbasierte Anwendungen / JEE
22
Ereignisse
> Ereignisbehandlung folgt dem Listener-Modell
 Tritt ein Ereignis auf, so wird der zugehörige Listener aufgerufen
> Definition von Listenern mittels Annotationen, im Deployment
Descriptor oder explizite Registrierung mittels einer der
addListerer-Methoden im ServletContext
@WebListener
public class SessionCounter
implements HTTPSessionListener {
privat int sessions = 0;
@Override
void sessionCreated(HttpSessionEvent se) {
@Override
void sessionDestroyed(HttpSessionEvent se)
int getActiveSessions() { return sessions;
}
Gero Mühl
Listener-Definition
durch Annotation
sessions++; }
{sessions-- ; }
}
Webbasierte Anwendungen / JEE
23
Ereignisse: Klassen und Schnittstellen
_____java.util.EventListener_____
_____HttpSessionListener_____
void sessionCreated(
HttpSessionEvent hse)
void sessionDestroyed(
HttpSessionEvent hse)
____HttpSessionAttributeListener_____
void attributeAdded (
HttpSessionBindingEvent hsbe)
void attributeRemoved(
HttpSessionBindingEvent hsbe)
void attributeReplaced(
HttpSessionBindingEvent hsbe)
______HttpSessionEvent______
HttpSession getSession()
Gero Mühl
Implementiert von
Attribut-Objekten
_HttpSessionActivationListener_
void sessionDidActivate(
HttpSessionEvent hse)
void sessionWillPassivate(
HttpSessionEvent hse)
_____HttpSessionBindingListener_____
void valueBound(
HttpSessionBindingEvent hsbe)
void valueUnbound(
HttpSessionBindingEvent hsbe)
Implementiert von
Attribut-Objekten
____HttpSessionBindingEvent____
HttpSession getSession()
String getName()
Object getValue()
Webbasierte Anwendungen / JEE
24
Ereignisse: Sessions
> HttpSessionActivationListener-Interface
void sessionDidActivate(HttpSessionEvent hse)
void sessionWillPassivate(HttpSessionEvent hse)
> Implementiert von Attribut-Objekten, die benachrichtigt werden wollen,
wenn zugeordnete Session aktiviert oder passiviert wird
> HttpSessionListener-Interface
void sessionCreated(HttpSessionEvent hse)
void sessionDestroyed(HttpSessionEvent hse)
> Implementiert von Objekten, die benachrichtigt werden wollen, wenn
eine Session erzeugt oder zerstört wird
> HttpSessionEvent-Klasse
HttpSession getSession()
Gero Mühl
Webbasierte Anwendungen / JEE
25
Ereignisse: Session-Attribute
> HttpSessionBindingListener-Interface
void valueBound(HttpSessionBindingEvent hsbe)
void valueUnbound(HttpSessionBindingEvent hsbe)
> Implementiert von Attribut-Objekten, die benachrichtigt werden wollen,
wenn sie gebunden oder entfernt werden
> HttpSessionAttributeListener-Interface
void attributeAdded(HttpSessionBindingEvent hsbe)
void attributeRemoved HttpSessionBindingEvent hsbe)
void attributeReplaced(HttpSessionBindingEvent hsbe)
> Implementiert von Objekten, die benachrichtigt werden wollen, wenn ein
Attribut einer beliebigen Session hinzugefügt, entfernt oder ersetzt wird
> HttpSessionBindingEvent-Klasse
HttpSession getSession()
String getName()
Object getValue()
Gero Mühl
Webbasierte Anwendungen / JEE
26
Asynchrone Request-Verarbeitung
> Bei synchroner Request-Verarbeitung muss der Request
abgeschlossen sein, wenn doMethod() returniert
> Langlaufende Aktionen blockieren ausführenden Thread
> Threads werden knapp
> Degradierung der Leistung
> Asynchrone Request-Verarbeitung
> Ermöglicht aus doMethod() zurückzuspringen, ohne den
Request abzuschließen
> Spätere Wiederaufnahme der Ausführung des Requests,
um diesen zum Abschluss zu bringen (evtl. mehrfach)
> Weitere Anwendungsmöglichkeit: Server-Side Push
> Auch bekannt als Reverse Ajax, Comet, …
Gero Mühl
Webbasierte Anwendungen / JEE
27
Asynchrone Request-Verarbeitung
> Servlet für asynchrone Requests konfigurieren
> @WebServlet("/chat", asyncSupported=true)
> Request in asynchronen Modus versetzen
> AsyncContext ac = req.startAsync();
> Request oder Response aus
asynchronem Kontext holen
> ac.getRequest();
> ac.getResponse();
> Request abschließen und Response schließen
> ac.complete();
Gero Mühl
Webbasierte Anwendungen / JEE
28
Servlet Chat Beispiel
Speichert alle
Client-Requests
@WebServlet("/chat", asyncSupported=true)
public class MyServlet extends HttpServlet {
private static final Queue<AsyncContext> acQueue =
new ConcurrentLinkedQueue<AsyncContext>();
Speichert die
Chat-Nachrichten
private static final BlockingQueue<String> messageQueue =
new LinkedBlockingQueue<String>();
@Override
public void init(ServletConfig config) throws ServletException {
Runnable notifierRunnable = new Runnable() {
Chat-Nachricht aus Queue
public void run() {
entnehmen und an alle
while (true) {
Requests weitergeben
message = messageQueue.take();
for (AsyncContext ac : acQueue) {
PrintWriter acWriter = ac.getResponse().getWriter();
acWriter.println(message); acWriter.flush();
}}}
Thread starten, der
new Thread(notifierRunnable).start();
Chat-Nachrichten an
}
Clients weitergibt
Gero Mühl
Webbasierte Anwendungen / JEE
29
Servlet Chat Beispiel
@Override
public void doGet (HttpServletRequest req,
HttpServletResponse res)
throws ServletException, IOException {
req.setAsyncTimeout(10 * 60 * 1000);
AsyncContext ac = req.startAsync();
acQueue.add(ac);
Request in asynchronen Modus
}
schalten und in Queue speichern
@Override
public void doPost (HttpServletRequest req,
HttpServletResponse res)
throws ServletException, IOException {
String message = req.getParameter("message“);
messageQueue.put(message);
}
}
Gero Mühl
Neue Chat-Nachricht entgegen
nehmen und in Queue speichern
Webbasierte Anwendungen / JEE
30
Literatur
1. Sun Microsystems, Inc., Java Servlet Specification,
Version 3.0
> http://java.sun.com/products/servlet
Gero Mühl
Webbasierte Anwendungen / JEE
31
Fragen?
Gero Mühl
Webbasierte Anwendungen / JEE
32
Java Server Pages (JSP)
Gero Mühl
Webbasierte Anwendungen / JEE
33
Java Server Pages (JSP)
> Erweiterung der Servlet Technologie
> Ermöglicht „komfortablere“ Notation eines Servlets
> Gemischte Seitenbeschreibung
Aktuelle
Version
2.2
> Statische Inhalte (Static Template Code)
> Dynamische Inhalte (JSP Elements)
> JSP umfasst Direktiven, Scripting und Aktionen
> JSP wird in Servlet-Klasse kompiliert!
Java
Server
Page
Gero Mühl
Page Compilation
Java
Servlet
Webbasierte Anwendungen / JEE
34
Model 1 Architecture
Nur für einfachste
Anwendungen
sinnvoll!
> JSP
> Behandelt Request
> Übernimmt Steuerung
> Generiert Response
> Datenzugriff wird in Java Beans ausgelagert
1.
4.
WebBrowser
JSP
2.
3.
Java Bean
Gero Mühl
DB
Webbasierte Anwendungen / JEE
35
Model 2 Architecture (MVC Pattern)
Für nichttriviale
Anwendungen
vorzuziehen!
> Serverseitige Realisierung des MVC Patterns
> Model: Java Beans, View: JSP, Controller: Servlet
> Servlet leitet Request an passendes JSP weiter:
ServletContext sc = getServletContext();
RequestDispatcher rd =
sc.getRequestDispatcher(forwardURL);
rd.forward(req, res);
1.
5.
WebBrowser
Servlet
2.
3.
JSP
Gero Mühl
Java Bean
4.
DB
Webbasierte Anwendungen / JEE
36
JSP Beispiel – HTML + Java Code
<html>
<head>
<title>JSP Beispiel</title>
</head>
<body>
Datum und Zeit:<%= new java.util.Date()%><br/>
<% for (int i=0; i<5; i++) { %>
Das Quadrat von <%= i %> ist <%= i*i %><br/>
<% } %>
</body>
In dieser Syntax ist ein JSP kein
</html>
valides HTML-Dokument! Es ist
aber möglich, X(HT)ML-konforme JSPs
in einer alternativen Syntax zu erstellen.
Gero Mühl
Webbasierte Anwendungen / JEE
37
JSP Direktiven
> <%@ directive {attribute="value"}* %>
> page-Direktive:
<%@ page … %>
> Importieren von Bibliotheken
<%@ page import="java.util.*" %>
> Einstellungen für die Seite festlegen
<%@ page language="java" %>
> HTTP-Session erzeugen ja/nein
<%@ page session="true" %>
> Von eigener Servlet-Basisklasse ableiten
<%@ page extends="myservlet" %>
> Fehlerseite festlegen
<%@ page errorPage="error.jsp" %>
> Ist Fehlerseite
<%@ page isErrorPage="true" %>
Gero Mühl
Webbasierte Anwendungen / JEE
38
JSP Direktiven
> include-Direktive:
<%@ include … %>
> Einbindung statischer Dokumente
<%@ include file="companyBanner.html" %>
> taglib-Direktive:
<%@ taglib … %>
> Erweiterung der Menge der vorhandenen Actions
<%@ taglib uri="/taglib" prefix="mytaglib"
%>
<mytaglib:cooltag>
...
</mytaglib:cooltag>
Gero Mühl
Webbasierte Anwendungen / JEE
39
JSP Scripting
> Deklarationen: <%! declarations %>
> Definieren und überschreiben von Methoden,
z.B. jspInit() and jspDestroy()
<%! public void jspInit()
{ ... } %>
<%! public void jspDestroy() { ... } %>
> Scriptlets: <% java code fragment %>
> Wird in den Rumpf der service-Methode des generierten
Servlets eingefügt
<% java.util.Date date = new java.util.Date();
out.println(date); %>
> Ausdrücke: <%= expression %>
> Ausdruck auswerten und Ergebnis in String umwandeln, der
dann in die Seite eingefügt wird
<%= date %>
Gero Mühl
Webbasierte Anwendungen / JEE
40
JSP Deklarationen
Achtung: Mehrere Threads
<HTML>
können gleichzeitig auf einer
<HEAD>
JSP-Instanz arbeiten!
<TITLE>Current Date</TITLE>
</HEAD>
<BODY>
Member-Deklaration
<%!
double number = Math.random();
Date computeDate() {
return new Date();
}
Methoden-Deklaration
%>
The time is now <%= computeDate() %>
Random number is <%= number %>
</BODY>
</HTML>
Gero Mühl
Webbasierte Anwendungen / JEE
41
JSP Implizite Objekte
Name
> request
> response
> session
> out
> application
> config
> page
> exception
Typ
> HttpServletRequest
> HttpServletResponse
> HttpSession
> JspWriter
> ServletContext
> ServletConfig
> äquivalent zu this
> java.lang.Throwable
> Innerhalb von Scriptlets und Ausdrücken kann
auf diese Objekte zugegriffen werden, z.B.
<% out.println(request.getRemoteHost()); %>
Gero Mühl
Webbasierte Anwendungen / JEE
42
JSP Sessions
Formular sendet
Daten an JSP.
<HTML><BODY>
<FORM METHOD="POST" ACTION="Save.jsp">
What's your name?
<INPUT TYPE="TEXT" NAME="username" SIZE="20">
<INPUT TYPE="TEXT" NAME="email" SIZE="20">
<INPUT TYPE="SUBMIT">
</FORM>
Form.html
</BODY></HTML>
<%
String name = request.getParameter( "username" );
session.setAttribute( "username", name );
String email = request.getParameter( "email" );
session.setAttribute( "email", email );
Save.jsp
%>
Gero Mühl
Webbasierte Anwendungen / JEE
43
JSP Actions
> Starten zusätzliche Funktionalität zur Laufzeit
> Syntax
> mit Body
> ohne Body
<jsp:tag>body</jsp:tag>
<jsp:tag {attribute="name"}*/>
> Einfügen einer HTML- oder JSP-Seite
<jsp:include page="rurl" flush="true"/>
> Weiterleiten auf andere Seite
<jsp:forward page="errorPage.jsp"/>
<jsp:forward page="<%= ... %>"/>
Gero Mühl
Webbasierte Anwendungen / JEE
44
Java Beans
> Komponentenmodell für Java
> Ursprünglich GUI-Komponenten
> Heute beliebige Java-Klasse, die Konventionen gehorcht
> Abstraktionsschicht für Logik und Datenzugriff
> Konventionen
> Parameterloser Konstruktor vorhanden
> Zugriff auf Properties mit Getter- und Setter-Methoden
> Instanzen sind serialisierbar  Persistenz
> Implementieren die Schnittstelle java.io.Serializable
Gero Mühl
Webbasierte Anwendungen / JEE
45
JSP <useBean>-Tag
public class UserData {
public void setUsername(String value){username = value;}
public void setEmail(String value) {email = value;}
public String getUsername() {return username;}
public String getEmail() {return email;}
Bean
}
<jsp:useBean id="user" class="UserData" scope="session"/>
<jsp:setProperty name="user" property="*"/>
Save.jsp
</jsp:useBean>
<HTML><BODY>
<jsp:useBean id="user" class="UserData" scope="session"/>
Name: <%= user.getUsername() %><BR>
Email: <%= user.getEmail() %><BR>
</jsp:useBean>
</BODY></HTML>
Gero Mühl
Load.jsp
Webbasierte Anwendungen / JEE
46
JSP <useBean>-Tag
> Aufruf einer JavaBean
<jsp:useBean id="user" class="userData"
scope="session">
> Ermitteln und Ändern von Eigenschaften einer JavaBean
<jsp:getProperty name="user" property="name"/>
<jsp:setProperty name="user" property="name"
value="Peter"/>
> Mapping eines bzw. aller gleichnamigen
Request-Parameter
<jsp:setProperty name="user" property="name"
param="nachname"/>
<jsp:setProperty name="user" property="*"/>
Gero Mühl
Webbasierte Anwendungen / JEE
47
JSP XML View
Type of Element
Direktiven
Deklarationen
Ausdrücke
Codefragmente
Gero Mühl
Non-XML Syntax
XML Tag
<%@ directive %>
<jsp:directive.page ... />
<jsp:directive.include ... />
<%! declarations %>
<jsp:declaration>
…
</jsp:declaration>
<%= expression %>
<jsp:expression>
…
</jsp:expression>
<% code fragment %>
<jsp:scriptlet>
…
</jsp:scriptlet>
Webbasierte Anwendungen / JEE
48
JSP Standard Tag Library (JSTL)
> Nicht Teil der JSP-Spezifikation, sondern eigene Spezifikation
> Ersetzt Scriptlets bei einfachen Aufgaben
> Iteration: <c:foreach>
> Bedingungen: <c:if>
> Alternativen: <c:choose>, <c:when>, <c:otherwise>
Aktuelle
Version
1.2
<%@ page isELIgnored="false" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<html>
...
Your shopping cart:
<table>
<c:forEach var="product" items="${cart}">
<tr><td>${product}</td></tr>
</c:forEach>
</table>
...
</html>
Gero Mühl
Webbasierte Anwendungen / JEE
49
JSP Expression Language (EL)
Aktuelle
Version
2.2
<html>
...
Selected CPU has TDP:
<%= ((Computer)req.getAttribute("computer")).getCPU().getTDP() %> W
...
Scriptlet
</html>
<html>
...
<jsp:useBean id="computer" class="Computer" scope="request" />
Selected CPU has TDP:
<jsp:getProperty name="computer" property="CPU" /> W
...
</html>
JSTL
<html>
...
Your CPU has TDP: ${computer.CPU.TDP} W
...
</html>
Geht wegen fehlender Unterstützung
für Verschachtelung nicht
EL
Gero Mühl
Webbasierte Anwendungen / JEE
50
Literatur
1. Sun Microsystems, Inc., Java Server Pages
Specification, Version 2.2, 2009
> http://java.sun.com/products/jsp
2. Sun Microsystems, Inc., Java Server Pages Standard
Tag Library, Version 1.2, 2006
> http://java.sun.com/products/jsp/jstl
3. Sun Microsystems, Inc., Java Server Pages Expression
Language Specification, Version 2.2, 2009
> http://java.sun.com/products/jsp
Gero Mühl
Webbasierte Anwendungen / JEE
51
Fragen?
Gero Mühl
Webbasierte Anwendungen / JEE
52
Java Server Faces (JSF)
Gero Mühl
Webbasierte Anwendungen / JEE
53
Java Server Faces (JSF)
> Serverseitiges Komponentenmodell für die
Entwicklung Java-basierter Webapplikationen
Aktuelle
Version
2.0
> Baut auf Java Servlets auf
> Eigenschaften
>
>
>
>
>
>
>
Framework für interaktive Web-Anwendungen
Wiederverwendbare Komponenten für Benutzeroberfläche
Datenbindung zwischen Komponenten und Java Beans
Event-Modell bindet Browser-Events an Servermethoden
Konfigurierbare Ablaufsteuerung (Navigation)
AJAX-Support
„Zusammenklicken“ mittels geeigneter Tools möglich
> Zentrales Konzept: Facelets
> Definieren XML-basierte View Templates
> Erzeugen XHTML-Ausgabe
Gero Mühl
Webbasierte Anwendungen / JEE
54
JSF Beispiel
<!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“
xmlns:h="http://java.sun.com/jsf/html">
<h:head>…</h:head>
<h:body>
<h:form>
<fieldset>
<legend>User Login</legend>
User ID:
<h:inputText value="#{userBean.userId}"/><br/>
Password:
<h:inputSecret value="#{userBean.password}"/><br/>
<h:commandButton value="Show Start Page"
action="#{userBean.showStartPage}"/>
</fieldset>
</h:form>
login.xhtml
</h:body>
Button wird mit
wird über URL
</html>
Bean assoziiert
Gero Mühl
login.jsf
angesprochen
Webbasierte Anwendungen / JEE
55
JSF Beispiel
Bean wird durch
Annotation deklariert
@ManagedBean
public class UserBean implements Serializable {
private String userId, password;
private User user;
public
public
public
public
public
public
String getUserId() { return(userId); }
void setUserId(String userId) { … }
String getPassword() { … }
void setPassword(String password) { … }
User getUser() { … }
void setUser() { … }
public String showStartPage() {
user = UserLookup.getUser(userId);
if (user == null)
return("wrong-userid");
if (!user.password.equals(password)) {
return("wrong-password");
}
return("show-start");
}
}
Gero Mühl
Rückgabewert bestimmt
Seitennavigation
Webbasierte Anwendungen / JEE
56
JSF Beispiel
> show-start.xhtml
<h1>Welcome</h1>
<ul>
<li>First name: #{userBean.user.firstName}</li>
<li>Last name: #{userBean.user.lastName}</li>
<li>ID: #{userBean.user.id}</li>
</ul>
> wrong-userid.xhtml
<p>No user found with id "#{userBean.userId}“</p>
> wrong-password.xhtml
<p>Wrong password.
Gero Mühl
Please try again.</p>
Webbasierte Anwendungen / JEE
57
faces-config.xml
<?xml version="1.0"?>
Aktuell dargestellte Seite
<faces-config version="2.0">
<navigation-rule>
<from-view-id>/login.xhtml</from-view-id>
<navigation-case>
<from-outcome>wrong-userid</from-outcome>
<to-view-id>/page-for-wrong-userid.jsp</to-view-id>
</navigation-case>
<navigation-case>
<from-outcome>wrong-password</from-outcome>
<to-view-id>/page-for-wrong-password.jsp</to-view-id>
</navigation-case>
<navigation-case>
<from-outcome>show-start</from-outcome>
<to-view-id>/start-page.jsp</to-view-id>
</navigation-case>
Rückgabewert der Bean-Methode und
</navigation-rule>
zugeordnete, darzustellende Seite
</faces-config>
Gero Mühl
Webbasierte Anwendungen / JEE
58
JSF Beispiel 2
<h:form id="bookForm">
<fieldset>
<legend>Book Info</legend>
ISBN Number of Book:
<h:inputText value="#{bookBean.isbn}"/><br/>
<h:commandButton value="Show Book Information"
action="#{bookBean.showBookInfoPage}">
<f:ajax execute="@form"
render="bookForm:ajaxMessage"/>
</h:commandButton>
Formulardaten zum Server schicken
<br/>
und angegebenes Element aktualisieren
<h:outputText
value="#{bookBean.message}"
id="ajaxMessage"/>
</fieldset>
Zu aktualisierendes
</h:form>
Element
Gero Mühl
Webbasierte Anwendungen / JEE
59
JSF Beispiel 2
@ManagedBean(name="bookBean")
@SessionScoped
public class ARX27 implements Serializable {
private String message;
private String isbn;
public String getmessage() {…}
public void setMessage(String message) {…}
public String getISBN() {…}
public void setISBN(String message) {…}
…
public String showBookInfoPage() {
Book book = db.lookupBook(isbn);
Durch Aktualisierung
if (book != null)
anzuzeigende Nachricht
message = book.getInfo();
else
message = "Sorry, book not found!";
return null;
}
…
}
Gero Mühl
Rückgabewert null, da
gleiche Seite
Webbasierte Anwendungen / JEE
60
Facelet Templating
> Ermöglicht die Wiederverwendung von Facelet-Code
> template-file-1.xhtml
<h:body>Content shared by all client files
<h2><ui:insert name="title">Default Title</ui:insert></h2>
More content shared by all clients
<ui:insert name="body">Default Body</ui:insert>
</h:body>
> client-file-1.xhtml
<ui:composition template="/templates/template-1.xhtml">
<ui:define name="title">Title text</ui:define>
<ui:define name="body">
Content to go in "body" section of template
</ui:define>
</ui:composition>
Gero Mühl
Webbasierte Anwendungen / JEE
61
Literatur
1. Sun Microsystems, Inc.,
Java Server Faces Specification, Version 2.0, 2009
> http://java.sun.com/javaee/javaserverfaces
2. David Geary, Cay Horstmann,
Core JavaServer Faces (3rd Edition),
Prentice Hall, 2010
Gero Mühl
Webbasierte Anwendungen / JEE
62
Fragen?
Gero Mühl
Webbasierte Anwendungen / JEE
63
Enterprise Java Beans (EJBs)
Gero Mühl
Webbasierte Anwendungen / JEE
64
Enterprise Java Beans (EJBs)
> Server-side component model for multi-tier applications
> Not to be confused with Java Beans
Current
Version
3.1
> Client-side component model for desktop GUI and web components
> EJBs run in a container which servers as a runtime environment
within the application server
> Container provides transparent support for
>
>
>
>
>
>
Lifecycle Management
Naming
Persistence Management
Transactions
Security Mechanisms
…
> Bean developer can concentrate on solving business problems
> Greatly “simplifies” the development of large, distributed applications
Gero Mühl
Webbasierte Anwendungen / JEE
65
Two Types of EJBs
> Session beans
> Model business processes without persistent state
> Message-driven beans
> Execute on receipt of asynchronous messages
Gero Mühl
Webbasierte Anwendungen / JEE
66
Session Beans
> Model business processes
> Are similar to interactive sessions
> Represent an interaction with a client
> Are not stored persistently
> Lifecycle controlled by EJB container
> Can either be
> stateful (e.g. shopping cart) or
> stateless (e.g. calculate a discount)
across multiple invocations.
Gero Mühl
Webbasierte Anwendungen / JEE
67
Stateless Session Beans
> Do not maintain a conversational state for the client
> No state that persists across method invocations
> All instances of a stateless bean are equivalent
> One bean instance can manage several clients
> EJB container can assign an instance to any client
 Pooling
> Usually provide better performance and scalability than
stateful session beans
> Fewer beans can support the same number of clients
> Stateless session beans are never written to
secondary storage
Gero Mühl
Webbasierte Anwendungen / JEE
68
Example Stateless Session Bean
@Stateless
public class ConverterBean {
private BigDecimal euroRate =
new BigDecimal("1.34711");
Offer method as
Web service
using JAX-WS
@WebMethod
public BigDecimal dollarToEuro(BigDecimal dollars) {
BigDecimal result = dollars.multiply(euroRate);
return result.setScale(2, BigDecimal.ROUND_UP);
}
}
@WebServlet
public class ConverterServlet extends HttpServlet {
@EJB
ConverterBean converter;
Servlet uses Session Bean
…
BigDecimal euroAmount =
converter.dollarToEuro(dollarAmount);
…
}
Gero Mühl
Webbasierte Anwendungen / JEE
69
Stateful Session Beans
> Maintain a conversational state for one client
> Unique instance for each client
> State retained for the duration of the interaction
> May be written to secondary storage
> When client removes the bean or terminates, the session
ends and the state disappears
Gero Mühl
Webbasierte Anwendungen / JEE
70
Example Stateful Session Bean
1. Define remote interface
@Remote
public interface Cart {
public void initialize(String id)
throws BookException;
public void addBook(String title);
public void removeBook(String title)
throws BookException;
public List<String> getContents();
public void remove();
}
Gero Mühl
Webbasierte Anwendungen / JEE
71
Example Stateful Session Bean
2. Implement bean class
@Stateful
public class CartBean implements Cart {
String customerId;
List<String> contents;
public void initialize(String id) throws BookException {
IdVerifier idChecker = new IdVerifier();
if (idChecker.validate(id)) {
customerId = id;
} else {
throw new BookException("Invalid customer id: " + id);
}
contents = new ArrayList<String>();
}
Gero Mühl
Webbasierte Anwendungen / JEE
72
Example Stateful Session Bean
public void addBook(String title) {
contents.add(title);
}
public void removeBook(String title) throws BookException {
boolean result = contents.remove(title);
if (result == false) {
throw new BookException(title + " not in cart.");
}
}
public List<String> getContents() {
return contents;
}
@Remove
public void remove() {
contents = null;
}
}
Gero Mühl
Webbasierte Anwendungen / JEE
73
Message-Driven Beans
> Message-Driven Beans (MDBs) enable messaging in EJB
> The only EJBs that can receive messages asynchronously
> Designed for using Java Messaging Service (JMS)
> But can also support other messaging middleware through
Java Connector Architecture (JCA)
> Cannot be invoked directly
> Execute on the receipt of a single message
> onMessage() method is called
Gero Mühl
Webbasierte Anwendungen / JEE
74
Message-Driven Beans
> Similar to stateless session beans wrt. several aspects
> they are stateless, but can call other session or entity
> all instances of a MDB class are equivalent
> a message is delivered to any instance of a MDB class
and processed concurrently
> a single MDB can process messages from
different sources
> Transactions, pooling, and message acknowledgement
usually handled by the container
Gero Mühl
Webbasierte Anwendungen / JEE
75
Entities
> Model persistent business objects
(such as a customer, products, orders)
> Data-oriented objects that are stored persistently in a
database as a data record
> Long-living: survive a container crash
> Uniquely identified by a primary key (e.g. customer number)
> Enables the client to locate a particular entity
> Lifecycle independent of that of clients
> Potentially shared access by many clients  transactions
> Can have relations with other entities
Gero Mühl
Webbasierte Anwendungen / JEE
76
Beispiel Entity
@Entity
public class Address {
protected long id
String street;
String city;
String zipCode;
Primary Key
@Id
public
public
public
public
{
…
long getId() { return id; }
void setId() { this.id = id; }
String getStreet() { return street; }
void setStreet(String street)
this.street = street; }
}
Gero Mühl
Webbasierte Anwendungen / JEE
77
Object Relational Mapping
> Entities are mapped to tuples in database tables
_______Address_________
long getId()
void setId(long id)
String getStreet()
void setStreet(String street)
String getCity()
void setCity(String city)
…
Gero Mühl
id
street
city
1
A-Street 5
London
2
B-Street 7
Berlin
3
X-Avenue 9
New York
Webbasierte Anwendungen / JEE
78
Bibliography
1. Sun Microsystems, Inc. Enterprise JavaBeans
Specification, Version 3.1, 2009
> http://java.sun.com/products/ejb
2. Andrew Lee Rubinger, Bill Burke,
Enterprise JavaBeans 3.1, O’Reilly, 2010
3. Debu Panda, Reza Ramann, Derek Lane,
EJB 3 in Action, Manning Publications, 2007
Gero Mühl
Webbasierte Anwendungen / JEE
79
Exemplarische Fragen zur Lernkontrolle
JEE
1. Welche Tiers definiert die J2EE-Architektur und
welche Aufgaben haben diese?
2. Was sind Java Servlets und wie wird
ein Servlet implementiert?
3. HTTP und Servlets sind zustandslos. Wie können dennoch
zustandsbehaftete Sitzungen realisiert werden?
4. Was sind Java Server Pages und wie ist eine
solche Seite aufgebaut?
5. Wie werden Java Server Pages ausgeführt?
6. Erläutern Sie das Konzept von Java Server Faces!
Gero Mühl
Webbasierte Anwendungen / JEE
80
Exemplarische Fragen zur Lernkontrolle
JEE
7. Welche Arten von EJBs gibt es und
wie unterscheiden sie sich?
8. Warum wird zwischen zustandslosen und
zustandsbehafteten Sessions Beans unterschieden?
9. Welche Schritte sind zur Entwicklung einer
Session Bean notwendig?
10. Wozu werden Message-Driven Beans verwendet?
11. Erläutern Sie die Rolle von Entities im Rahmen von EJB!
12. Welche Dienste bietet ein EJB Container an?
Werden diese transparent erbracht?
Gero Mühl
Webbasierte Anwendungen / JEE
81
Vielen Dank für Ihre Aufmerksamkeit!
Univ.-Prof. Dr.-Ing. habil. Gero Mühl
[email protected]
http://wwwava.informatik.uni-rostock.de
Gero Mühl
Webbasierte Anwendungen / JEE
82
Webbasierte Anwendungen
Toolkits: Apache Wicket und GWT
Univ.-Prof. Dr.-Ing. habil. Gero Mühl
Architektur von Anwendungssystemen (AVA)
Fakultät für Informatik und Elektrotechnik (IEF)
Universität Rostock
Überblick
> Apache Wicket
> Google Web Toolkit (GWT)
Gero Mühl
Webbasierte Anwendungen / Wicket und GWT
2
Apache Wicket
Gero Mühl
Webbasierte Anwendungen / Wicket und GWT
3
Web-Entwicklung in Java?
Servlets
Java Server Pages (JSP)
> Java-Programme mit
HTML-Ausgaben
> Ausführbar durch Webserver
im Servlet-Container
> Grundlage vieler
Web-Frameworks
> HTML-Seiten mit spezifischen
Tags und Java-Code
> Skriptlets, JSP-Aktionen und
Ausdrücke mit
Programmfluss-Bedeutung
> Kompilierung zu Servlets
Vermischung von Markup (HTML) mit Applikationslogik (Java)
 Wartbarkeit?
 Alternativen?
Gero Mühl
Webbasierte Anwendungen / Wicket und GWT
4
Apache Wicket
> Model / View / Controller (MVC)Architektur
> „Just Java and HTML“
> Insbesondere auch keine
spezielle HTML-Syntax
> XML-free (bis auf web.xml)
> Separation of Concerns
> Klare Trennung von Java & HTML
> Komponentenbasiert
> Wiederverwendbarkeit
> Große Komponentenbibliothek
> Objektorientiert
> Kapselung
> Erweiterbarkeit (Vererbung)
> Ereignisorientiert
> Webseiten als GUI (Swing-like)
> Eingebaute Testunterstützung
Gero Mühl
Aktuelle Version: 6.5
> Transparente Unterstützung des
Back Buttons
> Typsichere Sessions für transparentes Zustandsmanagement
> Flexible Lokalisierung (Sprache)
> HTML, Bilder, Label, etc.
> Formularvalidierung
> Umfangreiche Ajax-Unterstüzung
ohne JavaScript-Programmierung
(vom Webentwickler) zu erfordern
> Bibliotheksintegration für
> Logging  Simple Logging
Fascade for Java (SLF4J)
> Objektrelationale Abbildung
(ORM)  Hibernate
> Dependency Injection
 Spring, Guice
Webbasierte Anwendungen / Wicket und GWT
5
Model/View/Controller-Architektur
Controller
(Steuerung)
greift zu
View
Model
(Präsentation)
(Modell)
Modelländerungen
Model
View
Controller
> Beinhaltet die Geschäftsobjekte und -daten
> Informiert Beobachter
(z.B. Views) über
Änderungen
> Darstellung der
Geschäftsdaten
> Informiert Beobachter
(z.B. Controller) über
Benutzereingaben
> Verwaltet Präsentationen
> Verarbeitet
Benutzereingaben
> Tätigt Modelländerungen
Gero Mühl
Webbasierte Anwendungen / Wicket und GWT
6
Wicket Architektur
Wicket
Component
Container
*
Session
+ render()
Simple
Component
Container
Component
<<use>>
Markup
File
<<use>>
HTML
File
Wicket
Servlet
Filter
<<use>>
Gero Mühl
WebPage
Webbasierte Anwendungen / Wicket und GWT
7
Komponenten und Container
> Servlet-Filter
> Einstiegspunkt für Wicket durch Abfangen des Requests
> Bestimmen der darzustellenden Komponente (Webseite)
> Komponenten
> Wieder verwendbare Bausteine (inklusive Logik und Layout)
> Objektorientierung ermöglicht Kapselung und Vererbung
> Darstellung (Rendering) erfolgt durch Komponente selbst
> Container-Komponenten
> Beinhalten Kind-Komponenten  Entwurfsmuster Kompositum
> Webseiten sind selbst Container-Komponenten mit hierarchisch
angeordneten Kindern (z.B. Seite  Formular  Textfeld)
> Assoziierte Markup- / HTML-Datei bestimmt Layout der Kinder
 Separation of Concerns durch Trennung von Logik und Layout
Gero Mühl
Webbasierte Anwendungen / Wicket und GWT
8
HelloWorld Beispiel
public class HelloWorldApplication extends WebApplication {
Platz für eigene Initialisierungen
@Override
protected void init() {
mountBookmarkablePage("/hello", HelloWorldPage.class);
}
Zuweisung von
(kurzen) URLs zu
Webseiten
@Override
public Class getHomePage() {
return HelloWorldPage.class;
}
Startseite der
}
Webanwendung
Gero Mühl
Webbasierte Anwendungen / Wicket und GWT
9
HelloWorld Beispiel
<html>
<body>
<span wicket:id="message">
this text gets replaced
</span>
</body>
</html>
public class HelloWorldPage
extends WebPage {
public HelloWorldPage() {
Label label =
new Label( "message",
"Hello World!" );
add( label );
} }
HelloWorldPage.html
HelloWorldPage.java
> Trennung von Markup und Logik
> Separate HTML-Datei für Layout und Styling (via CSS)
> Separate Java-Datei für Applikationslogik und Verhalten
> Dynamische Verknüpfung zur Laufzeit
> Identischer Dateiname (unterschiedliche Endung)
> Komponenten-ID
Gero Mühl
Webbasierte Anwendungen / Wicket und GWT
10
HelloWorld Beispiel – Deployment (web.xml)
<web-app>
<display-name>AVA</display-name>
<filter>
<filter-name>WicketFilter</filter-name>
Wicket-Interceptor für
HTTP-Requests
<filter-class>
org.apache.wicket.protocol.http.WicketFilter
</filter-class>
<init-param>
<param-name>applicationClassName</param-name>
<param-value>ava.wicket.HelloWorldApplication</param-value>
</init-param>
Einstiegspunkt der
Webanwendung
</filter>
<filter-mapping>
<filter-name>WicketFilter</filter-name>
<url-pattern>/wicket/*</url-pattern>
</filter-mapping>
</web-app>
Gero Mühl
URLs für die Wicket
zuständig ist
Webbasierte Anwendungen / Wicket und GWT
11
Ereignisbehandlung
<html>
<body>
<form wicket:id="form">
...
<input type="submit"/>
</form>
</body>
</html>
FormPage.html
public class FormPage
extends WebPage {
public FormPage() {
Form form = new Form("form") {
protected void onSubmit() {
// handle submit event
...
} };
add( form );
} }
FormPage.java
> Ausgelöst durch Benutzeraktion  HTTP-Request
> Betroffene Komponenten werden mittels Ereignismethoden
informiert  onClick, onSubmit, …
> Ereignisbehandlung durch Überschreiben der jeweiligen Methode
Gero Mühl
Webbasierte Anwendungen / Wicket und GWT
12
Datenbindung
Wicket Formular
Vorname:
Nachname:
Formular Registrierung
Person
+ vorname
+ nachname
Klasse Person
> Verbindung zwischen Geschäftsdaten (Model)
und darstellenden Komponenten (View)
> Monodirektionale und bidirektionale Bindungen möglich
> View  Data / View  Data / View  Data
> Wicket-Datenbindungen implementieren Schnittstelle IModel
> PropertyModel, CompoundPropertyModel,
ResourceModel
Gero Mühl
Webbasierte Anwendungen / Wicket und GWT
13
Datenbindung
Klasse PropertyModel
> Bindet Komponente an ein Attribut eines Geschäftsobjektes
> Beispiel
Form form = new Form("form");
form.add(new TextField("vorname",
new PropertyModel(person, "vorname")));
form.add(new TextField("nachname",
new PropertyModel(person, "nachname")));
Klasse CompoundPropertyModel
> Bindet Kindkomponenten an gleichnamige Attribute eines Objektes
> Beispiel
Form form = new Form("form", new CompoundPropertyModel(person) );
form.add( new TextField("vorname") );
form.add( new TextField("nachname") );
Gero Mühl
Webbasierte Anwendungen / Wicket und GWT
14
Validation
> Verarbeitung von Benutzereingaben
>
>
>
>
>
Prüfen ob Eingabe erforderlich  Required Property
Konvertieren der Eingabe (String  erwarteter Typ)
Ausführen registrierter Validatoren
Übertragen konvertierter und validierter Werte ins Modell
Aufrufen der Methoden onSubmit bzw. onError  Ereignisse
> Bibliothek vorhandener Validatoren
>
>
>
>
>
Gero Mühl
Zahlen  Minimum, Maximum, Bereich, …
String  Länge, regulärer Ausdruck, …
Datum  Minimum, Maximum, Bereich, …
Web  Email-Adresse, URL, Kreditkarte, …
Custom  Erweitern/Implementieren AbstractValidator
Webbasierte Anwendungen / Wicket und GWT
15
Beispiel Validation
Form form = new Form("form", new CompoundPropertyModel(user));
...
TextField<String> userName = new TextField<String>(“userName");
form.add(userName);
Feld ist erforderlich
userName.setRequired(true);
StringValidator min = StringValidator.minimumLength(4);
StringValidator max = StringValidator.maximumLength(10);
userName.add(min, max);
Benutzernamen sind zwischen 4
...
und 10 Zeichen lang
ComponentFeedbackPanel feedback =
new ComponentFeedbackPanel("feedback", userName);
form.add(feedback);
Komponente zum Anzeigen
von Fehlermeldungen
Gero Mühl
Webbasierte Anwendungen / Wicket und GWT
16
Markup Inheritance
<html>
<head></head>
<body>
BasePage before<br>
<wicket:child />
BasePage after<br>
</body>
</html>
BasePage.html
public class ChildPage
extends BasePage { … }
Output
ChildPage.html
<html>
<head></head>
<body>
ChildPage before<br>
<wicket:extend>
This is the child markup<br>
</wicket:extend>
ChildPage after<br>
</body>
</html>
Gero Mühl
ChildPage.java
<html>
<head></head>
<body>
BasePage before<br>
This is the child markup<br>
BasePage after<br>
</body>
</html>
Webbasierte Anwendungen / Wicket und GWT
17
Unit-Tests
> Klassen WicketTester und FormTester
> Unit-Tests von Wicket-Seiten ohne Servlet-Container
 Out-of-Container-Test
> Simulation von Benutzereingaben
> Link-Klicks zur Seitennavigation
> Formulareingaben
> Prüfen von Zusicherungen  Assertions
>
>
>
>
Gero Mühl
Typ der Webseite und enthaltener Komponenten
Sichtbarkeit, Labeltexte, Listenelemente
Werte assoziierter Modell-Objekte
Validationsergebnisse mittels Fehler- und Info-Nachrichten
Webbasierte Anwendungen / Wicket und GWT
18
Web-Frameworks
Nicht überzeugt? Gibt es Alternativen?
Action Framework Baritus Barracuda Bento Bishop
Cameleon Canyamo Cassandra Chiba Click
Cocoon Dinamica Dovetail Echo Expresso Folium
Genie GWT Helma Jacquard Jaffa Japple JATO
JBanana Jeenius JFormular JPublish jStatemachine
Jucas JWAA JWarp jZonic Macaw Maverick
Melati Milestone MyFaces Nacho Niggle
OpenEmcee OXF RIFE Scope Shocks Smile
SOFIA Spring MVC Stripes Struts Tapestry
TeaServlet Turbine Verge Warfare WebOnSwing
WebWork wingS Xoplon
Gero Mühl
Webbasierte Anwendungen / Wicket und GWT
19
Literatur
> Apache Wicket Project
> Homepage  http://wicket.apache.org/
> Wiki  http://cwiki.apache.org/WICKET/
> Wicket Komponenten
> Docs  http://www.wicketstuff.org/wicket14/
> Beispiele  http://www.wicketstuff.org/wicket14/
> Wicket Bücher
> Roland Förther, Carl-Eric Menzel and Olaf Siefart.
Komponentenbasierte Webanwendungen in Java. dpunkt.verlag.
> Martijn Dashorst, Eelco Hillenius: Wicket in Action. Manning
Publications.
> Kent Tong: Enjoying Web Development with Wicket.
http://www.agileskills2.org/, (Kapitel 1-3 frei)
> Michael Mosmann: Praxisbuch Wicket – Professionelle Web-2.0Anwendungen entwickeln. Hanser.
Gero Mühl
Webbasierte Anwendungen / Wicket und GWT
20
Fragen?
Gero Mühl
Webbasierte Anwendungen / Wicket und GWT
21
Google Web Toolkit (GWT)
Gero Mühl
Webbasierte Anwendungen / Wicket und GWT
22
Google Web Toolkit (GWT)
Aktuelle Version: 2.5
> Werkzeugsammlung zur Entwicklung von
Cross-Browser AJAX-Applikationen in Java
> http://code.google.com/webtoolkit
> Implementieren / Testen in gewohnter Java-IDE  Developer Mode
> Google Plugin for Eclipse ermöglicht komfortable Entwicklung
> Darstellung der Anwendung im Browser (z.B. Firefox  Firebug)
während der Entwicklung mittels GWT Developer Plugin
> Plugins kommunizieren per TCP  Browser kann entfernt sein
> Testen mittels HtmlUnit (Simuliert populäre Browser ohne GUI)
> Deployment in JavaScript  Produktion Mode
> GWT-Compiler konvertiert Java-Quelltext zu JavaScript-Quelltext
Write
Gero Mühl
Debug
Optimize
Run
Webbasierte Anwendungen / Wicket und GWT
23
GWT Bestandteile
JRE Emulationsbibliothek
(java.lang und java.util)
GWT
Java  JavaScript
Compiler
Gero Mühl
Klassenbibliotheken
GWT Web UI
Klassenbibliothek
Entwicklungswerkzeuge
GWT
Developer Plugin
Webbasierte Anwendungen / Wicket und GWT
24
Architekturkomponenten
> GWT Java  JavaScript-Compiler
> Übersetzt GWT Java-Programme nach JavaScript
> GWT Developer Plugin
> Ausführung von GWT-Programmen innerhalb des
Browsers ohne Kompilierung zu JavaScript
> JRE Emulationsbibliothek
> JavaScript-Implementierungen wichtiger Java-Klassen
> GWT Web UI Klassenbibliothek
> Bibliothek häufig genutzter Bedien- und
Eingabeelemente  Widgets
Gero Mühl
Webbasierte Anwendungen / Wicket und GWT
25
GWT Java  JavaScript Compiler
> Vollständiger Parser für Java-Quelltexte
> Nahezu alle Java-Konstrukte werden verstanden
> Erzeugung eines abstrakten Syntaxbaumes
> Echter Code-Parser und Cross-Compiler
> Keine Musterersetzung oder Template-Bibliothek
> Durchführung von Code-Optimierungen
> Dead-Code-Eliminierung, Datenflussanalyse, etc.
> Komprimierung und Obfuskation
> Erzeugtes JavaScript ist effizient
 meist schneller als handgeschriebenes JavaScript
> Browserkompatibilität
> Inkludiert Browserhacks und Workarounds automatisch
Gero Mühl
Webbasierte Anwendungen / Wicket und GWT
26
GWT GUI Klassen
> GUI-Klassen vergleichbar mit Desktop-Frameworks
wie beispielsweise Java Swing
> Ereignisorientiert
 Listener Pattern (Events und EventHandler)
> Darstellung mittels dynamisch generiertem HTML
> Styling mittels CSS
> Widget-Bibliothek
> Beinhaltet viele häufig genutzte Elemente
> Widgets sind komponierbar
 Erzeugung wiederverwendbarer, neuer Elemente
Gero Mühl
Webbasierte Anwendungen / Wicket und GWT
27
Widget-Beispiele
Boxes
Panels
Menüs, Bäume,
Buttons & Popups
Gero Mühl
Webbasierte Anwendungen / Wicket und GWT
28
GWT Programmbeispiel
package ava.gwt.client;
import com.google.gwt.core.client.*;
import com.google.gwt.event.dom.client.*;
Einstiegspunkt der
import com.google.gwt.user.client.*;
Anwendung
import com.google.gwt.user.client.ui.*;
public class HelloWorld implements EntryPoint, ClickHandler {
TextBox text;
public void onModuleLoad() {
text = new TextBox();
Button button = new Button("Show text", this);
VerticalPanel panel = new VerticalPanel();
panel.add(text);
panel.add(button);
Handler für geRootPanel.get().add(panel);
klickten Button
}
public void onClick(ClickEvent event) {
Window.alert("You entered: " + text.getText());
} }
Gero Mühl
Webbasierte Anwendungen / Wicket und GWT
29
GWT RPC (Remote Procedure Call)
> Mechanismus, um serverseitige Methoden aufzurufen
> Beispielsweise, um Daten vom Server nachzuladen
> Wird auf AJAX abgebildet
 Asynchrone Aufrufe und Callbacks
> Unterstützung von (serialisierbaren) Java-Objekten als
Aufrufparameter und Rückgabewerte
> GWT übernimmt Marshalling / Unmarshalling
> Unterstützung von Exceptions
Gero Mühl
Webbasierte Anwendungen / Wicket und GWT
30
GWT RPC Übersicht
Clientseite
ServiceDefTarget
(interface)
YourServiceAsync
(interface)
related
Serverseite
RemoteService
(interface)
RemoteServiceServlet (class)
extends
extends
YourService
(interface)
implements
YourServiceImpl
(class)
YourServiceProxy
(class)
Übersetzter Java-Code ausgeführt
als JavaScript auf dem Client
Framework Klassen
bzw. Interfaces
Gero Mühl
Java-Code ausgeführt als
Bytecode auf dem Server
Automatisch generierte Klassen
Selbstgeschriebene Klassen
bzw. Interfaces
Webbasierte Anwendungen / Wicket und GWT
31
1. Schnittstellen implementieren
> Synchrone Schnittstelle (serverseitig)
public interface EchoService extends RemoteService {
public String echo(String s);
}
> Asynchrone Schnittstelle (clientseitig)
Wird aufgerufen,
wenn Ergebnis
eintrifft
// Has to be named <SynchronousInterface>Async.
// Has to pass AsyncCallback object as last parameter.
// Has to return void.
//
public interface EchoServiceAsync {
public void echo(String s, AsyncCallback<String> callback);
}
Typ des
Rückgabewertes
Gero Mühl
Webbasierte Anwendungen / Wicket und GWT
32
2. Dienst implementieren
> Dienstimplementierung
> Implementierung erfolgt im Paket server
> Klasse von RemoteServiceServlet ableiten
> Eigene synchrone Dienstschnittstelle implementieren
package ava.gwt.server;
…
public class EchoServiceImpl extends RemoteServiceServlet
implements EchoService {
public String echo(String s) {
return "Echo: " + s;
} }
Gero Mühl
Webbasierte Anwendungen / Wicket und GWT
33
3. Konfiguration
> Dienste sind Servlets
> Konfiguration erfolgt in web.xml-Datei
> Angabe der Servlet-Klasse und der Aufruf-URL erforderlich
<?xml version="1.0" encoding="UTF-8"?>
<web-app>
...
<servlet>
<servlet-name>EchoService</servlet-name>
<servlet-class>ava.gwt.server.EchoServiceImpl</servlet-class>
</servlet>
<servlet-mapping>
<servlet-name>EchoService</servlet-name>
<url-pattern>/echo</url-pattern>
</servlet-mapping>
</web-app>
Gero Mühl
Webbasierte Anwendungen / Wicket und GWT
34
4. Dienstaufruf
> Erzeugung eines Proxy-Objektes des Dienstes
EchoServiceAsync echoService =
(EchoServiceAsync) GWT.create(EchoService.class);
> Angabe der Aufruf-URL des Dienst-Servlets
ServiceDefTarget endpoint = (ServiceDefTarget)echoService;
String moduleRelativeURL = GWT.getModuleBaseURL()+"echo";
endpoint.setServiceEntryPoint(moduleRelativeURL);
> Erzeugung eines Callback-Objektes für das Ergebnis
AsyncCallback<String> callback = new AsyncCallback<String>() {
@Override public void onSuccess(String result)
{ … }
@Override public void onFailure(Throwable caught) { … }
};
> Aufruf ausführen
echoService.echo("Hello World", callback);
Gero Mühl
Webbasierte Anwendungen / Wicket und GWT
35
Anmerkungen
> Google Eclipse Plugin
> Webseite  http://code.google.com/eclipse
> Eclipse-Integration für Anwendungen basierend auf
Google Web Toolkit und Google App Engine
> GWT Kommandozeilen-Werkzeuge
> Projekt-, Compile-, und Launch-Skripte für Webmodul erstellen
webAppCreator [-out folder] <ModuleName>
> GWT RPC-Hinweise
> Servlet-Klassen werden nicht vom GWT kompiliert
 manuell kompilieren oder automatisch von Eclipse
> Servlet-Pfad in der web.xml-Datei und ServiceDefTarget
für Aufruf müssen übereinstimmen
> Dokumentation
> http://code.google.com/intl/de-DE/webtoolkit/doc/latest/DevGuide.html
Gero Mühl
Webbasierte Anwendungen / Wicket und GWT
36
Literatur
1. Google Web Toolkit
> http://code.google.com/intl/de-DE/webtoolkit
Gero Mühl
Webbasierte Anwendungen / Wicket und GWT
37
Exemplarische Fragen zur Lernkontrolle
Apache Wicket
1. Welche Nachteile hat die Mischung von HTML-Code und
Java-Code in einer Datei und welche Vorteile bietet
eine Trennung!
2. Erläutern Sie die Model/View/Controller-Architektur!
3. Beschreiben Sie das grundlegenden Vorgehen bei der
Entwicklung einer Applikation mit Apache Wicket!
4. Wie wird auf Ereignisse reagiert?
5. Wie erfolgen Datenbindung und Validation?
6. Welche Vorteile bieten Out-Of-Container-Tests und wie
können diese bei Apache Wicket umgesetzt werden?
7. Erläutern Sie, wie bei Apache Wicket HTML-Code
wiederverwendet werden kann!
Gero Mühl
Webbasierte Anwendungen / Wicket und GWT
38
Exemplarische Fragen zur Lernkontrolle
Google Web Toolkit
1. Beschreiben Sie das grundlegenden Vorgehen bei der
Entwicklung einer Applikation mit dem Google Web Toolkit!
2. In welcher Programmiersprache wird beim
Google Web Toolkit die Webanwendung implementiert?
3. Wie unterscheiden sich der Developer Mode und
Deployment Mode?
4. Wie wird der JavaScript-Code für den Client erzeugt?
5. Wozu wird die JRE Emulationsbibliothek benötigt?
6. Wozu dient das GWT Developer Plugin?
7. Erläutern Sie die Funktionsweise von GWT RPC!
Gero Mühl
Webbasierte Anwendungen / Wicket und GWT
39
Vielen Dank für Ihre Aufmerksamkeit!
Univ.-Prof. Dr.-Ing. habil. Gero Mühl
[email protected]
http://wwwava.informatik.uni-rostock.de
Gero Mühl
Webbasierte Anwendungen / Wicket und GWT
40