524
Prof. Dr.-Ing. habil. Gero Mühl Architektur von Anwendungssystemen (AVA) Fakultät für Informatik und Elektrotechnik (IEF) Universität Rostock Webbasierte Anwendungen Organisatorisches

Webbasierte Anwendungen - storage.googleapis.com · > Webbasierte Anwendungen > haben das alltägliche Leben durchdrungen und > verdrängen zum Teil bereits Desktop-Anwendungen (z.B

  • Upload
    others

  • View
    10

  • Download
    0

Embed Size (px)

Citation preview

Prof. Dr.-Ing. habil. Gero Mühl

Architektur von Anwendungssystemen (AVA)Fakultät für Informatik und Elektrotechnik (IEF)Universität Rostock

Webbasierte Anwendungen

Organisatorisches

Mobiltelefone bitte ausschalten!

Webbasierte Anwendungen / OrganisatorischesGero Mühl 2

Dozent

Name Prof. Dr.-Ing. habil. Gero Mühl

Adresse Architektur von AnwendungssystemenFakultät für Elektrotechnik und InformatikUniversität RostockAlbert-Einstein-Str. 22

Büro Raum 267Telefon 0381 / 498 7621E-Mail [email protected] http://wwwava.informatik.uni-rostock.deSprechstunde Dienstag, 15:00 – 16:00 Uhr und

nach Vereinbarung

Webbasierte Anwendungen / OrganisatorischesGero Mühl 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?

Webbasierte Anwendungen / OrganisatorischesGero Mühl 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 Anwendungs-funktionalität werden üblicherweise durch einen entfernten Webserver erbracht, mit dem mittels HTTP kommuniziert wird.

Webbasierte Anwendungen / OrganisatorischesGero Mühl 5

Vorlesung

> Freitag, 11-13 Uhr c.t., Raum SR 110, A.-Einstein-Str. 22, Beginn 14.10.10

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

Webbasierte Anwendungen / OrganisatorischesGero Mühl 6

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.

Webbasierte Anwendungen / OrganisatorischesGero Mühl 7

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

Webbasierte Anwendungen / OrganisatorischesGero Mühl 8

Gliederung der Vorlesung

0 Organisatorisches

1 Einführung1.1 Geschichte des Internets1.2 Geschichte des WWW

2 Grundlagen2.1 Netzwerk-Referenzmodelle2.2 Vermittlungsschicht2.3 Transportschicht2.4 Socket-Schnittstelle2.5 Dienstgüteanforderungen2.6 Zeichenkodierung

3 Grundlegende Dienste und Anwendungen des Internet

3.1 Domain Name Service 3.2 E-Mail3.3 FTP3.4 Telnet/SSH

4 World Wide Web (WWW)4.2 Client/Server-Architektur4.3 Hypertext Transfer Protocol4.4 Transport Layer Security4.5 Hypertext Markup Language4.6 Cascading Style Sheets

Webbasierte Anwendungen / OrganisatorischesGero Mühl 9

6 Plattformen6.1 Java Platform, Enterprise

Edition (JEE)6.2 Microsoft .NET

5 Techniken5.1 Clientseitige Techniken,

(z.B. JavaScript, Applets)5.2 Serverseitige Techniken

(z.B. CGI, PHP, Java Servlets)5.3 Rich Internet Applications

(z.B. Ajax, GWT)

Gliederung der Vorlesung

Webbasierte Anwendungen / OrganisatorischesGero Mühl 10

Übung

> Montag, 15-17 Uhr c.t., Raum SR 110, A.-Einstein-Str. 22, Beginn 17.10.10

> Inhalt> Vertiefung des Vorlesungsstoffes> Rechenaufgaben> Programmieraufgaben> Kennen lernen von Produkten und Standards> Vorbereitung auf die Abschlussprüfung

> Übungsblätter im Stud.IP verfügbar

Webbasierte Anwendungen / OrganisatorischesGero Mühl 11

Weitere AVA-Veranstaltungen im WS 2011/12

> Abstrakte Datentypen (Bachelor, 2VL + 1PR + 1UE = 6CP)> Vorlesung: mittwochs, 13:30-15:00 Uhr

Hörsaal 3, Parkstraße 6

> Webbasierte Anwendungen (Bachelor, 2VL + 2UE = 6CP)> Vorlesung: freitags, 11-13 Uhr c.t.,

Raum SR 110, Albert-Einstein-Straße 22, Beginn 14.10.10

> Übung: montags, 15-17 Uhr c.t., Raum SR 110, A.-Einstein-Str. 22, Beginn 17.10.10

> Middleware-Konzepte (Master, 2VL = 3CP)> Vorlesung: dienstags, 09-11 Uhr c.t.,

Raum SR 101, A.-Einstein-Str. 22, Beginn 11.10.10

Webbasierte Anwendungen / OrganisatorischesGero Mühl 12

Lehrangebot des Lehrstuhls AVA

AbstrakteDatentypen

Algorithmenund Datenstrukturen1./2. Semester

Applikationsserver und Anwendungsintegration

4./5. Semester

Verteilte Algorithmen

Middleware-Konzepte

1. Semester

WebbasierteAnwendungen

3./4. Semester

Bachelor-Arbeit6./7. Semester

Energieeffizienz undVirtualisierung2. Semester

Master-Arbeit3. Semester

Veranstaltungen in Bachelor-Studiengängen

Veranstaltungen in Master-Studiengängen

Webbasierte Anwendungen / OrganisatorischesGero Mühl 13

Forschung am Lehrstuhl AVA

> Forschungsbereiche> Verteilte Anwendungssysteme> Middleware, Algorithmen und Protokolle für verteilte Systeme> Organic Computing und Selbstorganisation> Energieeffizienter Betrieb von Rechensystemen> Integration neuartiger Datenspeicher in die Speicherhierarchie> 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

Webbasierte Anwendungen / OrganisatorischesGero Mühl 14

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

Webbasierte Anwendungen / OrganisatorischesGero Mühl 15

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

Webbasierte Anwendungen / OrganisatorischesGero Mühl 16

Prof. Dr.-Ing. habil. Gero Mühl

Architektur von Anwendungssystemen (AVA)Fakultät für Informatik und Elektrotechnik (IEF)Universität Rostock

Webbasierte Anwendungen

Historie

Überblick

> Vom ARPANET zum Internet

> Evolution und Struktur des Internet

> Evolution des World Wide Web (WWW)

Webbasierte Anwendungen / HistorieGero Mühl 2

Das Netz der Netze – Logische Sicht

Webbasierte Anwendungen / HistorieGero Mühl 3

Router,Gateway

Subnetz

Internet

Das Netz der Netze – Physische Sicht

Webbasierte Anwendungen / HistorieGero Mühl 4

Router,Gateway

Subnetz

Logische vs. Physische Sicht

Logische 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

Physische Sicht> „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

Webbasierte Anwendungen / HistorieGero Mühl 5

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> Förderung bestehender militärischer und universitärer

Forschungseinrichtungen> Militärische Nutzbarkeit sowie wirtschaftliche Verwertbarkeit

der Ergebnisse

Webbasierte Anwendungen / HistorieGero Mühl 6

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. Licklidermit 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)

Webbasierte Anwendungen / HistorieGero Mühl 7

Leonard. Kleinrock

Joseph C:R.Licklider

Lawrence G.Roberts

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

Webbasierte Anwendungen / HistorieGero Mühl 8

Design des ARPANETs

Webbasierte Anwendungen / HistorieGero Mühl 9

HOST

HOST

HOST

HOST

HOST

Quell-IMP–Ziel-IMP

IMP

TIP

IMP

IMP

Host–Host

IMP–IMP

Host–Imp

LocalTerminal

RemoteTerminal

IMP-Subnetz

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)

Webbasierte Anwendungen / HistorieGero Mühl 10

Leonard Kleinrockam IMP 1 @ UCLA

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 KleinrockProfessor, UCLA

1) University of California in Los Angeles2) Stanford Research Institute

Webbasierte Anwendungen / HistorieGero Mühl 11

The Day the Infant Internet Uttered its First Words

Webbasierte Anwendungen / HistorieGero Mühl 12

Excerpt from the IMP log at UCLA

Wachstum des ARPANETs

Webbasierte Anwendungen / HistorieGero Mühl 13

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)

Wachstum des ARPANETs

Webbasierte Anwendungen / HistorieGero Mühl 14

Sep. 1973 (Verbindungen u.a. nach Hawaii, Norwegen, England)

Jun. 1974

Jul. 1975 Jul. 1976

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

Webbasierte Anwendungen / HistorieGero Mühl 15

Robert E. (Bob) Kahn

Vinton G.Cerf

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

Webbasierte Anwendungen / HistorieGero Mühl 16

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

Webbasierte Anwendungen / HistorieGero Mühl 17

Rechner im Internet

Webbasierte Anwendungen / HistorieGero Mühl 18

Webserver-Marktanteile

Webbasierte Anwendungen / HistorieGero Mühl 19

Quelle: netcraft.com

Nutzer des Internet

Webbasierte Anwendungen / HistorieGero Mühl 20

Nutzer des Internet

Webbasierte Anwendungen / HistorieGero Mühl 21

Domänen im Internet

Webbasierte Anwendungen / HistorieGero Mühl 22

Quelle: DENIC eG

.de-Domänen im Internet

Webbasierte Anwendungen / HistorieGero Mühl 23

Quelle: DENIC eG

.de-Domänen im Internet

Webbasierte Anwendungen / HistorieGero Mühl 24

Quelle: DENIC eG

Verteilung der .de-Domänen

Webbasierte Anwendungen / HistorieGero Mühl 25

Que

lle: D

EN

IC e

G

Struktur des Internets (IPv4)

Webbasierte Anwendungen / HistorieGero Mühl 26

Que

lle: C

AID

A(C

oope

rativ

e A

ssoc

iatio

n fo

r In

tern

et D

ata

Ana

lysi

s)

Struktur des Internets (IPv6)

Webbasierte Anwendungen / HistorieGero Mühl 27

Que

lle: C

AID

A(C

oope

rativ

e A

ssoc

iatio

n fo

r In

tern

et D

ata

Ana

lysi

s)

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

Webbasierte Anwendungen / HistorieGero Mühl 28

Quelle:Wikipedia, http://en.wikipedia.org/ wiki/Image:Internet_map_1024.jpg

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 Andreessenund Jim Clark

> 1994: Gründung des World Wide Web Consortiums mit Tim Berners-Lee als Direktor

Webbasierte Anwendungen / HistorieGero Mühl 29

Tim Berners-Lee

Marc Andreessen

Webbrowser

Webbasierte Anwendungen / HistorieGero Mühl 30

Webbrowser Marktanteile (Stand 08/2009)

Webbasierte Anwendungen / HistorieGero Mühl 31

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)

Webbasierte Anwendungen / HistorieGero Mühl 32

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

Webbasierte Anwendungen / HistorieGero Mühl 33

Fragen?

Webbasierte Anwendungen / HistorieGero Mühl 34

Prof. Dr.-Ing. habil. Gero Mühl

Architektur von Anwendungssystemen (AVA)Fakultät für Informatik und Elektrotechnik (IEF)Universität Rostock

Webbasierte Anwendungen

Internet Protocol Suite (TCP/IP)

Überblick

> TCP/IP-Referenzmodell

> Internetschicht

> Transportschicht

> Dienstgüte

Webbasierte Anwendungen / Internet Protocol SuiteGero Mühl 2

TCP/IP-Referenzmodell

Webbasierte Anwendungen / Internet Protocol SuiteGero Mühl 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

Webbasierte Anwendungen / Internet Protocol SuiteGero Mühl 4

Protokollhierarchien

Webbasierte Anwendungen / Internet Protocol SuiteGero Mühl 5

Schicht 3

Schicht 2

Schicht 1

Schicht 2/3-Schnittstelle

Schicht 1/2-Schnittstelle

Schicht 3

Schicht 2

Schicht 1

Schicht 2/3-Schnittstelle

Schicht 1/2-Schnittstelle

Schicht 3-Protokoll

Schicht 2-Protokoll

Schicht 1-Protokoll

Physikalisches Medium

Protokollhierarchien – Beispiel

Webbasierte Anwendungen / Internet Protocol SuiteGero Mühl 6

Fax # -----DeutschIch mag Kaninchen.

DeutschIch mag Kaninchen.

I likerabbits.

Nachricht

Information für entfernte Übersetzerin

Information für entfernten Sekretär

Fax # -----DeutschIch mag Kaninchen.

DeutschIch mag Kaninchen.

J‘aimeles lapins.

Philosoph

Übersetzerin

Sekretär

Philosoph/ÜbersetzerIn/SekretärIn-Architektur

Protokoll

Webbasierte Anwendungen / Internet Protocol SuiteGero Mühl 7

> Ein Protokoll legt die Regeln und Konventionen fest, wie die 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 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

Informationsfluss

Webbasierte Anwendungen / Internet Protocol SuiteGero Mühl 8

M1H3H2H1 M2H2H1

M1H3H2 M2H2

MH3

M

M1H3H2H1 M2H2H1

M1H3H2 M2H2

MH3

M

M: Gesamte NachrichtMi:Teilnachricht iHi: Header der Schicht i

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

Webbasierte Anwendungen / Internet Protocol SuiteGero Mühl 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> 2 Variationen zuverlässiger Ende-zu-Ende

Kommunikation: Nachrichtenfolgen und Byteströme

Webbasierte Anwendungen / Internet Protocol SuiteGero Mühl 10

Kombinationsmöglichkeiten

Webbasierte Anwendungen / Internet Protocol SuiteGero Mühl 11

Leitungsvermittelt Paketvermittelt

Verbindungslos Rohrpost UDP/IP

Verbindungsorientiert Analoges Telefon TCP/IP

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

> Host-an-Netz> Senden, Weiterleiten u. Empfangen von Paketen

zwischen direkt kommunizierenden Rechnern

Webbasierte Anwendungen / Internet Protocol SuiteGero Mühl 12

Host-an-Netz

Internet

Transport

Verarbeitung

TCP/IP-Referenzmodell

Webbasierte Anwendungen / Internet Protocol SuiteGero Mühl 13

Gateway (Router)

Host-an-Netz

Internet

Transport

Verarbeitung

Host-an-Netz

Internet

Host-an-Netz

Internet

Transport

Verarbeitung

TCP/IP-Referenzmodell

> Internet-Schicht/ Internet-Protokoll (IP)> Verbirgt verschiedenste Netzwerke und Netztechnologien> Bildet Basis verschiedenster Dienste und Anwendungen

Stundenglas-Architektur

Webbasierte Anwendungen / Internet Protocol SuiteGero Mühl 14

LAN, ATM, FDDI, WLAN

IP

TCP, UDP

HTTP, SMTP, DNS, IMAP

Host-an-Netz

Verarbeitung

Transport

Internet

Protokolle

Netze

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)

Webbasierte Anwendungen / Internet Protocol SuiteGero Mühl 15

TCP/IP – Kommunikationsbeispiel

Webbasierte Anwendungen / Internet Protocol SuiteGero Mühl 16

> Internet-Protokoll (IP)> IP-Adresse identifiziert Rechner

> Transport-Protokoll (TCP, UDP)> Port-Nummer identifiziert

Dienst/Anwendung

IP-Adresse192.168.0.3

IP-Adresse192.168.0.1

Port2580

DienstMailWWW

Port5012352987

ApplikationMail-Client

Browser

Port49654

ApplikationBrowser

IP-Adresse192.168.0.2

Netz

Client Server

Fragen?

Webbasierte Anwendungen / Internet Protocol SuiteGero Mühl 17

Internetschicht

Webbasierte Anwendungen / Internet Protocol SuiteGero Mühl 18

INTERconnected NETworks

> Internet = Verbund heterogener Netze mit Datenpaket-Transport zwischen beliebigen Rechnern

Webbasierte Anwendungen / Internet Protocol SuiteGero Mühl 19

LAN

US Backbone Europa Backbone

NationaleNetze

NationaleNetze

LANLAN

Internet Protocol (IPv4)

Webbasierte Anwendungen / Internet Protocol SuiteGero Mühl 20

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

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

Webbasierte Anwendungen / Internet Protocol SuiteGero Mühl 21

0 1 2 3 4 5 6 7 15 31

Netz-ID (14 Bits)0

01

11 0

11 1

R.-ID (8 Bits)

Multicast

reserviert

Netz-ID (7 Bits) Rechner-ID (24 Bits)

E

D

C

B

A

Rechner-ID (16 Bits)

1

1

1

1

0

Netz-ID (21 Bits)

23

IP-Paket

Webbasierte Anwendungen / Internet Protocol SuiteGero Mühl 22

Conte

nt

He

ad

er

Source Address

Destination Address

Header ChecksumProtocolTTL

Identification Fragment OffsetDF

MF

IHLVersion TOS Total Length

Options

Data

32 Bit

IP-Paket

> Version Version des IP Protokolls> IHL Länge des Headers> Total Length Gesamtlänge des Paketes> Identification Wert identifiziert das Paket> Flags 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

Webbasierte Anwendungen / Internet Protocol SuiteGero Mühl 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

Webbasierte Anwendungen / Internet Protocol SuiteGero Mühl 24

1 ETH 1400 2 P2P 512

P2P 512

P2P 376

3 FDDI 512

FDDI 512

FDDI 376

4

x

1400

0 0 x

512

1 0 x

512

1 512 x

376

0 1024

Ethernet Punkt-zu-Punkt FDDI

More Framents-Flag Offset

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

Webbasierte Anwendungen / Internet Protocol SuiteGero Mühl 25

1 1 14 7 91 0 Netz Rechner

0 0 0 0 0 0 0 0

Subnetzmaske = 255.255.254.0Alternative Notation: /23

1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 0

Subnetz

29 - 2 = 510 Rechner

27 = 128 Subnetze214 = 16384 Klasse B Netze

IP-Routing

Webbasierte Anwendungen / Internet Protocol SuiteGero Mühl 26

> 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

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) [RFC 1654]

Webbasierte Anwendungen / Internet Protocol SuiteGero Mühl 27

Fragen?

Webbasierte Anwendungen / Internet Protocol SuiteGero Mühl 28

Transportschicht

Webbasierte Anwendungen / Internet Protocol SuiteGero Mühl 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

Webbasierte Anwendungen / Internet Protocol SuiteGero Mühl 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

Webbasierte Anwendungen / Internet Protocol SuiteGero Mühl 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 r ecei ves führen und

umgekehrt!

> z.B. send(170 Bytes) + send(230) r ecei ve(400)

Webbasierte Anwendungen / Internet Protocol SuiteGero Mühl 32

Aufbau eines TCP-Pakets

Webbasierte Anwendungen / Internet Protocol SuiteGero Mühl 33

Data

0 8 16 32

Sequence Number

Options

24Source Port Destination Port

Acknowledgement NumberWindow Size

Urgent PointerChecksum

HLen FlagsHeader

Body

20 B

yte

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> URG: dringende Daten liegen vor (siehe Urgent Pointer)> ACK: Bestätigung der Daten (siehe Acknowledgement Number)> PSH: Daten sofort an Anwendung weiterleiten (nicht puffern)> RST: Reset einer Verbindung> SYN: Signalisiert Verbindungsaufbau> FIN: Signalisiert Verbindungsabbau

Webbasierte Anwendungen / Internet Protocol SuiteGero Mühl 34

Webbasierte Anwendungen / Internet Protocol SuiteGero Mühl 35

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

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

Webbasierte Anwendungen / Internet Protocol SuiteGero Mühl 36

Sliding Window Protocol

Webbasierte Anwendungen / Internet Protocol SuiteGero Mühl 37

gesendet und bestätigt

gesendet aber nicht bestätigt

kann gesendet werden

kann noch nichtgesendet werden

EmpfängerFenstergröße

rec_base

empfangen und bestätigt

erwartet

Kann noch nichtempfangen werden

ausgeliefert anAnwendung

Fenstergröße

send_base send_next

Sender

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

> 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)

Webbasierte Anwendungen / Internet Protocol SuiteGero Mühl 38

Timeout

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

Webbasierte Anwendungen / Internet Protocol SuiteGero Mühl 39

M: RTT des letzten bestätigten Segmentsα1, α2: Glättungsfaktoren (typisch α1 = α2 = 7/8)

TCP-Überlastkontrolle

> Durch Überlast entsteht Paketverlust

> Ursachen

> Überlasteter Empfängerprozess liest Daten zu langsam

> Überlastete Strecken bzw. Router

Webbasierte Anwendungen / Internet Protocol SuiteGero Mühl 40

Sender

Überlauf nach Netzüberlastung

Empfänger

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

Webbasierte Anwendungen / Internet Protocol SuiteGero Mühl 41

Empfängerfenster

Webbasierte Anwendungen / Internet Protocol SuiteGero Mühl 42

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

Ü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

Webbasierte Anwendungen / Internet Protocol SuiteGero Mühl 43

Schwelle

Größe des Über-lastungsfenster

initial 1 KB ( = MSS)

Überlastungsfenster

Webbasierte Anwendungen / Internet Protocol SuiteGero Mühl 44

1

2

4

8

R1 R2 R3 R4

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

Webbasierte Anwendungen / Internet Protocol SuiteGero Mühl 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

Webbasierte Anwendungen / Internet Protocol SuiteGero Mühl 46

Webbasierte Anwendungen / Internet Protocol SuiteGero Mühl 47

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

Aufbau eines UDP Pakets

Webbasierte Anwendungen / Internet Protocol SuiteGero Mühl 48

Daten

0 8 16 3224UDP-Quellport UDP-Zielport

Länge Prüfsumme

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

Header

Body

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!

Webbasierte Anwendungen / Internet Protocol SuiteGero Mühl 49

2021

23 25 111 161162

TCP

IP

UDP

FTP SMTP HTTP NFS SNMPTelnet

80 53

DNSSSH

22

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.

Webbasierte Anwendungen / Internet Protocol SuiteGero Mühl 50

Fragen?

Webbasierte Anwendungen / Internet Protocol SuiteGero Mühl 51

Dienstgüte

Webbasierte Anwendungen / Internet Protocol SuiteGero Mühl 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

Webbasierte Anwendungen / Internet Protocol SuiteGero Mühl 53

Neue Anwendungen und Anforderungen

> Neue Anwendungen

> Audio

> Video

> Internet Telephony

> Tele Learning

> ...

> Neue Anforderungen

> Echtzeit

> Synchronisation

> Multicast („Fernsehen“ per Internet)

> ...

Webbasierte Anwendungen / Internet Protocol SuiteGero Mühl 54

Dienst Bitrate

Audio MP3 100-200 Kbit/s MPEG Video 2 Mbit/sStandard Video 140 Mbit/sHDTV (1080i50/MPEG-2) 27 Mbit/s

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)

Webbasierte Anwendungen / Internet Protocol SuiteGero Mühl 55

Anwendungen und QoS-Parameter

Webbasierte Anwendungen / Internet Protocol SuiteGero Mühl 56

Anwendung Fehlerrate Verzöge rung 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

Allgemeine QoS-Techniken

> Überdimensionierung

> Pufferung beim Empfänger> Gleicht Schwankungen aus> Üblich sind ca. 10 sec Pufferung

> Eingangssteuerung(engl. Admission Control) > „Türsteher“ entscheidet,

ob Datenstrom akzeptiert wird

> Verkehrsformung (engl. Traffic Shaping)> „Glätten“ des Datenstroms nach vorheriger Vereinbarung

> Reservierung von Ressourcen

Webbasierte Anwendungen / Internet Protocol SuiteGero Mühl 57

Übertra-gungszeit

Pufferung

Ankunft

Senden

Wiedergabe

t

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

Webbasierte Anwendungen / Internet Protocol SuiteGero Mühl 58

„Leaky Bucket“

Webbasierte Anwendungen / Internet Protocol SuiteGero Mühl 59

> Begrenzt diemaximale 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 wer-den Pakete verworfen

> Implementierung des Eimers als Warteschlange

© Tanenbaum, Computer Networks

„Token Bucket“

> Begrenzt durchschnittliche Senderate

> Token werden mitkonstanter Rate in den Eimer gelegt

> Bis zu n Token können gesammelt werden

> Jede Nachricht nimmt beim Senden ein Token

> Bursts bis zu nNachrichten gehen durch

> Es werden keine Nachrichten verworfen, stattdessen wird der Sender blockiert

Webbasierte Anwendungen / Internet Protocol SuiteGero Mühl 60

© Tanenbaum, Computer Networks

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 mit500 KB Kapazität und nachfolgendem 10 MB/sec Leaky Bucket (f)

Webbasierte Anwendungen / Internet Protocol SuiteGero Mühl 61

© Tanenbaum, Computer Networks

QoS-Erweiterungen für das Internet

Webbasierte Anwendungen / Internet Protocol SuiteGero Mühl 62

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

Sender

Empfänger

1. Path

2. Resv

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

Webbasierte Anwendungen / Internet Protocol SuiteGero Mühl 63

Kombination von IntServ und DiffServ

> Endsysteme> Reservieren

> Garantien

> Weitverkehr> Klassen zuteilen

> Einfache - schnelle! -

Bearbeitung

Webbasierte Anwendungen / Internet Protocol SuiteGero Mühl 64

Subnetz A Subnetz BBackbone

IntServ IntServDiffServ

Fragen?

Webbasierte Anwendungen / Internet Protocol SuiteGero Mühl 65

Prof. Dr.-Ing. habil. Gero Mühl

Architektur von Anwendungssystemen (AVA)Fakultät für Informatik und Elektrotechnik (IEF)Universität Rostock

Webbasierte Anwendungen

Socket-Programmierung

Überblick

> Socket-Schnittstelle

> Zeichenkodierung

Webbasierte Anwendungen / Socket-ProgrammierungGero Mühl 2

Socket-Schnittstelle

Webbasierte Anwendungen / Socket-ProgrammierungGero Mühl 3

Programmierschnittstelle für TCP/IP?

> Protokolle definieren> Aufbau der Nachrichten

(Adresse, Port, etc.)

> Ablauf und Regeln des

Nachrichtenaustausches

> Protokolle definieren nicht> Schnittstelle zur

Anwendung (API)

Webbasierte Anwendungen / Socket-ProgrammierungGero Mühl 4

TCPUDP

IPAnwendung

Schnittstelle (API)

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, …

Webbasierte Anwendungen / Socket-ProgrammierungGero Mühl 5

Sockets in Java (Client-Seite)

Webbasierte Anwendungen / Socket-ProgrammierungGero Mühl 6

> Klasse j ava. net . Socket> Endpunkt einer TCP-Verbindung > Bietet zuverlässigen, bidirektionalen Byte-Strom

> Erzeugen und Binden> publ i c Socket ( I net Addr ess addr ess, i nt por t )

publ i c Socket ( St r i ng host , i nt por t )> 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> publ i c I nput St r eam get I nput St r eam( )> publ i c Out put St r eam get Out put St r eam( )> publ i c voi d c l ose( )

Beispiel (Client-Seite)

/ / set up a connect i on t o Uni Rost ocks‘ s webser verSocket socket = new Socket ( " www. uni - r ost ock. de" , 80) ;

/ / get associ at ed i nput and out put st r eamsI nput St r eam i n = socket . get I nput St r eam( ) ; Out put St r eamWr i t er out = new Out put St r eamWr i t er (

socket . get Out put St r eam( ) , " US- ASCI I " ) ;

/ / send HTTP r equestout . wr i t e( " GET / HTTP/ 1. 0\ r \ n\ r \ n" ) ;out . f l ush( ) ;

/ / r ead r epl y and pr i nt i tf or ( i nt r ead=i n. r ead( ) ; r ead! =- 1; r ead=i n. r ead( ) ) {

Syst em. out . pr i nt ( ( char ) r ead) ;}

/ / f r ee syst em r esour cesi n. c l ose( ) ;out . c l ose( ) ;socket . c l ose( ) ;

Webbasierte Anwendungen / Socket-ProgrammierungGero Mühl 7

HTTP-Anfragesenden

Antwort byteweiselesen und ausgeben

Webbasierte Anwendungen / Socket-ProgrammierungGero Mühl 8

Sockets in Java (Server-Seite)

> Klasse j ava. net . Ser ver Socket> Dient dem „Warten auf eingehende Verbindungen“

> Erzeugen und Binden> publ i c Ser ver Socket ( i nt por t )> Bindet Server-Socket an Port port des lokalen Rechners

> Annehmen eingehender Verbindungen> publ i c Socket accept ( )> Liefert „Client“-Socket zur eingegangenen Verbindung> Über den neuen Socket erfolgt die exklusive

Kommunikation mit dem Client

Beispiel (Echo-Server)

/ / cr eat e a ser ver socket and bi nd i t t o por t 8080Ser ver Socket ser ver = new Ser ver Socket ( 8080) ;

/ / wai t f or c l i ent connect i on t o acceptSocket socket = ser ver . accept ( ) ;I nput St r eam i n = socket . get I nput St r eam( ) ;Out put St r eam out = socket . get Out put St r eam( ) ;

/ / echo dat a t hat i s r ead f r om t he socketf or ( i nt r ead=i n. r ead( ) ; r ead! =- 1; r ead=i n. r ead( ) ) {

Syst em. out . pr i nt ( ( char ) r ead) ;out . wr i t e( r ead) ;

}

/ / f r ee syst em r esour cesi n. c l ose( ) ; out . f l ush( ) ; out . c l ose( ) ;socket . c l ose( ) ; ser ver . c l ose( ) ;

Webbasierte Anwendungen / Socket-ProgrammierungGero Mühl 9

Server-Socket an Port 8080 binden und eingehende

Verbindungen annehmen

Server-Socket an Port 8080 binden und eingehende

Verbindungen annehmen

Byteweises Kopieren gelesener Daten

Threads

Als leichtgewichtige Prozesse> Motivation: „Mehrere Dinge

gleichzeitig tun“

> Aktivitätseinheit für

nebenläufige Ausführung

> Teilt sich den Speicher mit

anderen Threads

Als normale Java-Objekte> Besitzen Konstruktoren,

Methoden, Attribute

> Kommunikation durch

gegenseitige Methodenaufrufe

> Vorsicht: Synchronisation

beachten

Webbasierte Anwendungen / Socket-ProgrammierungGero Mühl 10

Java

Vir

tual M

ach

ine

Accept new connections

Handle client #1

Handle client #n…

Sharedobject

Sharedobject

Sharedobject

Sharedobject

Erzeugen von Threads (Variante A)

> Klasse j ava. l ang. Thr ead erweitern> Überschreiben der Methode voi d r un( ) mit eigener Logik> Objekt mit eigenem Konstruktor erzeugen> Starten des Threads durch Methode voi d st ar t ( )

> Alter Thread setzt Ausführung nach st ar t ( ) fort> Neuer Thread beginnt Ausführung in r un( )

publ i c c l ass Si mpl eThr ead1 ext ends Thr ead {publ i c voi d r un( ) {

Syst em. out . pr i nt l n( " Wor l d! " ) ;}publ i c st at i c voi d mai n( St r i ng[ ] ar gs) {

new Si mpl eThr ead1( ) . st ar t ( ) ;Syst em. out . pr i nt ( " Hel l o " ) ;

} }

Webbasierte Anwendungen / Socket-ProgrammierungGero Mühl 11

Welche Ausgabe erzeugt das Programm?

Erzeugen von Threads (Variante B)

> Schnittstelle j ava. l ang. Runnabl e implementieren> Methode voi d r un( ) mit eigener Logik füllen> Objekt-Instanz der eigenen Klasse erzeugen und

dem Konstruktor der Klasse Thread übergeben> Starten des Thread-Objektes durch Methode voi d st ar t ( )

> Alter Thread setzt Ausführung nach st ar t ( ) fort> Neuer Thread beginnt Ausführung in r un( )

publ i c c l ass Si mpl eThr ead2 i mpl ement s Runnabl e {

publ i c voi d r un( ) {t r y{ Thr ead. sl eep( 1000) ; } cat ch( I nt er r upt edExcept i on e) { }Syst em. out . pr i nt l n( „ Thr ead! " ) ;

}

publ i c st at i c voi d mai n( St r i ng[ ] ar gs) {new Thr ead( new Si mpl eThr ead2( ) ) . st ar t ( ) ;Syst em. out . pr i nt ( „ Hel l o “ ) ;

} }

Webbasierte Anwendungen / Socket-ProgrammierungGero Mühl 12

Warum ist Variante A nicht ausreichend?

Beispiel (Multithreaded-Echo)

publ i c c l ass Mul t i t hr eadedEcho ext ends Thr ead {

pr i vat e Socket socket ;

publ i c Mul t i t hr eadedEcho( Socket socket ) {t hi s. socket = socket ;

}

publ i c voi d r un( ) {I nput St r eam i n = socket . get I nput St r eam( ) ;Out put St r eam out = socket . get Out put St r eam( ) ;. . .

}

publ i c st at i c voi d mai n( St r i ng[ ] ar gs) {. . .whi l e ( t r ue) {

Socket c l i ent = ser ver Socket . accept ( ) ;new Mul t i t hr eadedEcho( cl i ent ) . st ar t ( ) ;

} } }

Webbasierte Anwendungen / Socket-ProgrammierungGero Mühl 13

Behandlung eines einzelnen Clients.

Eingehende Verbindungen akzeptieren und in neuem

Thread behandeln.

Java New I/O

”Any problem in computer science

can be solved with another layer

of indirection.“

> Stream-Konzept bietet

hohen Abstraktionsgrad

bequeme Programmierung

> Blockierende Operationen

zwingen zu aufwändigem

Multithreading

Konventionelle Java I/O

“Any performance problem can

be solved by removing a layer

of indirection.”

> Pufferklassen ermöglichen

Nutzung von Systemspeicher

> Kanäle und nicht-blockierende

Operationen

> Auswahl (Selection) sende-

und empfangsbereiter Kanäle

New Java I/O ab J2SE 1.4

Webbasierte Anwendungen / Socket-ProgrammierungGero Mühl 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-SeiteSocket Channel sc = Socket Channel . open( ) ;sc. connect ( new I net Socket Addr ess( host , por t ) ) ;

> Server-SeiteSer ver Socket Channel ssc = Ser ver Socket Channel . open( ) ;ssc. socket ( ) . bi nd( new I net Socket Addr ess( por t ) ) ;

Webbasierte Anwendungen / Socket-ProgrammierungGero Mühl 15

(Nicht-)Blockierende Operationen

> Kanäle sind entweder blockierend oder nicht-blockierend> Blockierend (Default):

channel . conf i gur eBl ocki ng( t r ue) ;> Nicht-blockierend:

channel . conf i gur eBl ocki ng( f al se) ;

> Lesen von einem Kanal> i nt r ead( Byt eBuf f er dst )> Liest verfügbare Bytes in den Puffer dst ein

> Liefert Anzahl gelesener Bytes oder -1 bei End-of-File

> Schreiben in einen Kanal> i nt wr i t e( Byt eBuf f er sr c )> Schreibt Bytes aus dem Puffer sr c in den Kanal

> Liefert Anzahl geschriebener Bytes

Webbasierte Anwendungen / Socket-ProgrammierungGero Mühl 16

Selektoren

> Dienen dem Multiplexen von Kanälen> Bestimmung der I/O-Bereitschaft von Kanälen

> Erzeugung und Registrierung

Sel ect or sel ect or = Sel ect or . open( )

Sel ect i onKey key = channel . r egi st er ( sel ect or , i nt er est s)

> Interest Set (i nt er est s)> Angabe der zu testenden I/O-Operationen pro Kanal/Key

> Integer-Wert durch bitweise Oder-Verknüpfung gebildet

aus

> Sel ect i onKey. OP_READ > Sel ect i onKey. OP_WRI TE> Sel ect i onKey. OP_CONNECT > Sel ect i onKey. OP_ACCEPT

Webbasierte Anwendungen / Socket-ProgrammierungGero Mühl 17

Selected-Key Set

> Auswahl der I/O-bereiten Kanäle> i nt sel ect ( )> Aktualisiert das Selected-Key Set der bereiten Kanäle> Liefert Anzahl der Änderungen (möglicherweise 0)

> Ergebnis der Auswahl: Selected-Key Set> Set <Sel ect i onKey> sel ect edKeys( )> Enthält die Keys der bereiten Kanäle zum Zeitpunkt des

letzten select Aufrufs Gefahr veralteter Informationen> Testen des Ready-Sets eines Keys

> bool ean i sReadabl e( ) > bool ean i sWr i t eabl e( )> bool ean i sConnect abl e( ) > bool ean i sAccept abl e( )

> Explizites Entfernen der Keys nach Behandlung notwendig

Webbasierte Anwendungen / Socket-ProgrammierungGero Mühl 18

Beispiel (New I/O – Echo-Server)

/ / bi nd a non- bl ocki ng ser ver socket channel t o por t 8080Ser ver Socket Channel ssc = Ser ver Socket Channel . open( ) ;ssc. conf i gur eBl ocki ng( f al se) ;I net Socket Addr ess por t = new I net Socket Addr ess( 8080) ;ssc. socket ( ) . bi nd( por t ) ;

/ / cr eat e a sel ect or and r egi st er f or accept i ng new connect i onsSel ect or sel = Sel ect or . open( ) ;ssc. r egi st er ( sel , Sel ect i onKey. OP_ACCEPT) ;

whi l e( t r ue ) { / / mai n l oop

sel . sel ect edKeys( ) . c l ear ( ) ;sel . sel ect ( ) ;

f or ( Sel ect i onKey key : sel . sel ect edKeys( ) ) {/ / handl e channel / key. . .

} }

Webbasierte Anwendungen / Socket-ProgrammierungGero Mühl 19

Auswahl IO-bereiter Kanäle

Iteriere über bereite Kanäle und arbeite

jeden einzeln ab

Beispiel (New I/O – Verbindungen)

/ / accept new cl i ent connect i onsi f ( key. i sAccept abl e( ) ) {

Socket Channel sc = ssc. accept ( ) ;sc. conf i gur eBl ocki ng( f al se) ;

/ / r egi st er new cl i ent connect i onsc. r egi st er ( sel ,

Sel ect i onKey. OP_READ, ByteBuffer.allocate(2048) ) ;

}

Webbasierte Anwendungen / Socket-ProgrammierungGero Mühl 20

Beliebige Objekte können einem Key beigefügt werden Kanalkontext

Beispiel (New I/O – Lesen)

/ / r ead cl i ent dat a i nt o a buf f eri f ( key. i sReadabl e( ) ) {

Socket Channel sc = ( Socket Channel ) key. channel ( ) ;Byt eBuf f er buf = ( Byt eBuf f er ) key. at t achment ( ) ;

i nt r ead = sc. r ead( buf ) ;

/ / EOF det ect ed?i f ( r ead < 0) {

c l i ent . c l ose( ) ; cont i nue;}

/ / r ead successf ul ?i f ( r ead > 0) {

key. i nt er est Ops( key. i nt er est Ops( ) | Sel ect i onKey. OP_WRI TE) ;}

/ / buf f er f ul l ?i f ( ! buf . hasRemai ni ng( ) ) {

key. i nt er est Ops( key. i nt er est Ops( ) & ( ~Sel ect i onKey. OP_READ) ) ;} }

Webbasierte Anwendungen / Socket-ProgrammierungGero Mühl 21

Lesen aus dem Interest-Set löschen

Interest-Set fürs Schreiben erweitern

Kanal und asso-ziierter Kontext

Beispiel (New I/O – Schreiben)

/ / wr i t e dat a i nt o channeli f ( key. i sWr i t abl e( ) ) {

Socket Channel sc = ( Socket Channel ) key. channel ( ) ;Byt eBuf f er buf = ( Byt eBuf f er ) key. at t achment ( ) ;

buf . f l i p( ) ;

i nt wr i t e = sc. wr i t e( buf ) ;

/ / wr i t e successf ul ?i f ( wr i t e > 0) {

key. i nt er est Ops( key. i nt er est Ops( ) | Sel ect i onKey. OP_READ) ;}

/ / buf f er compl et el y wr i t t en?i f ( ! buf . hasRemai ni ng( ) ) {

key. i nt er est Ops( key. i nt er est Ops( ) & ( ~Sel ect i onKey. OP_WRI TE) ) ;}

buf . compact ( ) ;}

Webbasierte Anwendungen / Socket-ProgrammierungGero Mühl 22

Puffer zum Schrei-ben vorbereiten

Geschriebene Daten entfernen und Puffer zum Lesen vorbereiten

Interest-Set fürs Lesen erweitern

Schreiben aus Interest-Set löschen

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.

Webbasierte Anwendungen / Socket-ProgrammierungGero Mühl 23

Fragen?

Webbasierte Anwendungen / Socket-ProgrammierungGero Mühl 24

Zeichenkodierung

Daten = Informationen?

Webbasierte Anwendungen / Socket-ProgrammierungGero Mühl 26

10 01

1111 1 0 1 0 0 010

0

0xCE 0xB1?

52 913(Big Endian)

45 518(Little Endian)

α(ISO-Latin-1)

α(UTF-8)

N1(7 Bit ASCII) Îė

(ISO-Latin-2)

Wie lässt sich 0xCE 0xB1 interpretieren?

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

Webbasierte Anwendungen / Socket-ProgrammierungGero Mühl 27

ASCII

> American Standard Code for Information Interchange

(ASCII)> 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

Webbasierte Anwendungen / Socket-ProgrammierungGero Mühl 28

…0 …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 SUB ESC FS GS RS US

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

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

Webbasierte Anwendungen / Socket-ProgrammierungGero Mühl 29

ISO-8859-1 (inkl. Steuerzeichen).

…0 …1 …2 …3 …4 …5 …6 …7 …8 …9 …A …B …C …D …E …F

8… PAD HOP BPH NBH IND NEL SSA ESA HTS HTJ VTS PLD PLU RI SS2 SS3

9… DCS PU1 PU2 STS CCH MW SPA EPA SOS SGCI SCI CSI ST OSC PM APC

A… NBSP ¡ ¢ £ ¤ ¥ ¦ § ¨ © ª « ¬ SHY ® ¯

B… ° ± ² ³ ´ µ ¶ · ¸ ¹ º » ¼ ½ ¾ ¿

C… À Á Â Ã Ä Å Æ Ç È É Ê Ë Ì Í Î Ï

D… Ð Ñ Ò Ó Ô Õ Ö × Ø Ù Ú Û Ü Ý Þ ß

E… à á â ã ä å æ ç è é ê ë ì í î ï

F… ð ñ ò ó ô õ ö ÷ ø ù ú û ü ý þ ÿ

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

Webbasierte Anwendungen / Socket-ProgrammierungGero Mühl 30

ISO-8859-2 (inkl. Steuerzeichen).

…0 …1 …2 …3 …4 …5 …6 …7 …8 …9 …A …B …C …D …E …F

8… PAD HOP BPH NBH IND NEL SSA ESA HTS HTJ VTS PLD PLU RI SS2 SS3

9… DCS PU1 PU2 STS CCH MW SPA EPA SOS SGCI SCI CSI ST OSC PM APC

A… NBSP Ė ˘ Ł ¤ ġ į § ¨ Š Ş ij Ĺ SHY Ž Ļ

B… ° ė ˛ ł ´ Ģ İ ˇ ¸ š ş Ĵ ĺ ˝ ž ļ

C… ī Á Â Ĕ Ä ğ Ć Ç Č É ě Ë ĝ Í Î Ę

D… Ě ĥ ħ Ó Ô ĩ Ö × ĭ ĵ Ú ķ Ü Ý ı ß

E… Ĭ á â ĕ ä Ġ ć ç č é Ĝ ë Ğ í î ę

F… đ Ħ Ĩ ó ô Ī ö ÷ Į Ķ ú ĸ ü ý IJ ˙

Unicode

> 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, …

Webbasierte Anwendungen / Socket-ProgrammierungGero Mühl 31

Zeichen

a (lat. A)α (Alpha)א (Alef)

Nummer(Codepunkt)

U+0061U+03B1U+05D0

Repräsen-tation (UTF-8)

0x610xCE 0xB10xD7 0x90

UTF-8 Kodierung

Startbyte

> 0xxxxxxxÄquivalent zu ASCII

> 1...10x...xAnzahl der führenden 1 =

Anzahl der Bytes gesamt

Folgebyte(s)

> 10xxxxxx

> Anzahl: so viele wie nötig

Webbasierte Anwendungen / Socket-ProgrammierungGero Mühl 32

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

Charsets in Java

> Klasse java.nio.charset.Charset> Liste der auf der Plattform verfügbaren Zeichensätze

publ i c st at i c Sor t edMap<St r i ng, Char set > avai l abl eChar set s( )

> Zeichensatz unter kanonischem Namen anfordernpubl i c st at i c Char set f or Name( St r i ng char set Name)

> (Indirekte) Nutzung durch andere Klassen

> Charset-Objekte besitzen Methoden zum> Kodieren: publ i c Byt eBuf f er encode( Char Buf f er cb)> Dekodieren: publ i c Char Buf f er decode( Byt eBuf f er bb)

> Charset-Objekte erlauben die Erzeugung von> Kodierern: publ i c abst r act Char set Encoder newEncoder ( )> Dekodierern: publ i c abst r act Char set Decoder

newDecoder ( )

Webbasierte Anwendungen / Socket-ProgrammierungGero Mühl 33

Kodieren /Dekodieren

> Klassen java.io.{InputStreamReader|OutputStreamWriter}> Angabe des zu nutzenden Zeichensatzes bei Objekterzeugung> Kodieren:

publ i c Out put St r eamWr i t er ( Out put St r eam out ,St r i ng char set Name)

> Dekodieren: publ i c I nput St r eamReader ( I nput St r eam i n,

St r i ng char set Name)

> Klasse java.lang.String> Kodieren:

publ i c byt e[ ] get Byt es( St r i ng char set Name)> Dekodieren:

publ i c St r i ng( byt e[ ] byt es , St r i ng char set Name)

Webbasierte Anwendungen / Socket-ProgrammierungGero Mühl 34

Literatur

> Registrierte Character Sets> http://www.iana.org/assignments/character-sets

> Unicode> http://unicode.org/

Webbasierte Anwendungen / Socket-ProgrammierungGero Mühl 35

Prof. Dr.-Ing. habil. Gero Mühl

Architektur von Anwendungssystemen (AVA)Fakultät für Informatik und Elektrotechnik (IEF)Universität Rostock

Webbasierte Anwendungen

Grundlegende Dienste

Überblick

> Domain Name Service (DNS)

> E-Mail

> File Transfer Protocol (FTP)

> Secure Shell (SSH)

Webbasierte Anwendungen / Grundlegende DiensteGero Mühl 2

Domain Name Service (DNS)

Webbasierte Anwendungen / Grundlegende DiensteGero Mühl 4

Domain Name Service (DNS)

> Dienst zur Abbildung von Namen auf IP-Adressen

> Hierarchisches Domänen-Konzept> Domänen unabhängig von physischen Netzen> Beispiel: i nf or mat i k. uni - r ost ock. de> uni - r ost ock 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

DNS – Top Level Domains

> Organisatorisch COM, EDU, GOV, MIL, ORG, NET, INT, ...

> Geographisch DE, UK, US, AU, TO, ...

Webbasierte Anwendungen / Grundlegende DiensteGero Mühl 5

de

root

com

ibm

edu

purdue

csee ...

uni-rostock heise

informatik

...… ...

. . .

. . .... . . .

org

aidb

Top Level Domains

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 Erhöhung der Zuverlässigkeit> Jeder Name Server kennt mindestens einen übergeordneten Server> Primary Name Server kennen die Root Name Server

Webbasierte Anwendungen / Grundlegende DiensteGero Mühl 6

decom

ibm

edu

princeton

csee

...

heise

informatik

...… ...

. . .

. . .... . . .

org

aidb

physik

uni-rostock

root

Webbasierte Anwendungen / Grundlegende DiensteGero Mühl 7

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)

Resource Record Typen (Beispiele)

Typ Bedeutung Wert

SOA NS zuständig für mehrere ParameterA IP-Adresse f. Namen 32-Bit-Integer MX E-Mail Knoten Priorität, Empfänger für ...NS Name Server Name eines NSCNAME Alias Name einer DomänePTR inverse Abbildung Name HINFO Host-Beschreibung ASCII-TextTXT Beliebiger Text ASCII-Text

Webbasierte Anwendungen / Grundlegende DiensteGero Mühl 8

Beispiel

Webbasierte Anwendungen / Grundlegende DiensteGero Mühl 9

> di g +nocmd uni - r ost ock. de any +mul t i l i ne +noal l +answer

uni - r ost ock. de. 86400 I N A 139. 30. 8. 152uni - r ost ock. de. 86400 I N A 139. 30. 8. 153uni - r ost ock. de. 86400 I N A 139. 30. 8. 196uni - r ost ock. de. 86400 I N A 139. 30. 8. 197uni - r ost ock. de. 86400 I N A 139. 30. 8. 29uni - r ost ock. de. 86400 I N NS ws- kar 1. wi n- i p. df n. de.uni - r ost ock. de. 86400 I N NS t op. uni - r ost ock. de.uni - r ost ock. de. 86400 I N NS hp1. uni - r ost ock. de.uni - r ost ock. de. 86400 I N NS deneb. df n. de.uni - r ost ock. de. 86400 I N SOA t op. uni - r ost ock. de.

host mast er . uni - r ost ock. de. (2010110801 ; ser i al28800 ; r ef r esh ( 8 hour s)7200 ; r et r y ( 2 hour s)604800 ; expi r e ( 1 week)172800 ; mi ni mum ( 2 days))

uni - r ost ock. de. 86400 I N MX 26 i da. uni - r ost ock. de.uni - r ost ock. de. 86400 I N MX 11 ant i v i r us. uni - r ost ock. de.

Namensdienst

> Iterative Kooperation der Name Server> Beispiel

Caching des Ergebnisses im lokalen Name Server

Bereinigung des Caches entsprechend der Time-to-Live des Eintrags

Webbasierte Anwendungen / Grundlegende DiensteGero Mühl 10

1cicada.cs.princeton.edu

128.112.136.60

8

2

cicada.cs.princeton.edu4

cs.princeton.edu, 128.112.136.10

5

6

7

LokalerNameServer

RootNameServer

PrincetonNameServer

CSNameServer

Client

.edu

.princeton.edu

.cs.princeton.edu

3

Namensdienst

> Beispiel: E-Mail an „[email protected]

Webbasierte Anwendungen / Grundlegende DiensteGero Mühl 11

Mailprogram

Benutzer

2 cs.princeton.edu

128.112.136.153

[email protected] 1

128.112.136.15 4

128.112.136.15 5

NameServer

Mail Program

TCP

IP

Die Anwendung, nicht TCP, löst den Namen auf!

E-Mail

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

Webbasierte Anwendungen / Grundlegende DiensteGero Mühl 13

TransferAgent

User Agent

TransferAgent

User Agent

TransferAgent

Thunderbird, Outlook, pine, mutt, mail, …

Postfix, Exim,Sendmail, …

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)> 220 (= service ready)> 250 (= other party OK)> 354 (= send mail)> ....

Webbasierte Anwendungen / Grundlegende DiensteGero Mühl 14

SMTP – Beispieldialog

Webbasierte Anwendungen / Grundlegende DiensteGero Mühl 15

Client Server

HELO otto.edu

MAIL FROM: <[email protected]>

RCPT TO: <[email protected]>

DATA

text text text text .......

QUIT

220 fritz.com SMTP service ready

250 fritz.com says hello to otto.edu

250 sender OK

250 recipient OK

354 send mail; end with "."-line

250 message accepted

221 fritz.com closing connection

Nachrichtenformate [RFC 822, 2822]

> Aufbau einer Nachricht > Umschlag (Envelope) + Briefkopf (Header) + Rumpf (Body)

> Umschlag wird von den Transfer Agents benutzt und gebildet

> Header-Felder werden für den Transport benötigt> To: (primäre) Empfänger> Cc: (sekundäre) Empfänger> Bcc: (unsichtbare) Empfänger> From: Briefschreiber> Sender: Absender (falls unterschiedlich von From)> Received: pro Zwischen-Transfer-Agent eine Zeile > Return-Path: Rückweg für Antworten

Webbasierte Anwendungen / Grundlegende DiensteGero Mühl 16

Body

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)

Webbasierte Anwendungen / Grundlegende DiensteGero Mühl 17

Webbasierte Anwendungen / Grundlegende DiensteGero Mühl 18

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)> Vorgeschlagen RFC 1341 und überarbeitet in RFC 2045> Transport von (Binär)daten als US-ASCII Kodierung> Keine Änderung des SMTP Kompatibilität zu Mail-Servern> Aber: Anpassung der Mail-Clients erforderlich

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

Webbasierte Anwendungen / Grundlegende DiensteGero Mühl 19

Content-Transfer-Encoding

> 7 Bit> 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)

> 8 Bit> 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

Webbasierte Anwendungen / Grundlegende DiensteGero Mühl 20

Quoted-Printable [RFC 2045]

> 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

Webbasierte Anwendungen / Grundlegende DiensteGero Mühl 21

Hüte(Latin-1)

H=FCte(Quoted-Printable)

Base64 [RFC 2045]

> 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)

Webbasierte Anwendungen / Grundlegende DiensteGero Mühl 22

Hüte(Latin-1)

SPx0ZQ==(Base64)

Base64 Beispiel

Webbasierte Anwendungen / Grundlegende DiensteGero Mühl 23

Text M a n

ASCII 0x4D (77) 0x61 (97) 0x6E (110)

Bit Pattern 0 1 0 0 1 1 0 1 0 1 1 0 0 0 0 1 0 1 1 0 1 1 1 0

Index 0x13 (19) 0x15 (22) 0x05 (5) 0x2E (46)

Base64 T W F u

Base64 Tabelle

Webbasierte Anwendungen / Grundlegende DiensteGero Mühl 24

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) /

Content-Type [RFC 2046]

Webbasierte Anwendungen / Grundlegende DiensteGero Mühl 25

> 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

image jpeg JPEG-Dateien

png PNG-Dateien

audio basic Sound-Dateien

video mpeg MPEG-Dateien

application octet-stream Unbekannte Anwendungsdaten

postscript Postscript

message external-body Nachricht referenziert externen Inhalt

partial Nachricht mit Teilinhalt

rfc822 Nachricht nach RFC 2822

multipart alternative Mehrteilige Daten alternativ

digest Mehrteilige Daten auswahl

mixed Mehrteilige Daten gemischt

parallel Mehrteilige Daten parallel

X-Typen

Webbasierte Anwendungen / Grundlegende DiensteGero Mühl 26

> Verwendung nicht-standardisierter Subtypen ist zulässig> Kennzeichnung mit Präfix „x-“

> Keine Eindeutigkeit > Aber viele Subtypen im Gebrauch

Typ / Subtyp Beschreibung

application 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

audio x-ms-wma Windows Media Audio

x-wav WAV Dateien

video x-ms-wmv Windows Media Video

Multipart Beispiel (Message Parts)

MI ME- Ver si on: 1. 0Fr om: Al i ce Al i sson <al i ce@al i sson. com>TO: Bob Bobi ngt on <bob@bobi ngt on. com>Subj ect : A mul t i par t exampl eCont ent - Type: mul t i par t / mi xed; boundar y=uni que- boundar y- 1

Thi s i s t he pr eambl e ar ea of a mul t i par t message. Mai l r eader st hat under st and mul t i par t f or mat shoul d i gnor e t hi s pr eambl e.- - uni que- boundar y- 1

Some t ext appear s her e. . . Si nce no header f i el ds wer e gi ven t het ext i s assumed t o be US- ASCI I .

- - uni que- boundar y- 1Cont ent - t ype: t ext / pl ai n; char set =US- ASCI I

Thi s coul d have been par t of t he pr evi ous par t , but i l l ust r at esexpl i c i t ver sus i mpl i c i t t ypi ng of body par t s.

Webbasierte Anwendungen / Grundlegende DiensteGero Mühl 27

Eine eindeutige Zeichenkette als Begrenzer trennt einzelne

Nachrichtenteile voneinander ab.

Multipart Beispiel (Transfer Encodings)

- - uni que- boundar y- 1 Cont ent - Type: t ext / pl ai n; char set =I SO- 8859- 1Cont ent - Tr ansf er - Encodi ng: quot ed- pr i nt abl e

Thi s i s Lat i n- 1 t ext whi ch i s encoded usi ng quot ed pr i nt abl e=20=i n or der t o pr eser ve Ger man Uml aut e: H=FCt e and H=E4user .

- - uni que- boundar y- 1 Cont ent - Type: t ext / pl ai n; char set =UTF- 8Cont ent - Tr ansf er - Encodi ng: Base64

VGhpcyBpcyBVVEYt OCB0ZXh0I HdoaWNoI Gl zI EJhc2U2NCBl bmNvZGVkI HRvI HByZXNl cnZl I Edl cm1hbi BVbWxhdXRl Oi BI w7x0ZSBhbmQgSMOkdXNl ci 4=

Webbasierte Anwendungen / Grundlegende DiensteGero Mühl 28

This is UTF-8 text which is Base64 encoded to preserve German Umlaute: Hüte and Häuser.

Multipart Beispiel (Nesting)

- - uni que- boundar y- 1Cont ent - Type: mul t i par t / par al l el ; boundar y=uni que- boundar y- 2

- - uni que- boundar y- 2Cont ent - Type: audi o/ basi cCont ent - Tr ansf er - Encodi ng: base64

. . . base64- encoded 8000 Hz audi o dat a goes her e . . .

- - uni que- boundar y- 2Cont ent - Type: i mage/ pngCont ent - Tr ansf er - Encodi ng: base64

. . . base64- encoded i mage dat a goes her e . . .

- - uni que- boundar y- 2

- - uni que- boundar y- 1Cont ent - t ype: t ext / r i cht ext

Thi s i s r i cht ext . I sn' t i t cool ?

- - uni que- boundar y- 1

Webbasierte Anwendungen / Grundlegende DiensteGero Mühl 29

Verschachtelung von Multipart Nachrichten.

Webbasierte Anwendungen / Grundlegende DiensteGero Mühl 30

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

(j ava - cl asspat h / pat h/ t o/ mai l . j ar MyPr ogr am)

> 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

(j ava - cl asspat h / pat h/ t o/ act i vat i on. j ar MyPr ogr am)

Verbindungen

> Klasse j avax. mai l . Sessi on> 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. mai l . { smt p | pop3 | i map | dsn} und j avax. mai l

> Versenden von Nachrichten erfolgt über Transport-Mechanismus der Verbindung

> BeispielPr oper t i es pr ops = new Pr oper t i es( ) ;pr ops. set Pr oper t y( " mai l . smt p. host " , " mai l . cs. t u- ber l i n. de" ) ;

Sessi on sessi on = Sessi on. get Def aul t I nst ance( pr ops) ;Message msg = new Mi meMessage( sessi on) ;

…Tr anspor t . send( msg ) ;

Webbasierte Anwendungen / Grundlegende DiensteGero Mühl 31

MIME-Nachrichten

> Klasse j avax. mai l . Mi meMessage> Repräsentiert eine einfache MIME-Nachricht

> Bietet Methoden zum Setzen> des Absenders und der Empfänger> des Betreffs und weiterer Header-Felder> des Nachrichteninhalts

> BeispielI nt er net Addr ess f r om = new I nt er net Addr ess( " al i ce@al l i son. com" ) ;I nt er net Addr ess t o = new I nt er net Addr ess( " bob@bobi ngt on. com" ) ;

msg = new Mi meMessage( sessi on) ;

msg. set Fr om( f r om) ;msg. set Reci pi ent ( Message. Reci pi ent Type. TO, t o) ;msg. set Subj ect ( " JavaMai l API exampl e" ) ;

msg. set Cont ent ( " I t wor ks! I sn' t i t cool ?" , " t ext / pl ai n" ) ;

Tr anspor t . send( msg) ;

Webbasierte Anwendungen / Grundlegende DiensteGero Mühl 32

MIME Multipart-Nachrichten

> Klasse j avax. mai l . i nt er net . Mi meMul t i par t> Container für mehrere MIME Nachrichtenteile> Angabe des Subtyps (mixed, alternative, …) bei Erzeugung

> Klasse j avax. mai l . i nt er net . Mi meBodyPar t> Repräsentiert einen MIME Nachrichtenteil

> Beispiel

Mi meBodyPar t t xt = new Mi meBodyPar t ( ) ;t xt . set Cont ent ( " Thi s i s pl ai n t ext . " , " t ext / pl ai n" ) ;

Mi meBodyPar t ht ml = new Mi meBodyPar t ( ) ;ht ml . set Cont ent ( " <ht ml ><body>Thi s i s <b>HTML</ b>. </ body></ ht ml >" ,

" t ext / ht ml " ) ;

Mi meMul t i par t cont ent = new Mi meMul t i par t ( " al t er nat i ve" ) ;cont ent . addBodyPar t ( t xt ) ; cont ent . addBodyPar t ( ht ml ) ;

Message msg = . . .msg. set Cont ent ( cont ent ) ;

Webbasierte Anwendungen / Grundlegende DiensteGero Mühl 33

Base64 Kodierung in Java

> JavaMail API> Selbständige Wahl passender Transfer-Kodierung Transparenz> Manuelle Vorgabe durch explizites Setzen des MIME Headers:

msg. set Header ( " Cont ent - Tr ansf er - Encodi ng" , " Base64" )

> Java SDKs> Klassen sun. mi sc. { BASE64Encoder | BASE64Decoder }> Nicht öffentliches Paket keine Garantien für die Zukunft> Alternative: Commons-Bibliothek des Apache Jakarta Projekts:

http://commons.apache.org/codec

> Beispiel

byt e[ ] byt es1 = { 0x08, 0x15, 0x47, 0x11} ;St r i ng s = new BASE64Encoder ( ) . encode( byt es1) ;byt e[ ] byt es2 = new BASE64Decoder ( ) . decodeBuf f er ( s) ;Syst em. out . pr i nt l n( Ar r ays. equal s( byt es1, byt es2) ) ;

Webbasierte Anwendungen / Grundlegende DiensteGero Mühl 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/

Webbasierte Anwendungen / Grundlegende DiensteGero Mühl 35

File Transfer Protocol (FTP)

Webbasierte Anwendungen / Grundlegende DiensteGero Mühl 37

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 im Klartext

übertragen> Bietet interaktiven Zugang als auch Programmierschnittstelle> Verschiedene Datenformate (ASCII und binär)

FTP-Verbindungen

> Arbeitet mit TCP> 2 Verbindungen pro Übertragung> Kontrollport = 21> Datenport = 20

> Zusätzlich existiert ein Trivial File Transfer Protocol (TFTP)> Aufbauend auf UDP, kleiner Umfang, einfache Implementierung

Webbasierte Anwendungen / Grundlegende DiensteGero Mühl 38

Daten Steuerung DatenSteuerung

T C P

Client Server

FTP-Sitzung

$ f t p di amant . vsb. i nf or mat i k . uni - f r ankf ur t . deConnect ed t o di amant . vsb. i nf or mat i k . uni - f r ankf ur t . de220 di amant . vsb. i nf or mat i k . uni - . . . FTP ser ver r eady.Name ( di amant : ot t o) : anonymous331 Guest l ogi n ok, send i dent as passwor d.Passwor d: onkel @ot t o. edu230 Guest l ogi n ok, access r est r i c t i ons appl y.f t p> cd pub200 PORT command ok.f t p> get some. f i l e. dat a my. l ocal . dat a150 Openi ng dat a connect i on f or / bi n/ l s ( 141. 2. 2. 1, 2363) ( 290455 byt es) .226 Tr ansf er compl et e.300000 byt es r ecei ved i n 99 seconds ( 30 Kbyt es/ s)f t p> c l ose221 Goodbye.f t p> qui t$

Webbasierte Anwendungen / Grundlegende DiensteGero Mühl 39

FTP mit Java

URL ur l = new URL(" f t p: / / user 01: passwd@f t p. f oo. com/ README. t xt ; t ype=i " ) ;

URLConnect i on ur l c = ur l . openConnect i on( ) ;

I nput St r eam i s = ur l c . get I nput St r eam( ) ; / / To downl oadOut put St r eam os = ur l c . get Out put St r eam( ) ; / / To upl oad

Webbasierte Anwendungen / Grundlegende DiensteGero Mühl 40

Telnet, SSH

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

Webbasierte Anwendungen / Grundlegende DiensteGero Mühl 42

telnetTCP

Client ServerTerminal telnet

Betriebs-system

Betriebs-system

Webbasierte Anwendungen / Grundlegende DiensteGero Mühl 43

SSH [RFC 4250-4254]

> Sicherer Ersatz für Telnet (TCP / Port 22)> SSH Suite

1. ssh: "shell" that connects to the remote machine.2. scp: batch file transfers.3. sftp: interactive file transfers.4. ssh-keygen: generates private-public authentication keys5. ssh-copy-id: copies public key to remote host.6. ssh-agent: daemon used to automate client's

authentications7. ssh-add: loads private keys into ssh-agent process8. ssh-keyscan: get public key of remote host9. sshd: a server program running on the remote machine

> Bekannte Implementationen: openSSH, PuTTY

Webbasierte Anwendungen / Grundlegende DiensteGero Mühl 44

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- i d [ - i i dent i t y_f i l e]

[ user @] machi ne

> Passphrase im ssh-agent hinterlegen (z.B. beim Start von X)> ssh- add [ i dent i t y_f i l e]

> Einloggen ohne Passwort> ssh [ - i i dent i t y_f i l e] [ user @] machi ne

Webbasierte Anwendungen / Grundlegende DiensteGero Mühl 45

SSH – Tunnel / Local Port Forwarding

> Einrichtung einer Weiterleitung eines lokalen Ports an einen entfernten Port> ssh - g - N - L 50022: publ i c_host : 22

user @publ i c_host

> Nutzung der Weiterleitung bewirkt Anmeldung auf Rechner publ i c_host> ssh –p 50022 user @pr i vat e_host

Port50022

Port22

private_host public_host

Webbasierte Anwendungen / Grundlegende DiensteGero Mühl 46

SSH – Tunnel / Remote Port Forwarding

> Einrichtung einer Weiterleitung eines entfernten Ports auf einen lokalen Port > ssh - g - N - R 50023: l ocal host : 22

user @publ i c_host

> Nutzung der Weiterleitung bewirkt Anmeldung auf Rechner private_host> ssh –p 50023 user @publ i c_host

Port22

Port50023

private_host public_host

Jakarta Commons Net

Jakarta Commons Net

> Sammlung von Java-Klassen unter Open Source-Lizenz für den Bereich Internetprotokolleht t p: / / commons. apache. or g/ net

> Unterstützte Protokolle > FTP/FTPS > NNTP > SMTP > POP3 > Telnet > …

Webbasierte Anwendungen / Grundlegende DiensteGero Mühl 48

Fragen?

Webbasierte Anwendungen / Grundlegende DiensteGero Mühl 49

Prof. Dr.-Ing. habil. Gero Mühl

Architektur von Anwendungssystemen (AVA)Fakultät für Informatik und Elektrotechnik (IEF)Universität Rostock

Webbasierte Anwendungen

World Wide Web

Überblick

> Architektur des World Wide Web (WWW)

> Hypertext Transfer Protocol (HTTP)

> Hypertext Markup Language (HTML)

> Cascading Style Sheets (CSS)

Webbasierte Anwendungen / World Wide WebGero Mühl 2

Architektur des WWW

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> 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 WebGero Mühl 4

Architektur

Webbasierte Anwendungen / World Wide WebGero Mühl 5

WWWBrowser

FTP

News

E-Mail

Telnet

HTMLDokument

Benutzer Webclient(HTTP-Client)

Webserver(HTTP-Server)

HTTP

Webclients

Grafische Browser> Direkt darstellbar sind

> 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

Zeilenorientierte Browser> Reine Textdarstellung ohne

Bilder, Audio, Video, etc.> Bedienung über Tastatur> Geeignet für Verbindungen mit

geringer Übertragungsrate> Beispiele

> Lynx> Emacs

Clients ohne Darstellung> wget> cURL

Webbasierte Anwendungen / World Wide WebGero Mühl 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 unauthorized // keine Zugangsberechtigung> 404 not found // Dokument nicht gefunden> 500 server error // Fehler mit Fehlermeldung

Webbasierte Anwendungen / World Wide WebGero Mühl 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. yal e. edu - - [ 16/ Jun/ 1997: 04: 29: 55- 0100] GET / i ndex. ht ml / HTTP1. 0 200 733

> Error Log> pro Fehler eine Zeile> Beispiel (Error Log)

> [ 16/ Jun/ 1997: 04: 55: 29- 0100] [ NOT AUTHORI ZED] [ host : cs. yal e. edu r ef er er : ht t p: / / her a. gmd. de/ ] / i ndex. ht ml

> Andere Error Log-Formate sind möglich

Webbasierte Anwendungen / World Wide WebGero Mühl 8

Laden und Anzeigen einer Webseite

> Ausgangspunkt: Eingabe der URL einer Seite im Webbrowser1. Verbindungsaufbau zwischen Webbrowser und

Webserver2. Browser schickt HTTP-Anfrage an den Server3. Server liefert HTTP-Antwort mit HTML-Dokument bzw.

einem Fehlercode zurück4. Browser interpretiert HTML-Dokument und zeigt es an5. Schließen der Verbindung

> Beim Klicken auf einen Link (= URL) läuft der gleiche Vorgang mit der neuen URL ab

Webbasierte Anwendungen / World Wide WebGero Mühl 9

WWW Proxy

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

Webbasierte Anwendungen / World Wide WebGero Mühl 10

Cache

GET …

HTTP/1.1 …

HTTP Client HTTP ServerProxy

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

Webbasierte Anwendungen / World Wide WebGero Mühl 11

[Path (and File Name)]Protocol Host Name [ :Port ] [Query]

http://kbs.cs.tu-berlin.de/cgi-bin/anmeldung.cgi?LV=WBA

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

Webbasierte Anwendungen / World Wide WebGero Mühl 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]

Webbasierte Anwendungen / World Wide WebGero Mühl 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

Webbasierte Anwendungen / World Wide WebGero Mühl 14

Fragen?

Webbasierte Anwendungen / World Wide WebGero Mühl 15

Hypertext Transfer Protocol (HTTP)

Webbasierte Anwendungen / World Wide WebGero Mühl 17

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

Webbasierte Anwendungen / World Wide WebGero Mühl 18

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

HTTP-Request

> Request-Zeile<Met hod> <Ressour ce> <HTTP- Ver s i on><CR><LF>> Methode: Request-Anweisung (GET, HEAD, POST, ...)> Beispiel: GET / i ndex. ht ml ?l ang=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)

Webbasierte Anwendungen / World Wide WebGero Mühl 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

Webbasierte Anwendungen / World Wide WebGero Mühl 20

Beispiel HTTP-Request

GET / i ndex. ht ml HTTP/ 1. 1\ r \ n

Host : l ocal host : 8080\ r \ n

User - Agent : Mozi l l a/ 5. 0 ( X11; U; Li nux i 686; de; r v: 1. 8. 1. 11)

Gecko/ 20071127 Fi r ef ox/ 2. 0. 0. 11\ r \ n

Accept : t ext / xml , appl i cat i on/ xml , appl i cat i on/ xht ml +xml ,

t ext / ht ml ; q=0. 9, t ext / pl ai n; q=0. 8, i mage/ 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 - Encodi ng: gzi p, def l at e\ r \ n

Accept - Char set : I SO- 8859- 1, ut f - 8; q=0. 7, * ; q=0. 7\ r \ n

Keep- Al i ve: 300\ r \ n

Connect i on: keep- al i ve\ r \ n

Pr agma: no- cache\ r \ n

Cache- Cont r ol : no- cache\ r \ n

Webbasierte Anwendungen / World Wide WebGero Mühl 21

MIME-Type

Charset

HTTP-Response

Webbasierte Anwendungen / World Wide WebGero Mühl 22

> Statuszeile<HTTP- Ver si on> <Code> <Phr ase><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

HTTP-Status-Codes

> Informational 1xx100 Continue101 Switching Protocols

> Success 2xx200 OK 201 Created 202 Accepted 204 No Content

> Redirection 3xx300 Multiple Choices301 Moved Permanently302 Moved Temporarily304 Not Modified

> Client Error 4xx400 Bad Request401 Unauthorized403 Forbidden404 Not Found

> Server Error 5xx500 Internal Server Error501 Not Implemented502 Bad Gateway503 Service Unavailable

Webbasierte Anwendungen / World Wide WebGero Mühl 23

Beispiel HTTP-Response

HTTP/ 1. 1 200 OK\ r \ n

Ser ver : Apache- Coyot e/ 1. 1\ r \ n

ETag: W/ " 8144- 1201556374000" \ r \ n

Last - Modi f i ed: Mon, 28 Jan 2008 21: 39: 34 GMT\ r \ n

Cont ent - Type: t ext / ht ml \ r \ n

Cont ent - Lengt h: 8144\ r \ n

Dat e: Sat , 03 May 2008 13: 02: 20 GMT\ r \ n

\ r \ n

<?xml ver si on=" 1. 0" encodi ng=" I SO- 8859- 1" ?>

<! DOCTYPE ht ml PUBLI C " - / / W3C/ / DTD XHTML 1. 0 St r i ct / / EN"

" ht t p: / / www. w3. or g/ TR/ xht ml 1/ DTD/ xht ml 1- st r i c t . dt d" >

<ht ml >

</ ht ml >

Webbasierte Anwendungen / World Wide WebGero Mühl 24

MIME-Type

Charset im Body

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

Webbasierte Anwendungen / World Wide WebGero Mühl 25

URLs in Java

> Klasse j ava. net . URL> Repräsentiert einen URL Zeiger auf Ressource im WWW> String-Repräsentation eines URL für HTTP

" ht t p: " " / / " host [ " : " por t ] [ abs_pat h [ " ?" quer y] ]

> Erzeugen eines URL-Objektes> Diverse Konstruktoren (meist basierend auf Strings)> Absolute URLs

URL kbs1 = new URL( " ht t p: / / www. kbs. t u- ber l i n. de/ i ndex. ht ml " ) ;URL kbs2 = new URL( " ht t p" , " www. kbs. t u- ber l i n. de" , " i ndex. ht ml " ) ;URL kbs3 = new URL( " ht t p" , " www. kbs. t u- ber l i n. de" ,

80, " i ndex. ht ml " ) ;

> Relative URLsURL domai nUr l = new URL( " ht t p: / / www. kbs. t u- ber l i n. de" ) ; URL i ndexUr l = new URL( domai nUr l , " i ndex. ht ml " ) ;URL t eachi ngUr l = new URL( domai nUr l , " t eachi ng. ht ml #i pa" ) ;

Webbasierte Anwendungen / World Wide WebGero Mühl 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 URLSt r i ng spec = " ht t p: / / www. kbs. t u-

ber l i n. de: 80/ i ndex. ht ml ?l ang=en#i nf o" ) ;URL ur l = new URL( spec) ;

Syst em. out . pr i nt l n( ur l . get Pr ot ocol ( ) ) ; / / ht t pSyst em. out . pr i nt l n( ur l . get Host ( ) ) ; / / www. kbs. t u- ber l i n. de Syst em. out . pr i nt l n( ur l . get Por t ( ) ) ; / / 80 Syst em. out . pr i nt l n( ur l . get Fi l e( ) ) ; / / / i ndex. ht ml ?l ang=enSyst em. out . pr i nt l n( ur l . get Pat h( ) ) ; / / / i ndex. ht mlSyst em. out . pr i nt l n( ur l . get Quer y( ) ) ; / / l ang=enSyst em. out . pr i nt l n( ur l . get Ref ( ) ) ; / / i nf o

Webbasierte Anwendungen / World Wide WebGero Mühl 27

Direktes Lesen von einer URL

URL yahoo = new URL( " ht t p: / / www. yahoo. com" ) ;

Buf f er edReader i n = new Buf f er edReader (

new I nput St r eamReader (yahoo. openSt r eam( ) ) ) ;

St r i ng i nput Li ne;

whi l e ( ( i nput Li ne = i n. r eadLi ne( ) ) ! = nul l )Syst em. out . pr i nt l n( i nput Li ne) ;

i n. c l ose( ) ;

Webbasierte Anwendungen / World Wide WebGero Mühl 28

URLConnection

> Klasse j ava. net . URLConnect i on> Repräsentiert eine Verbindung zu einer URL

> Erzeugung> Methode openConnect i on der Klasse URL

URL ur l = new URL( " ht t p: / / www. kbs. t u-ber l i n. de/ i ndex. ht ml " ) ;

URLConnect i on con = ur l . openConnect i on( ) ;

> 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

Webbasierte Anwendungen / World Wide WebGero Mühl 29

Webbasierte Anwendungen / World Wide WebGero Mühl 30

Empfang von Daten

> Lesen der Header-Felder nach Verbindungsaufbau> Universelle Methode für alle Felder

publ i c St r i ng get Header Fi el d( St r i ng f i el dName)> Spezifische Methoden für gebräuchliche Felder wie

publ i c St r i ng get Cont ent Type( )publ i c i nt get Cont ent Lengt h( )publ i c St r i ng get Cont ent Encodi ng( )

> Eingabestrom zum Lesen des Inhalts> publ i c I nput St r eam get I nput St r eam( )

> Content-Handler> publ i c Obj ect get Cont ent ( )> erzeugt ein Objekt anhand des Content-Typs (MIME-Typ)

(z.B. j ava. awt . I magePr oducer bei GIF oder JPEG)

Senden von Daten

> Setzen von Header-Feldern vor Verbindungsaufbau> publ i c voi d set Request Pr oper t y

( St r i ng f i el dName, St r i ng val ue)> Belegt das Header-Feld f i el dName mit dem Wert val ue

> Senden der Daten vorbereiten> publ i c voi d set DoOut put ( bool ean doout put )> Ändert bei HTTP die Methode von GET zu POST

> Ausgabestrom zum Senden von Daten> publ i c Out put St r eam get Out put St r eam( )> Liefert Ausgabestrom zur Datenübertragung zum Server

Webbasierte Anwendungen / World Wide WebGero Mühl 31

Beispiel URLConnection

St r i ng st r i ngToRever se = URLEncoder . encode( ar gs[ 1] , " UTF- 8" ) ;

URL ur l = new URL( ar gs[ 0] ) ; / / " ht t p: / / <r ever se ser vl et >"

URLConnect i on connect i on = ur l . openConnect i on( ) ;connect i on. set DoOut put ( t r ue) ;

Out put St r eamWr i t er out = new Out put St r eamWr i t er ( connect i on. get Out put St r eam( ) ) ;

out . wr i t e( " st r i ng=" + st r i ngToRever se) ;out . c l ose( ) ;

Buf f er edReader i n = new Buf f er edReader (new I nput St r eamReader ( connect i on. get I nput St r eam( ) ) ) ;

St r i ng decodedSt r i ng;

whi l e ( ( decodedSt r i ng = i n. r eadLi ne( ) ) ! = nul l ) {Syst em. out . pr i nt l n( decodedSt r i ng) ;

}i n. c l ose( ) ;

Webbasierte Anwendungen / World Wide WebGero Mühl 32

HttpURLConnection

> Klasse j ava. net . Ht t pURLConnect i on> Repräsentiert eine HTTP-Verbindung zu einer URL

> Ht t pURLConnect i on erweitert die Klasse URLConnect i on> publ i c voi d set Request Met hod( St r i ng met hod)

> Methoden GET, POST, HEAD, PUT, OPTIONS, DELETE und TRACE

> URLConnect i on erlaubt hingegen nur Methoden GET und POST> Abfragen des Status-Codes der Antworten des Servers

> publ i c i nt get ResponseCode( ) liefert Zahlencode> publ i c St r i ng get ResponseMessage( ) liefert Statustext

> Erzeugung (durch Casting einer URLConnect i on)URL ur l ; Ht t pURLConnect i on ht t p;ur l = new URL( " ht t p: / / www. t u- ber l i n. de" ) ;ht t p = ( Ht t pURLConnect i on) ( ur l . openConnect i on( ) ) ;

Webbasierte Anwendungen / World Wide WebGero Mühl 33

Beispiel HttpURLConnection

URL ur l = new URL( " ht t p: / / ser ver / ur i " ) ;Ht t pURLConnect i on conn =

( Ht t pURLConnect i on) ur l . openConnect i on( ) ;

conn. set Request Met hod( " POST" ) ;conn. set Al l owUser I nt er act i on( f al se) ;conn. set DoOut put ( t r ue) ;conn. set Request Pr oper t y( " Cont ent - t ype" , " t ext / xml " ) ;conn. set Request Pr oper t y( " Cont ent - l engt h" ,

I nt eger . t oSt r i ng( body. l engt h( ) ) ) ;

Out put St r eamWr i t er out = new( Out put St r eamWr i t er ( conn. get Out put St r eam( ) ) ;

out . pr i nt ( body) ; out . f l ush( ) ; out . c l ose( ) ;

Webbasierte Anwendungen / World Wide WebGero Mühl 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/

Webbasierte Anwendungen / World Wide WebGero Mühl 35

Fragen?

Webbasierte Anwendungen / World Wide WebGero Mühl 36

HTTPS

HTTPS

> HTTP Secure (HTTPS)> = HTTP + SSL/TLS > = HTTP + Authentifizierung + Verschlüsselung

> Transport Layer Security (TLS) [RFC 2246, 4346, 5246] > Standardisierte Weiterentwicklung vom

Secure Sockets Layer (SSL) von Netscape

> 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

Webbasierte Anwendungen / World Wide WebGero Mühl 38

Ethernet

IP

TCPSSL/TLS

HTTP

HTTPS Verbindungsaufbau

Webbasierte Anwendungen / World Wide WebGero Mühl 39

Webbrowser des Clients

Webserver vonwww.example.com

https://www.example.com

Übertragung des

Webserver-Zertifikats

Übertragung des verschlüs-

selten Sitzungsschlüssels

Verschlüsselter Datenaustausch mitausgehandeltem Sitzungsschlüssel

Prüfung der Sig-natur des Web-

server-Zertifikats

Zertifikatder CA

Webserver-Zertifikat1 2

3

4

Öffentlicher Schlüs-sel des Webservers

PrivaterSchlüsseldes Web-servers

Erzeugungdes Sitzungs-

schlüssels

5

Sitzungs-schlüssel

6

HTTPS Verbindungsaufbau

1. Verbindungsaufbau zu www. exampl e. comauf Port 4432. Übertragung des Webserver-Zertifikats zum Browser3. 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 Webservers6. Verschlüsselter Datenaustausch mit ausgehandeltem

Sitzungsschlüssel

Webbasierte Anwendungen / World Wide WebGero Mühl 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

Webbasierte Anwendungen / World Wide WebGero Mühl 41

SocketFactory & ServerSocketFactory

> Klassen javax.net.ssl.SSLSocketFactory undjavax.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

Webbasierte Anwendungen / World Wide WebGero Mühl 42

SSLSocket und SSLServerSocket

> Klassen javax.net.ssl.SSLSocket und javax.net.sslSSLServerSocket

> 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

Webbasierte Anwendungen / World Wide WebGero Mühl 43

Beispiel SSLSockets

. . .

i nt por t = 443;

SSLSer ver Socket Fact or y ssl Fact or y = ( SSLSer ver Socket Fact or y) SSLSer ver Socket Fact or y. get Def aul t ( ) ;

Ser ver Socket ssl Ser ver Socket = ssl Fact or y. cr eat eSer ver Socket ( por t ) ;

Socket c l i ent = ssl Ser ver Socket . accept ( ) ;

I nput St r eam i n = c l i ent . get I nput St r eam( ) ;Out put St r eam out = c l i ent . get Out put St r eam( ) ;

. . .

Webbasierte Anwendungen / World Wide WebGero Mühl 44

Default Socket Factory holen

Sicherer Server- bzw. Client-Socket

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

Webbasierte Anwendungen / World Wide WebGero Mühl 45

Beispiel SSLSockets

> keytool -list -v -keystore Cl ientTruststore –storepass abcdef

Keystore-Typ: JKSKeystore-Provider: SUN

Ihr Keystore enthält 1 Eintrag/-äge.

Aliasname: mycertErstellungsdatum: 24.11.2009Eintragstyp: trustedCertEntry

Eigner: CN=Gero Muehl, OU=AVA, O=UHRO, C=DEAussteller: CN=Gero Mueh l, OU=AVA, O=UHRO, C=DESeriennummer: 4b0c0e0aGültig von: Tue Nov 24 1 7:47:06 CET 2009 bis: S un May 23 18:47:06 CEST 2010Digitaler Fingerabdru ck des Zertifikats:

MD5: 20:21:85:69:B0:12: CA:53:DF:80:2A:52:D2:62:82:12SHA1: E8:63:E1:99:46:AC:B2:26:7C: 4D:7C:86:52:4E:56 :EE:00:6F:C0:B0Unterschrift-Algorithm usname: SHA1withDSAVersion: 1

********************* ******************************************* **********************

Webbasierte Anwendungen / World Wide WebGero Mühl 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

Webbasierte Anwendungen / World Wide WebGero Mühl 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> http://java.sun.com/javase/6/docs/technotes/guides/security/jsse/JSSE

RefGuide.html

Webbasierte Anwendungen / World Wide WebGero Mühl 48

Fragen?

Webbasierte Anwendungen / World Wide WebGero Mühl 49

HTTP Session Management

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

Webbasierte Anwendungen / World Wide WebGero Mühl 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?

Webbasierte Anwendungen / World Wide WebGero Mühl 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

Webbasierte Anwendungen / World Wide WebGero Mühl 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<i nput t ype=" hi dden" name=" Sessi onI D" val ue=" <i d>" >

> Auslesen der Session-ID aus Formulardaten bei jeder Anfrage

> Session-Management auf HTML-Ebene> Einfache Realisierung> Benutzer bewegt sich von Formular zu Formular

Webbasierte Anwendungen / World Wide WebGero Mühl 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

Webbasierte Anwendungen / World Wide WebGero Mühl 55

Cookies [ RFC 2965]

> Text der beim Client unter gewähltem Namen abgelegt wird

> Übertragung erfolgt im HTTP-Header

> Browserunterstützung (sofern Cookies akzeptiert werden)> Textgröße bis 4KB> mind. 20 Cookies pro Domäne> mind. 300 Cookies insgesamt

Webbasierte Anwendungen / World Wide WebGero Mühl 56

“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

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> (1 oder) 2

Webbasierte Anwendungen / World Wide WebGero Mühl 57

Arbeiten mit Cookies

> Setzen von Cookies> Webserver sendet Set-Cookie im Header der HTTP-Response

Set - cooki e: Sessi on=123; domai n=abc. exampl e; pat h=/Set - Cooki e2: User =XYZ; pat h=/ ser v l et s; secur e

> HTTP-Response kann mehrere Set-Cookie-Header enthalten

> Lesen von Cookies> Browser vergleicht URI mit gespeicherten Cookies> Sendet alle für Domäne und Pfad passende Cookies

im Cookie Header des HTTP(S)-RequestsCooki e: Sessi on=123; User =XYZ

> Testen und Löschen> Testen des Browsers durch Setzen und anschließendes Lesen > Löschen erfolgt durch Setzen eines abgelaufenen Cookies

Webbasierte Anwendungen / World Wide WebGero Mühl 58

Cookies und Datenschutz

> Werbevermarktung> Wie kommen Cookies (z.B. von doubleclick.net) in den

Browser ohne deren Webseite zu besuchen?> Welche Informationen speichern sie und wofür?

Webbasierte Anwendungen / World Wide WebGero Mühl 59

“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

Cookies mit Java (Clientseite)

// Receive cookie with session ID in server responseURL 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 requestURL url = new URL ("http://www.a.com/secret.html");HttpURLConnection conn =

(HttpURLConnection) url.openConnection();conn. setRequestProperty (" Cookie ", sessionId );obj = conn.getContent();

Webbasierte Anwendungen / World Wide WebGero Mühl 60

Cookies mit Java (Clientseite)

String urlString = "http://www.sun.com";CookieManager manager = new CookieManager();manager.setCookiePolicy(CookiePolicy.ACCEPT_ALL);CookieHandler.setD efault(manager);

URL url = new URL(urlString);HttpURLConnection connection =

(HttpURLConnection)ur l.openConnection();Object obj = connection.getContent();connection.disconnect();

CookieStore cookieJar = mana ger.getCookieStore(); List<HttpCookie> cookies = cookieJar.getCookies();for (HttpCookie co okie: cookies) {

System.out.println(cookie); };

url = new URL(urlString);connection = (HttpURLConnec tion)url.openConnection();obj = connection.getContent();connection.disconnect();

Webbasierte Anwendungen / World Wide WebGero Mühl 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

Webbasierte Anwendungen / World Wide WebGero Mühl 62

Fragen?

Webbasierte Anwendungen / World Wide WebGero Mühl 63

Hypertext Markup Language (HTML)

Hypertext Markup Language (HTML)

Webbasierte Anwendungen / World Wide WebGero Mühl 65

> Textbasierte Auszeichnungssprache zur Beschreibung von Dokumenten

> Beschreibt logische Struktur eines Dokuments> Markierungen (Tags) zur Bezeichnung von Dokumentteilen> Beispiel: <p>Ei n Par agr aph</ 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>Fet t gedr uckt er 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

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 [ht t p: / / val i dat or . w3. or g]

Webbasierte Anwendungen / World Wide WebGero Mühl 66

HTML-Tags

> Im Allgemeinen paarweise (öffnend und schließend) <t ag> … </ t ag>

> Keine Unterscheidung von Groß- und Kleinschreibung<Ti t l E> … <t I Tl e>

> Beliebige Verschachtelung, aber keine teilweise Überlappung<h1>Ei n <b>unguel t i ges HTML- Konst r ukt . </ h1></ b>

> Manche Tags können/müssen zusätzliche Attribute enthalten<a hr ef =" ht t p: / / www. t u- ber l i n. de" >

> Browser-Hersteller versuch(t)en eigene Tags „durchzusetzen“ Kompatibilitätsprobleme

Webbasierte Anwendungen / World Wide WebGero Mühl 67

Beispiele (HTML-Tags)

<ht ml > …… </ ht ml ><head> …… </ head><t i t l e> …… </ t i t l e><body> …… </ body><hn> …… </ hn><b> …… </ b><ul > …… </ ul ><ol > …… </ ol ><l i > …… </ l i ><br ><a hr ef =" ur l " > …… </ a><i mg sr c=" ur l " ><pr e> …… </ pr e>

Start einer HTML-SeiteKopf der SeiteTitel der SeiteRumpf der SeiteÜberschrift der Stufe nText fett druckenUngeordnete ListeGeordnete ListeListenelementNeue ZeileHyperlink auf andere SeiteLaden eines BildesVorformatierter Text

Webbasierte Anwendungen / World Wide WebGero Mühl 68

HTML Grundstruktur

Webbasierte Anwendungen / World Wide WebGero Mühl 69

<! DOCTYPE HTML PUBLI C " - / / W3C/ / DTD HTML 4. 01 Tr ansi t i onal / / EN"

" ht t p: / / www. w3. or g/ TR/ ht ml 4/ l oose. dt d" ><ht ml >

<head> <met a name=" aut hor " cont ent =" user @kbs" ><t i t l e>Ti t el der Sei t e</ t i t l e>

</ head><body>

<h1>Über schr i f t </ h1>Ei gent l i cher Text

</ body></ ht ml >

Webbasierte Anwendungen / World Wide WebGero Mühl 70

Elemente zur Textstrukturierung

> Überschriften<h1>Ti t el </ h1><h2>Abschni t t 1</ h2>

> Hervorhebung<b>f et t </ b>, <i >kur s i v</ i >, . . .<em>emphat i sch</ em><code>pr i vat e i nt get X( ) </ code>

> Trennlinie: <hr >> Zeilenumbruch: <br >> Kommentar: <! - - Beschr ei bung - - >

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>

Eins Zwei Drei

One Two Three

Webbasierte Anwendungen / World Wide WebGero Mühl 71

Listen

> Aufzählung

<ul>

<li>HTML</li>

<li>XHTML</li>

<li>XML</li>

</ul>

> Nummerierung<ol>

<li>Erstens</li>

<li>Zweitens</li>

</ol>

Webbasierte Anwendungen / World Wide WebGero Mühl 72

• HTML

• XHTML

• XML

1. Erstens

2. Zweitens

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>

Webbasierte Anwendungen / World Wide WebGero Mühl 73

www.dilbert.com

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">...</form>

> Formulareingaben per POST versenden<form action=" mailto:[email protected] "

method=" post " enctype="text/plain">...</form>

Webbasierte Anwendungen / World Wide WebGero Mühl 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>

Webbasierte Anwendungen / World Wide WebGero Mühl 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>

Webbasierte Anwendungen / World Wide WebGero Mühl 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>

Webbasierte Anwendungen / World Wide WebGero Mühl 77

Formulare V

> Dateien hochladen<form action="file.cgi" method="post"

enctype="multipart/form-data" ><p>W&auml;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">

Webbasierte Anwendungen / World Wide WebGero Mühl 78

Vorgeschrieben für Dateiuploads

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-1GET /cgi-bin/forum.pl?input=H %FCte+und+H %E4usern

HTTP/1.1

> Bei POST im Body des HTTP-RequestsPOST /cgi-bin/forum.pl HTTP/1.1

Content-Type: application/x-www-form-urlencoded;

charset=ISO-8859-1

...

vorname=Gero&nachname=M%FChl

Webbasierte Anwendungen / World Wide WebGero Mühl 79

Kodierung der Formulardaten

POST /cgi-bin/forum.pl HTTP/1.1Accept: text/html,application/xhtml +xml,application/xm l;q=0.9,*/*;q=0.8Accept-Charset: ISO-8859 -1,utf-8;q=0.7,*;q=0.7Content-Type: multipart/ form-data; boundary=--- ------------------------

19547468711225981001167730729Content-Length: 478

--------------------- --------19547468711 225981001167730729Content-Disposition: form- data; name="vorname"

Gero--------------------- --------19547468711 225981001167730729Content-Disposition: form- data; name="nachname"

Mühl--------------------- --------19547468711 225981001167730729Content-Disposition: for m-data; name="Datei"; filename="test.txt"Content-Type: text/plain

Dies ist eine Textdatei.

-----------------------------19547468711225981001167730729--

Webbasierte Anwendungen / World Wide WebGero Mühl 80

Frames

> Mit Frames kann der Anzeigebereich des Browsers in horizontale und vertikale Bereiche aufgeteilt werden

> Frameset-Definition:

<!DOCTYPE HTML PUBLIC "-//W3C//D TD 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>

Webbasierte Anwendungen / World Wide WebGero Mühl 81

Frames

> Frame-Definition (Datei menu.html ):

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01

Transitional//EN" "htt p://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">

Webbasierte Anwendungen / World Wide WebGero Mühl 82

Eingebettete Frame (Inline Frames)

> Erzeugen keine direkt Aufteilung des Browserfensters, sondern Bereiche innerhalb Webseite, in denen fremde Quellen (z.B. HTML-Dokumente, -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>

Webbasierte Anwendungen / World Wide WebGero Mühl 83

Webbasierte Anwendungen / World Wide WebGero Mühl 84

Eingebettete Frame (Inline Frames)

> frame.html

<H2>Inline Frame</H2>

<p>Hier ein bisschen

Text.</p>

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>

Webbasierte Anwendungen / World Wide WebGero Mühl 85

Webbasierte Anwendungen / World Wide WebGero Mühl 86

Objekte einbetten

> Alternativ Einbindung von HTML-Code

<object data="frame.html" type="text/html">

Ihr Browser kann das Objekt leider

nicht anzeigen!

</object>

Fragen?

Webbasierte Anwendungen / World Wide WebGero Mühl 87

Cascading Style Sheets (CSS)

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. st y l e. 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

Webbasierte Anwendungen / World Wide WebGero Mühl 89

CSS-Definition im Header

Webbasierte Anwendungen / World Wide WebGero Mühl 90

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

Einbindung CSS-Datei und Inline-Definition

Webbasierte Anwendungen / World Wide WebGero Mühl 91

<html><head>

<title>Titel der Datei</title><link rel="stylesheet" type="text/css“

href="style.css"><style type="text/css"><!--

h1 { font-size:48pt; } --></style

</head><body>

<p class="normal" style="color:#FF0000;" >Element-bezogene Definition

</p></body>

</html>

Inhalt des style-Elements in HTML-Kommentar für ältere Browser, die kein

CSS verstehen

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><l i nk r el =" st y l esheet " medi a=" scr een" hr ef =" web. css" ><l i nk r el =" st y l esheet " medi a=" pr i nt " hr ef =" dr uck. css" >

</ head>

> Alternative Deklaration innerhalb eines Style-Elements

<st y l e t ype=" t ext / css" >@medi a pr i nt { … }@medi a scr een, handhel d { … }

</ st y l e>

Webbasierte Anwendungen / World Wide WebGero Mühl 92

CSS Selektoren

Webbasierte Anwendungen / World Wide WebGero Mühl 93

> * Selektiert jedes Element > E Selektiert jedes Element vom Typ E> E.c Selektiert jedes Element der Klasse c > #myid Selektiert das Element mit der ID „myid“> E F Selektiert jedes Element F, das ein Nachfahre

von Element E ist> E > F Selektiert jedes Element F, das ein Kind von E ist> E ~ F Selektiert jedes Element F, das einen Vorgänger E

auf gleicher Ebene hat> E + F Selektiert jedes Element F, das einen direkten

Vorgänger E auf gleicher Ebene hat

CSS Selektoren

Webbasierte Anwendungen / World Wide WebGero Mühl 94

> 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

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="mitarbeit er">Mitarbeiter</a></li>

</ul><div id="Inhalt" ><h1>Forschung</h1><p>Der Lehrstuhl AVA ...</p></div>

</body></html>

Webbasierte Anwendungen / World Wide WebGero Mühl 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;

}

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 WebGero Mühl 96

CSS-basierte Layouts

Webbasierte Anwendungen / World Wide WebGero Mühl 97

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

Webbasierte Anwendungen / World Wide WebGero Mühl 98

Fragen?

Webbasierte Anwendungen / World Wide WebGero Mühl 99

Prof. Dr.-Ing. habil. Gero Mühl

Architektur von Anwendungssystemen (AVA)Fakultät für Informatik und Elektrotechnik (IEF)Universität Rostock

Webbasierte Anwendungen

Client- und Serverseitige Techniken

Ü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

Webbasierte Anwendungen / TechnikenGero Mühl 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.

Webbasierte Anwendungen / TechnikenGero Mühl 3

Clientseitig vs. Serverseitig

Clientseitig

> Nutzen der „eingebauten“ Fähigkeiten des Browsers

> Einbindung nachladbarer/ installierbarer Plugins

> Programmierung der Plugins > Beispiele

> DHTML/JavaScript> ActiveX> Java Applets > Flash> …

Serverseitig

> Delegation des HTTP Requests an externe Komponenten

> Weiterleitung aufgrund URL Dispatching

> Komponenten erzeugen Response> Beispiele

> Server Side Includes (SSI), PHP> Common Gateway Interface (CGI)> Java Server Pages (JSP), Servlets> Java Server Faces (JSF), ASP.NET> …

Webbasierte Anwendungen / TechnikenGero Mühl 4

Die Dynamik der Anwendung kann meist sowohl im Clientals auch auf dem Server realisiert werden.

Laufzeitumgebung

Mit Laufzeitumgebung

> Container bietet zusätzliche Funktionalität > Sitzung> Authentifizierung und

Autorisierung> Ressourcenüberwachung> …

> Beispiele> Servlets/JSP/JSF> ASP.NET> …

Ohne Laufzeitumgebung

> Systemprozesse> Verantwortung des

Programmierers für> Sitzungsverwaltung> Sicherheit> …

> Beispiele> CGI> FCGI> …

Webbasierte Anwendungen / TechnikenGero Mühl 5

Abstraktion

Webbasierte Anwendungen / TechnikenGero Mühl 6

Request/Response

> Komponente analy-siert Request

> Komponente erzeugt Response direkt (z.B. HTML)

> Beispiele> CGI> Java Servlets

Seitenbeschreibung

> Spezieller Markup für dynamische Elemente

> Wird bei jeder Anfrage bearbeitet und im HTML Dokument ersetzt

> Beispiele> JSP> PHP

Objekt-/Komponen-tenorientiert

> Seite besteht aus vorgefertigtenKomponenten

> Ereignisbasiertes Ausführungsmodell

> Beispiele> ASP.NET> JSF

Wiederverwendbarkeit

Geringe Wiederverwendbarkeit

> Konkatenation verschiedener Ausgabeströme durch Weiterleitung möglich

> Beispiele> Servlets> CGI

Gute Wiederverwendbarkeit

> Komponentenmodell und reiches Typsystem ermöglichen Orchestrierung einzelner Komponenten

> Beispiele> ASP.NET> JSP

Webbasierte Anwendungen / TechnikenGero Mühl 7

Fragen?

Webbasierte Anwendungen / TechnikenGero Mühl 8

Teil 1: Serverseitige Technologien

Ü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

> Active Server Pages (ASP.NET)2

1 Besprechung als Teil von J2EE2 Besprechung als Teil von .Net

Webbasierte Anwendungen / TechnikenGero Mühl 10

Server Side Includes (SSI)

Server Side Includes (SSI)

> Anweisungen in HTML-Seiten, die vom Webserverinterpretiert und durch HTML ersetzt werden

> Einbettung der Anweisungen in HTML-Kommentare> Syntax

<! - - #el ement at t r i but e1=val ue1

at t r i but e2=val ue2 . . . - - >

> Datum/Zeit einblenden<! - - #echo var =" DATE_LOCAL" - - >

> CGI-Skript ausführen<! - - #i ncl ude vi r t ual =" / cgi - bi n/ count er . pl " - - >

> Befehl ausführen<! - - #exec cmd=" l s" - - >

Webbasierte Anwendungen / TechnikenGero Mühl 12

Server Side Includes (SSI)

> Änderungsdatum einblenden<! - - #echo var =" LAST_MODI FI ED" - - >

> Einbinden einer Datei auf dem gleichen Server<! - - #i ncl ude vi r t ual =" / f oot er . ht ml " - - >

> If-then-else-Konstrukt<! - - #i f expr =' " $DOCUMENT_URI " = " / f oo. ht ml " ' - - >

i n f oo<! - - #el i f expr =' " $DOCUMENT_URI " = " / bar . ht ml " ' - - >

i n bar<! - - #el se - - >

i n nei t her<! - - #endi f - - >

Webbasierte Anwendungen / TechnikenGero Mühl 13

Common Gateway Interface (CGI)

Common Gateway Interface (CGI)

Webbasierte Anwendungen / TechnikenGero Mühl 15

> 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

Formular anfordern

Praktikum in Grönland !

anmelden

HTTPServer

Webbrowser Anbieter

HTTPClient

/cgi-bin/anmelden.tcsh

Formular liefern

Daten senden

Antwort empfangen

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/bashecho "Content-type: text/html" ; echo

> Einfaches Beispiel#!/usr/bin/perlprint "Content-type: text/html\n\n";print "Hello, World.";

Webbasierte Anwendungen / TechnikenGero Mühl 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">

Webbasierte Anwendungen / TechnikenGero Mühl 17

CGI Parameterübergabe

> GET> $QUERY_STRI NG (Umgebungsvariable) wird übergeben> Zum Beispiel

?vor name=Hans&nachname=M%FCl l er &. . .?quer y=CGI +Tut or i al

> Beinhaltet alle Parameter in einem String (Leerzeichen durch + ersetzt)

> Wird vom Skript geparst und entsprechend verarbeitet

> POST> Einlesen der Parameter aus der Standardeingabe

Webbasierte Anwendungen / TechnikenGero Mühl 18

CGI Beispiele

Webbasierte Anwendungen / TechnikenGero Mühl 19

#! / bi n/ shcat - <<EOFCont ent - t ype: t ext / ht ml

<HTML><HEAD><TI TLE>Dat um und Zei t </ TI TLE></ HEAD><BODY><H1>Zei t und Dat um:EOFdat ecat - <<EOF</ H1></ BODY></ HTML>EOF

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 verarbeitenString queryString = S ystem.getEnv("QUERY_STRING");

> Java-Programm mit Standardeingabe aufrufen (POST-Request)#!/bin/bashcat /dev/stdin | java CGI

Webbasierte Anwendungen / TechnikenGero Mühl 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

Webbasierte Anwendungen / TechnikenGero Mühl 21

CGI Diskussion

> Vorteile> Geringe Anforderungen> Verfügbarkeit auf Server> Hohe Flexibilität

> Nachteile> Niedrige Abstraktionsebene> Sicherheit dem Anwendungsentwickler überlassen> Hoher Ressourcenverbrauch (Prozess pro Request)> Keine Ressourcenüberwachung

Webbasierte Anwendungen / TechnikenGero Mühl 22

Hypertext Preprocessor (PHP)

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

<ht ml ><head>

<t i t l e>PHP- Test </ t i t l e></ head><body>

<?php echo " <p>Hal l o Wel t </ p>" ; ?></ body>

</ ht ml >

Webbasierte Anwendungen / TechnikenGero Mühl 24

PHP und HTML gemischt

<?phpi f ( s t r st r ( $_SERVER[ " HTTP_USER_AGENT" ] , " MSI E" ) ) {?><h3>st r st r muss t r ue zur ückgegeben haben</ h3><cent er ><b>Si e benut zen I nt er net Expl or er </ b></ cent er ><?php} el se {?><h3>st r st r muss f al se zur ückgegeben haben</ h3><cent er ><b>Si e benut zen ni cht I nt er netExpl or er </ b></ cent er ><?php}?>

Webbasierte Anwendungen / TechnikenGero Mühl 25

HTML Forms und PHP

> Form

<f or m act i on=" wel come. php" met hod=" POST" >

Ent er your name: <i nput t ype=" t ext " name=" name" / >Ent er your age: <i nput t ype=" t ext " name=" age" / ><i nput t ype=" submi t " / >

</ f or m>

> Verarbeiten der Formulardaten

<ht ml ><body>

Wel come <?php echo $_POST[ " name" ] ; ?>.You ar e <?php echo $_POST[ " age" ] ; ?> year s ol d!

</ body></ ht ml >

Webbasierte Anwendungen / TechnikenGero Mühl 26

PHP Cookies

> Cookie setzen<?php

set cooki e( " uname" , $name, t i me( ) +36000) ;?>

> Cookie abfragen<?phpi f ( i sset ( $uname) )

echo " Wel come " . $uname . " ! <br / >" ;el se

echo " You ar e not l ogged i n! <br / >" ;?>

Webbasierte Anwendungen / TechnikenGero Mühl 27

ODBC-Datenbankzugriff mit PHP

<?php$conn=odbc_connect ( ' nor t hwi nd' , ' ' , ' ' ) ; i f ( ! $conn) { ex i t ( " Connect i on Fai l ed: " . $conn) ; } $sql =" SELECT * FROM cust omer s" ; $r s=odbc_exec( $conn, $sql ) ; i f ( ! $r s) { ex i t ( " Er r or i n SQL" ) ; } echo " <t abl e><t r ><t h>Fi r ma</ t h><t h>Kont akt </ t h></ t r >" ;whi l e ( odbc_f et ch_r ow( $r s) ) {

$compname=odbc_r esul t ( $r s, " CompanyName" ) ;$conname=odbc_r esul t ( $r s, " Cont act Name" ) ;echo " <t r ><t d>$compname</ t d>" ;echo " <t d>$conname</ t d></ t r >" ;

}odbc_cl ose( $conn) ;echo " </ t abl e>" ;?>

Webbasierte Anwendungen / TechnikenGero Mühl 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>

Webbasierte Anwendungen / TechnikenGero Mühl 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> http://www.selfphp.de

Webbasierte Anwendungen / TechnikenGero Mühl 30

Fragen?

Webbasierte Anwendungen / TechnikenGero Mühl 31

Teil 2: Clientseitige Technologien

Überblick Clientseitige Technologien

> JavaScript

> Ajax

> Pushlets

> LiveConnect

> Java Applets

Webbasierte Anwendungen / TechnikenGero Mühl 33

JavaScript

JavaScript

> Von Netscape lizenzierte objektorientierte Skriptsprache; aktuelle Version 1.5 (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)

Webbasierte Anwendungen / TechnikenGero Mühl 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> …

Webbasierte Anwendungen / TechnikenGero Mühl 36

Webbasierte Anwendungen / TechnikenGero Mühl 37

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

Webbasierte Anwendungen / TechnikenGero Mühl 38

Eigenschaften von JavaScript

> Anweisungsblöcke> ähnlich wie in Java: { . . . }> i f … el se, swi t ch, ?:> whi l e, f or , do ... whi l e, br eak,

cont i nue (mit Marken)

> Funktionen> mit und ohne Rückgabewert (keine Angabe in Signatur)

f unct i on pr odukt ( a, b) {r et ur n a * b;

}

Webbasierte Anwendungen / TechnikenGero Mühl 39

Erzeugen neuer Objekte

/ / Konst r ukt ur def i ni er enf unct i on Kompl ex( r eal , i magi naer ) {

t hi s. r eal = r eal ;t hi s. i magi naer = i magi naer ;t hi s. summe = f unct i on( ) {

r et ur n t hi s. r eal + t hi s. i magi naer ;}

}. . .var z = new Kompl ex( 1, 5) ; / / neues Obj ekt er zeugendocument . wr i t el n( " z = ( " + z. r eal + " , " +

z. i magi naer + " ) " ) ;document . wr i t el n( " Summe von z = " + z. summe( ) ) ;

Webbasierte Anwendungen / TechnikenGero Mühl 40

Vererbung über Prototyp

f unct i on Quat er ni on( r eal , i mag1, i mag2, i mag3) {t hi s. const r uct or ( r eal , i mag1) ;t hi s. i mag2 = i mag2;t hi s. i mag3 = i mag3;

}Quat er ni on. pr ot ot ype = new Kompl ex( ) ;. . .var q = new Quat er ni on( 1, 3, 6, 10) ;document . wr i t el n( " q = ( " + q. r eal + " , " +

q. i magi naer + " , " +q. i mag2 + " , " + q. i mag3 + " ) " ) ;

document . wr i t el n( " Summe von Real - und er st em I magi när t ei l = " + q. summe( ) ) ;

JavaScript einbinden

> JavaScript-Code kann direkt in der HTML-Datei (inline) notiert oder aus separaten Dateien eingebunden werden

> Beispiel für Inline-Skript<scr i pt t ype=" t ext / j avascr i pt " >

<! - -/ / akt uel l e Uhr zei t ausgebenvar d = new Dat e( ) ;document . wr i t e( d. get Hour s( ) + " : " +

d. get Mi nut es( ) ) ;/ / - - ></ scr i pt ><noscr i pt >JavaScr i pt ei nschal t en</ noscr i pt >

Webbasierte Anwendungen / TechnikenGero Mühl 41

Webbasierte Anwendungen / TechnikenGero Mühl 42

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

erheblich die Ladezeit einer Seite erhöhen

<head>. . .<scr i pt sr c=" scr i pt . j s"

t ype=" t ext / j avascr i pt " ></ scr i pt > . . .

</ head>

Webbasierte Anwendungen / TechnikenGero Mühl 43

JavaScript Fehlerverarbeitung

> Definition einer Fehlerbehandlungsfunktion> wi ndow. oner r or bekommt als Wert den Namen der

Funktion, die im Fehlerfall aufgerufen wird> Ansonsten werden Fehler im Log gemeldet

<scr i pt t ype=" t ext / j avascr i pt " >wi ndow. oner r or = ausnahme;f unct i on ausnahme( Nachr i cht , Dat ei , Posi t i on) {

al er t ( " Fehl er mel dung: \ n" + Nachr i cht + " \ n" + Dat ei + " \ n" + Posi t i on) ;

r et ur n t r ue;}

</ scr i pt >

Webbasierte Anwendungen / TechnikenGero Mühl 44

JavaScript Fehlerverarbeitung

> Ausnahmebehandlung mit try/catch> ähnliche Syntax wie in Java> keine verpflichtende Behandlung> Objekte oder Konstanten können geworfen werden

t r y {myFunct i on( ) ; / / kann Ausnahme wer f en

}cat ch ( e) {

. . . / / Behandl ung der Ausnahme}

HTML Document Object Model (DOM)

> Objekt- und Programmiermodell für HTML

> Plattform- und sprachunabhängig> Standard des W3Cs> Ermöglicht interaktive

Webanwendungen

<html><head>

<title>HTML DOM</title></head><body>

<h1>A Heading</h1><p>Some text</p>

</body>

</html>

Webbasierte Anwendungen / TechnikenGero Mühl 45

document

html

head body

title h1 p

HTML DOM A Heading Some text

HTML Document Object Model (DOM)

> Zugriff auf das <html>-Elementdocument.documentElement

> Direkter Zugriff auf das <body>-Elementdocument.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

Webbasierte Anwendungen / TechnikenGero Mühl 46

JavaScript Beispiel 1

> Funktionsaufruf sowie Zugriff auf Formulardaten<html>

<head><title>JavaScript-Tasc henrechner</title><script src="produkt.js"

type="text/javascript"></script> </head><body>

<form name="Form" action=""><input type="text" nam e="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>

Webbasierte Anwendungen / TechnikenGero Mühl 47

JavaScript Beispiel 2

> Zugriff auf HTML-Elemente mittels getElementById

> Regelmäßige Ausführung einer Funktion

<h1 id="header" onmouseover="Farbe()" >My blinking header</h1>

<script type="text/javascript">

var aktiv = window.setInterval ("Farbe()", 1000);

var i = 0, farbe = 1;

function Farbe () {

if (farbe == 1) {

document.getElementById("header") .style.color="blue"

farbe = 2;

} else {

document.getElementById("header") .style.color="red"

farbe = 1;

}

i = i + 1;

if (i >= 10) window.clearInterval (aktiv);

}

</script>

Webbasierte Anwendungen / TechnikenGero Mühl 48

JavaScript Beispiele 3 + 4

> Einmaliger Aufruf einer Funktion nach Timeout

var t = setTimeout("al ert('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>

Webbasierte Anwendungen / TechnikenGero Mühl 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.setInterv al("move()", 50);var alpha = 0;var x = 2 * Math.PI / 100;

function move() {for(i = 0;i < 100;i++) {

p = document.getEleme ntById("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>

Webbasierte Anwendungen / TechnikenGero Mühl 50

JavaScript Eventhandler

> onblur Verlassen> onclick einfaches Anklicken> ondblclick doppeltes Anklicken> onfocus Aktivieren> onkeydown gedrückte Taste> onkeypress gedrückt gehaltene Taste> onkeyup losgelassene Taste> onmousedown gedrückte Maustaste> onmousemove weiterbewegte Maus> onmouseout Verlassen des Elements mit der Maus> onmouseover Überfahren des Elements mit der Maus> onmouseup losgelassene Maustaste> onreset Zurücksetzen des Formulars> onselect Selektieren von Text> onsubmit Absenden des Formulars

Webbasierte Anwendungen / TechnikenGero Mühl 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>

Webbasierte Anwendungen / TechnikenGero Mühl 52

JavaScript Beispiel 8

> Kommunizieren 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);

}

Webbasierte Anwendungen / TechnikenGero Mühl 53

AJAX (Asynchronous JavaScript and XML)

Webbasierte Anwendungen / Wicket, Ajax und GWTGero Mühl 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

Webbasierte Anwendungen / Wicket, Ajax und GWTGero Mühl 55

Klassische Webanwendungen

Webbasierte Anwendungen / Wicket, Ajax und GWTGero Mühl 56

Webbrowser Webserver

1. 2.

3.4.

1. Benutzeraktion2. HTTP-Request3. HTTP-Response

(HTML + CSS)4. Anzeigen der Seite

Zeit

Client

Server

1. 1. 1.

2. 2. 2.3. 3. 3.

4. 4. 4.

Netzwerk

AJAX

> AJAX = Asynchronous JavaScript and XML> DHTML + asynchrone Kommunikation mittels XMLHt t pRequest

> 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

Webbasierte Anwendungen / Wicket, Ajax und GWTGero Mühl 57

AJAX

Webbasierte Anwendungen / Wicket, Ajax und GWTGero Mühl 58

Ajax Engine

Zeit

Client

Server

asynchronerXMLHttpRequest

synchronerHTTP-Request

Aktualisierung derdargestellten Seite

Darstellung dergeladenen Seite

AJAX Beispiel: Google Maps

Webbasierte Anwendungen / Wicket, Ajax und GWTGero Mühl 59

1. Ziehen der Karte mit der Maus

2. Nachladen fehlen-der Kartenteile im

Hintergrund

Google Docs and Google Calendar

Webbasierte Anwendungen / Wicket, Ajax und GWTGero Mühl 60

Google Mail

Webbasierte Anwendungen / Wicket, Ajax und GWTGero Mühl 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> …

Webbasierte Anwendungen / Wicket, Ajax und GWTGero Mühl 62

XMLHttpRequest

> API für asynchrone HTTP-Aufrufe> Zugriff via JavaScript> Konzept ursprünglich von Microsoft entwickelt XMLHTTP

f unct i on aj axPOST( ur l , par ams, cal l backFunct i on) {var r equest = new XMLHt t pRequest ( ) ;r equest . open( " POST" , ur l , t r ue) ;r equest . set Request Header ( " Cont ent - Type" ,

" appl i cat i on/ x- www- f or m- ur l encoded" ) ; r equest . onr eadyst at echange = f unct i on( ) {

i f ( r equest . r eadySt at e == 4 && r equest . st at us == 200) {i f ( r equest . r esponseText ) {

cal l backFunct i on( r equest . r esponseText ) ;} } } ;r equest . send( par ams) ;

}

Webbasierte Anwendungen / Wicket, Ajax und GWTGero Mühl 63

Request-Objekt erzeugen und HTTP Methode &

Header setzen

Callback-Funktion ausführen, wenn Antwort

erhalten (4) und erfolgreich (HTTP 200)

Daten, die per Post-Request übertragen

werden sollen

Suchvorschläge à la Google Suggest

<ht ml ><head>

<scr i pt sr c=" suggest . j s" ></ scr i pt ></ head><body>

<f or m>Name: <i nput t ype=" t ext "

onkeyup=" suggest ( t hi s . val ue) " / ></ f or m><p>Suggest i on: <span i d=" suggest i on" ></ span></ p>

</ body>

</ ht ml >

Webbasierte Anwendungen / Wicket, Ajax und GWTGero Mühl 64

Suchvorschläge à la Google Suggest

suggest . j s :

f unct i on suggest ( st r ) {var xml ht t p= new XMLHt t pRequest ( ) ;var ur l =" suggest . cgi " + " ?q=" + st r ;xml ht t p. open( " GET" , ur l , t r ue) ; r equest . onr eadyst at echange = f unct i on( ) {

i f ( xml ht t p. r eadySt at e == 4) {document . get El ement ByI d( " suggest i on" ) .

i nner HTML = xml ht t p. r esponseText ;}

xml ht t p. send( nul l ) ;}

Webbasierte Anwendungen / Wicket, Ajax und GWTGero Mühl 65

AJAX Bilanz

Vorteile

> Rich Internet Applications(RIA), ähnlich zu Desktop-Anwendungen

> Keine Plugins(vgl. Applets, Flash, etc.)

> Rahmenwerke und Toolkits(z.B. Dojo)

> Große Beachtung und Industrieunterstützung

Nachteile

> JavaScript-Programmierungdurch den Web-Entwickler> Browserinkompatibilitäten> Debugging> Wartung

> Polling> Netzverkehr> Serverbelastung

Webbasierte Anwendungen / Wicket, Ajax und GWTGero Mühl 66

Literatur

1. Christian Wenz, JavaScript und Ajax: Das umfassende Handbuch, 7. Auflage, 2008, Galileo Computinghttp://openbook.galileocomputing.de/javascript_ajax

2. Christian Wenz, JavaScript: Das umfassende Handbuch, 10. Auflage, 2010, Galileo Computing, ISBN 3836216787

3. XMLHttpRequesthttp://www.w3.org/TR/XMLHttpRequest

4. W3Schools AJAX Tutorialhttp://www.w3schools.com/Ajax

5. The Dojo Toolkithttp://www.dojotoolkit.org

Webbasierte Anwendungen / Wicket, Ajax und GWTGero Mühl 67

Fragen?

Webbasierte Anwendungen / Wicket, Ajax und GWTGero Mühl 68

Pushlets

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> …

Webbasierte Anwendungen / TechnikenGero Mühl 70

Webbrowser

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 JavaScriptfunction neuladen () {

window.location.reload();

}

window.setTimeout("neuladen()", 1000);

> Periodisches Pull von Daten und Aktualisierung der Seite mittels JavaScript kein kompletter Neuaufbau der Seite notwendig

Webbasierte Anwendungen / TechnikenGero Mühl 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 JavaScript-

Kommandos an den Client in einen unsichtbaren Frame

Webbasierte Anwendungen / TechnikenGero Mühl 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 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

wi ndow. f r ames[ ' Get Fr ame' ] . l ocat i on =' ht t p: / / wwwava. i nf or mat i k. uni -

r ost ock. de/ ser vl et s/ akt i en. j sp?s=i bm&a=add'

Webbasierte Anwendungen / TechnikenGero Mühl 73

Pushlets: Client Seite

<HTML><HEAD><scr i pt t ype=" t ext / j avascr i pt " >

var pageSt ar t = " <HTML><HEAD></ HEAD><BODY><H1>" ;var pageEnd = " </ H1></ BODY></ HTML>" ;f unct i on push( cont ent ) {

wi ndow. f r ames[ ' di spl ayFr ame' ] . document . open( ) ; wi ndow. f r ames[ ' di spl ayFr ame' ] . document .

wr i t el n( pageSt ar t +cont ent +pageEnd) ;wi ndow. f r ames[ ' di spl ayFr ame' ] . document . c l ose( ) ;

}</ scr i pt >. . .</ HEAD><FRAMESET BORDER=" 0" COLS=" * , 0" >

<FRAME SRC=" di spl ay. ht ml " NAME=" di spl ayFr ame" ><FRAME SRC=" pusher . j sp" NAME=" pushl et Fr ame" >

</ FRAMESET></ HTML>

Webbasierte Anwendungen / TechnikenGero Mühl 74

Pushlets: Server Seite

<HTML><HEAD>. . . </ HEAD><BODY>

<% St r i ng j sPr e =

" <scr i pt l anguage=JavaScr i pt >par ent . push( ' " ;St r i ng j sPost = " ' ) </ scr i pt > " ;f or ( i nt i = 1; i < 10; i ++) {

out . pr i nt ( j sPr e+" Page " +i +j sPost ) ;out . f l ush( ) ;t r y { Thr ead. s l eep( 3000) ; } cat ch ( I nt er r upt edExcept i on e) { }

}out . pr i nt ( j sPr e+" DONE" +j sPost ) ;

%></ BODY>

</ HTML>

Webbasierte Anwendungen / TechnikenGero Mühl 75

Pusher.jsp

Java Applets

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

Webbasierte Anwendungen / TechnikenGero Mühl 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

Webbasierte Anwendungen / TechnikenGero Mühl 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

Webbasierte Anwendungen / TechnikenGero Mühl 79

WebserverWebbrowser

1. HTML-Seite laden

2. Java Applet laden

Java-Plugin

Java

Run

time

Env

ironm

ent

Einbettung in HTML-Seite

> HTML-Tag <appl et > (deprecated!)<appl et code=" chess. c l ass"

codebase=" ht t p: / / wwwava. i nf or amt i k. uni -r ost ock. de/ appl et s"

ar chi ve=" games. j ar " wi dt h=" 400" hei ght =" 400" ><par am name=" col or " val ue=" 0xFF0000" >Your Br owser i gnor es t he APPLET t ag!

</ appl et >

> Alternativ: Nutzung des <object >-Tags<obj ect c l assi d=" j ava: chess. c l ass"

codet ype=" appl i cat i on/ j ava" wi dt h=" 400" hei ght =" 400" ><par am name=" col or " val ue=" 0xFF000" >

</ obj ect >

Webbasierte Anwendungen / TechnikenGero Mühl 80

Klasse Applet

Webbasierte Anwendungen / TechnikenGero Mühl 81

> Applets leiten von java.applet.Applet ab, welches von Panel,Container und Component abgeleitet ist

> Beispiele für geerbte, überschreibbare Grafik-Methodenpubl i c voi d pai nt ( Gr aphi cs g)

/ / does not hi ng by def aul t/ / i s over r i dden t o do some dr awi ng

publ i c voi d updat e( Gr aphi cs g)/ / def aul t i mpl ement at i on c l ear s ar ea and / / cal l s pai nt ( )/ / causes a l ot of f l i cker i ng

publ i c voi d r epai nt ( )/ / cal l ed by t he Appl et i t sel f / / t o t r i gger cal l of updat e( )

> Methoden zur Ereignisbehandlung (Listener-Modell), z.B.publ i c voi d addMouseLi st ener ( MouseLi st ener l )publ i c voi d r emoveMouseLi st ener ( MouseLi st ener l )pr ot ect ed voi d pr ocessMouseEvent ( MouseEvent e)

Lebenszyklus eines Java Applets

> Entsprechende Methoden können überschrieben werdenpubl i c voi d i ni t ( )publ i c voi d st ar t ( )publ i c voi d st op( )publ i c voi d dest r oy( )

Webbasierte Anwendungen / TechnikenGero Mühl 82

init destroy

start

stop

Java Applet Beispiel

publ i c c l ass Si mpl e ext ends Appl et {St r i ngBuf f er buf f er = new St r i ngBuf f er ( ) ;

publ i c voi d i ni t ( ) { addI t em( " i ni t . . . " ) ; }publ i c voi d st ar t ( ) { addI t em( " st ar t . . . " ) ; }publ i c voi d st op( ) { addI t em( " st op. . . " ) ; }publ i c voi d dest r oy( ) { addI t em( " dest r oy. . . " ) ; }

voi d addI t em( St r i ng newWor d) {buf f er . append( newWor d) ;r epai nt ( ) ;

}

publ i c voi d pai nt ( Gr aphi cs g) {g. dr awSt r i ng( buf f er . t oSt r i ng( ) , 5, 15) ;

}}

Webbasierte Anwendungen / TechnikenGero Mühl 83

Applet-spezifische Methoden

> Häufig genutzte Applet-spezifische Methoden

publ i c St r i ng[ ] [ ] get Par amet er I nf o( )

publ i c Appl et Cont ext get Appl et Cont ext ( )

publ i c St r i ng get Par amet er ( St r i ng name)

publ i c URL get CodeBase( )

publ i c URL get Document Base( )

publ i c I mage get I mage( URL ur l )

publ i c Audi oCl i p get Audi oCl i p( URL ur l )

publ i c voi d showSt at us( St r i ng msg)

Webbasierte Anwendungen / TechnikenGero Mühl 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");

}

}

}

Webbasierte Anwendungen / TechnikenGero Mühl 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> 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 / TechnikenGero Mühl 86

Java Remote Method Invocation

> Ermöglicht Methodenaufrufe auf Java Objekten, die sich in anderenJava Virtual Machines (JVMs) befinden

> Verbirgt Komplexität entfernter Kommunikation hinter normalem Methodenaufruf Netzwerkkommunikation ist transparent

Webbasierte Anwendungen / TechnikenGero Mühl 87

JVM 2JVM 1

. . .x = cal cul at or .

add( 7. 5, 9. 5) ;. . .

calculator7.5, 9.5

17

Remote-Objekt

Exemplarisches Anwendungsszenario

Webbasierte Anwendungen / TechnikenGero Mühl 88

> Benutzer lädt Webseite mit eingebettetem Taschenrechner-Applet 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.)

Webbrowser

• 8 9 +4 5 6 −1 2 3 *0 . = /

1. HTTP

2. Java RMI

Webserver

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

Webbasierte Anwendungen / TechnikenGero Mühl 89

....x = calculator.

add(7.5, 9.5);....

Client Server

Stub Skeleton

Netz

calculator

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

Webbasierte Anwendungen / TechnikenGero Mühl 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 Obj ect Out put St r eam, Obj ect I nput St r eam

> Zu übergebende Objekte müssen serialisierbar sein, d.h., das Markerinterface j ava. i o. Ser i al i zabl e implementieren

> Bytecode von lokal nicht verfügbaren Klassen wird dynamisch (z.B. über Netzwerk) nachgeladen

Webbasierte Anwendungen / TechnikenGero Mühl 91

Vorgehensweise

1. Schnittstelle definieren und implementieren (Remote-Schnittstelle und Remote-Klasse)

2. Stubs und Skeletons mit r mi c 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

Webbasierte Anwendungen / TechnikenGero Mühl 92

Java RMI Beispiel: Klassen

Webbasierte Anwendungen / TechnikenGero Mühl 93

_______Remote________

_________Calculator_______ _double add(double a, double b)

throws RemoteException;…

_____RemoteServer _____

___UnicastRemoteObject ___

_____SimpleCalculator ______double add(double a, double b);…

___SimpleCalculator_Stub ___ double add(double a, double b);…

Remote-Schnittstelle

Remote-Klasse

Stub-Klasse

Java RMI Registry

> Speichert Informationen über Remote-Objekte (nicht persistent)

> Start der RMI Registry> Von Kommandozeile: r mi r egi st r y [ por t ]> Durch Server: Locat eRegi st r y. cr eat eRegi st r y( por t ) ;

> Benutzt URL-basierte Namen, z.B.[ r mi : / / ] myhost : por t / someJavaobj ect

> Server registrieren Remote-Objektebi nd( ) , unbi nd( ) , r ebi nd( )

> Clients lösen Namen auf oder suchen Remote-Objektel ookup( ) , l i s t ( )

Webbasierte Anwendungen / TechnikenGero Mühl 94

Java RMI Beispiel – Schnittstelle

i mpor t j ava. r mi . * ;i mpor t j ava. r mi . ser ver . * ;

/ / Def i ni ng a Remot e I nt er f acepubl i c i nt er f ace Cal cul at or ext ends Remot e {

doubl e add( doubl e a, doubl e b) t hr ows Remot eExcept i on;

}

Webbasierte Anwendungen / TechnikenGero Mühl 95

Marker-Schnittstelle

Java RMI Beispiel – Remote-Klasse

i mpor t j ava. r mi . * ;i mpor t j ava. r mi . ser ver . * ;

/ / I mpl ement i ng a Remot e I nt er f acepubl i c c l ass Si mpl eCal cul at or

ext ends Uni cast Remot eObj ecti mpl ement s Cal cul at or {

publ i c Si mpl eCal cul at or t hr ows Remot eExcept i on { } ;

publ i c doubl e add(doubl e a, doubl e b) {

r et ur n a + b;}…

}

Webbasierte Anwendungen / TechnikenGero Mühl 96

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

Java RMI Beispiel – Server

i mpor t j ava. r mi . * ;i mpor t j ava. r mi . ser ver . * ;

publ i c c l ass Cal cul at or Ser ver {publ i c st at i c voi d mai n( St r i ng[ ] ar gs) {

/ / Set Secur i t yManagerSyst em. set Secur i t yManager ( new RMI Secur i t yManager ( ) ) ;t r y {

/ / Cr eat e r emot e obj ectSi mpl eCal cul at or cal c = new Si mpl eCal cul at or ( ) ;/ / Regi st er r emot e obj ect wi t h RMI Regi st r yNami ng. r ebi nd( " / / myhost / Cal cul at or " , cal c) ;

} cat ch ( Except i on e) { … } / / Pr ocess keeps r unni ng!

} }

Webbasierte Anwendungen / TechnikenGero Mühl 97

Java RMI Beispiel – Client Applet

i mpor t j ava. appl et . * ;i mpor t j ava. r mi . * ;

publ i c c l ass Hel l oAppl et ext ends Appl et {Cal cul at or cal c;publ i c voi d i ni t ( ) {

t r y {cal c = ( Cal cul at or ) Nami ng. l ookup(

" / / " + get CodeBase( ) . get Host ( ) + " / Cal cul at or " ) ;

} cat ch ( Except i on e) { … }…

}

pr ot ect ed doubl e add( doubl e a, doubl e b) {r et ur n cal c. add( a, b) ;

}…

}

Webbasierte Anwendungen / TechnikenGero Mühl 98

Java RMI Beispiel – Client Application

i mpor t j ava. r mi . * ;

publ i c c l ass Cal cul at or Cl i ent {publ i c st at i c voi d mai n( St r i ng ar gs[ ] ) {

/ / Set Secur i t yManagerSyst em. set Secur i t yManager ( new RMI Secur i t yManager ( ) ) ;t r y {

/ / obt ai n URL f or r emot e obj ect andSt r i ng name = " / / " + ar gs[ 0] + " / Cal cul at or " ;/ / l ookup r emot e obj ect ( s t ub i s l oaded/ / aut omat i cal l y , i f not avai l abl e)Cal cul at or cal c = ( Cal cul at or ) Nami ng. l ookup( name) ;/ / cal l met hod on r emot e obj ectdoubl e r = cal c. add( 5, 5) ;

} cat ch ( Except i on e) { … }}

}

Webbasierte Anwendungen / TechnikenGero Mühl 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 wurdej ava –Dj ava. r mi . ser ver . codebase=ht t p: / / myhost / mydi r

Webbasierte Anwendungen / TechnikenGero Mühl 100

Java RMI Security

Webbasierte Anwendungen / TechnikenGero Mühl 101

> 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> Syst em. set Secur i t yManager (

new RMI Secur i t yManager ( ) )

Sicherheitsrichtlinien

> Sicherheitsrichtlinien werden durch eine Policy-Datei gesetztgr ant {

per mi ssi on j ava. net . Socket Per mi ssi on" * : 1024- 65535" , " connect , accept " ;

per mi ssi on j ava. net . Socket Per mi ssi on" * : 80" , " connect " ;

} ;

> Werkzeug zum Erstellen einer Policy-Datei pol i cyt ool

> Setzen der Policy-Datei für eine JVMj ava –Dj ava. secur i t y. pol i cy=mypol i cyf i l e …

Webbasierte Anwendungen / TechnikenGero Mühl 102

LiveConnect

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

Webbasierte Anwendungen / TechnikenGero Mühl 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();");

}}

Webbasierte Anwendungen / TechnikenGero Mühl 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>

Webbasierte Anwendungen / TechnikenGero Mühl 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.html4. The Java Tutorials: Invoking JavaScript Code From an Applet

> http://java.sun.com/docs/books/tutorial/deployment/applet/invokingJavaScriptFromApplet.html

5. The Java Tutorials: Invoking Applet Methods From JavaScript Code> http://java.sun.com/docs/books/tutorial/deployment/applet/invokingAppletMetho

dsFromJavaScript.html6. 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> http://java.sun.com/docs/books/tutorial

Webbasierte Anwendungen / TechnikenGero Mühl 107

Fragen?

Webbasierte Anwendungen / TechnikenGero Mühl 108

Prof. Dr.-Ing. habil. Gero Mühl

Architektur von Anwendungssystemen (AVA)Fakultät für Informatik und Elektrotechnik (IEF)Universität Rostock

Webbasierte Anwendungen

Java Enterprise Edition (JEE)

Überblick

> Einführung und Architektur

> Java Servlets

> Java Server Pages (JSP)

> Java Server Faces (JSF)

> Enterprise Java Beans (EJB)

Webbasierte Anwendungen / JEEGero Mühl 2

Einführung und Architektur

Webbasierte Anwendungen / JEEGero Mühl 3

Java Enterprise Edition (Java EE)

> Rahmenwerk für Design, Entwicklung und Deployment mehrschichtiger verteilter Enterprise-Anwendungen

> Anwendungsschichten von Java EE> Client-Tier Client-Rechner> Web-Tier> 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

Webbasierte Anwendungen / JEEGero Mühl 4

Java EE Application Server

AktuelleVersion

6

Java EE Architektur

Webbasierte Anwendungen / JEEGero Mühl 5

Web Container EJB Container

EnterpriseInformation

Systems

Client

Client

Client

ServletJSPJSF

RDBMSTM

Legacy

EJB

EJB

EJB

Client Tier Web Tier Business Tier EIS Tier

Java EE Application Server

Java Servlets

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“> „CGI auf Java-Art“

> Plattformunabhängige Alternative zu CGI> Einfacher zu schreiben> Schneller und sicherer in der Ausführung> Java-API steht zur Verfügung (außer GUI)

Webbasierte Anwendungen / JEEGero Mühl 7

AktuelleVersion

3.0

Webbasierte Anwendungen / JEEGero Mühl 8

Servlet Container

> Fungiert als Laufzeitumgebung

> Stellt Dienste bereit> Lifecycle Management> Session Management> Authentifizierung und Autorisierung> Transaktionen und Persistenz> Verwaltung von Ressourcen> …

Architektur

> Servlets werden über Webserver mittels URL angesprochen

> Webserver übergibt HTTP-Request mit „passender“ URL an Servlet-Container, der das anzusprechendeServlet instanziiert

> Servlet wird mit HTTP-Request aufgerufen und liefert HTTP-Response

Webbasierte Anwendungen / JEEGero Mühl 9

Web-Browser

1. HTTP-Request 2. HTTP-Response

Tomcat Servlet-

ContainerServlet

Apache Web-

ServerConnector

Apache JServProtocol (AJP)

Schnittstellen und Klassen

Webbasierte Anwendungen / JEEGero Mühl 10

InterfaceClass

___javax.servlet.GenericServlet___

__javax.servlet.http.HTTPServlet__doGet(HttpServletRequest req,

HttpServletResponse res) doPost(HttpServletRequest req,

HttpServletResponse res)

______javax.servlet.Servlet______void init(ServletConfig config)void service(ServletRequest req,

ServletResponse res)void destroy()

____javax.servlet.ServletRequest____

_javax.servlet.http.HttpServletRequest_

___javax.servlet.ServletResponse___

_javax.servlet.http.HttpServletResponse_

______MySimpleServlet________Vom Servlet-Entwickler

zu implementieren

Schnittstelle Ser vl et / Klasse Gener i cSer v l et> Interface Ser v l et

> Von jeder Servlet-Klasse zu implementieren> Klassenlader des Containers lädt Servlet-Klasse> Container delegiert Client-Anfrage an Servlet> Abarbeitung findet in eigenem Thread statt

> Wichtige Methoden der Schnittstelle> voi d i ni t ( Ser vl et Conf i g conf i g)

> Einmaliger Aufruf durch Container zur Initialisierung > voi d ser v i ce( Ser vl et Request r eq, Ser vl et Response r es)

> Verarbeiten einer Anfrage und Erzeugen der zugehörigen Antwort > voi d dest r oy( )

> Einmaliger Aufruf durch Container am Lebensende> Nutzung zur Freigabe von Ressourcen

> Klasse Gener i cSer vl et unabhängig vom verwendeten Protokoll

> Vorgehen> Eigenes Servlet von Gener i cSer vl et ableiten> ser v i ce-Methode überschreiben

Webbasierte Anwendungen / JEEGero Mühl 11

init

service

destroy

Klasse HTTPSer vl et

> Klasse j avax. ser v l et . ht t p. Ht t pSer vl et> Verarbeitung von HTTP-Anfragen durch doMet hod( ) -Methoden,

die den Methoden des HTTP-Protokolls entsprechen> doGet ( ) , doPost ( ) , doHead( ) , doPut ( ) , doDel et e( ) ,

doOpt i ons( ) und doTr ace( )

> doMet hod( Ht t pSer vl et Request r eq,Ht t pSer vl et Response r es)

> Parameter sind HTTP-spezifische Request- / Response-Objekte

> Vorgehen> Eigenes Servlet von Ht t pSer vl et ableiten > Benötigte doMet hod( ) -Methode(n) überschreiben

Webbasierte Anwendungen / JEEGero Mühl 12

Klasse Ht t pSer vl et Request

Webbasierte Anwendungen / JEEGero Mühl 13

> Repräsentiert HTTP-Request des Clients

> Methoden> St r i ng get Header ( St r i ng f i el d)

> Abfragen von HTTP-Header-Feldern> St r i ng get Quer ySt r i ng( )

> Liefert Query String bei GET-Requests> St r i ng get Par amet er ( St r i ng name)

> Parameter aus GET- oder POST-Request holen > Buf f er edReader get Reader ( )

Ser vl et I nput St r eam get I nput St r eam( )> Zum Lesen von Zeichen bzw. Binärdaten aus dem Body

> Cookie[] getCookies()> Liefert alle Cookies des Requests

> …

Klasse Ht t pSer vl et Response

> Repräsentiert HTTP-Response für den Client

> Methoden> voi d set Header ( St r i ng f i el d, St r i ng val ue)

> Setzen beliebiger HTTP-Header-Felder> Für die wichtigsten Header-Felder existieren eigene Methoden

> voi d set Cont ent Type( St r i ng t ype)> Setzt Typ des Bodys der Response (z.B. auf t ext / ht ml )

> voi d sendEr r or ( i nt sc, St r i ng msg)> Fehlermeldung senden (z.B. 404, „Seite nicht gefunden“)

> Pr i nt Wr i t er get Wr i t er ( )Ser vl et Out put St r eam get Out put St r eam( )

> Zum Schreiben von Zeichen bzw. Binärdaten > …

Webbasierte Anwendungen / JEEGero Mühl 14

Servlet Beispiel

@WebSer vl et ( " / hel l o" )publ i c c l ass MySi mpl eSer vl et ext ends Ht t pSer vl et {

@Over r i depubl i c voi d doGet ( Ht t pSer v l et Request r eq,

Ht t pSer v l et Response r es)t hr ows Ser vl et Except i on, I OExcept i on {

r es. set Cont ent Type( " t ext / ht ml " ) ; Pr i nt Wr i t er out = r es. get Wr i t er ( ) ;out . pr i nt l n( " <ht ml ><head>“ ) ;out . pr i nt l n( " <t i t l e>Response</ t i t l e></ head>" ) ;out . pr i nt l n( " <body><h1>Hel l oWor l d</ h1>" ) ;out . pr i nt l n( " </ body></ ht ml >" ) ;out . c l ose( ) ;

}}

Webbasierte Anwendungen / JEEGero Mühl 15

HTML-Ausgabe erzeugen

HttpServlet erweitern und benö-tigte Methoden überschreiben

Annotation kennzeichnet Klasse als Servlet und gibt URL an

Servlet Beispiel 2

<FORM METHOD=" POST" ACTI ON=" / ser v l et / For mSer vl et " ><I NPUT NAME=" f i r s t name" TYPE=" t ext " SI ZE=" 30" ><I NPUT NAME=" l ast name" TYPE=" t ext " SI ZE=" 30" ><I NPUT NAME=" age" TYPE=" t ext " SI ZE=" 3" ><I NPUT TYPE=" SUBMI T" >

</ FORM>

publ i c voi d doPost ( Ht t pSer v l et Request r equest ,Ht t pSer v l et Response r esponse)t hr ows Ser v l et Except i on, I OExcept i on {

f i r s t name = r equest . get Par amet er ( " f i r s t name" ) ; l ast name = r equest . get Par amet er ( " l ast name" ) ;ageSt r i ng = r equest . get Par amet er ( " age" ) ;…

}

Webbasierte Anwendungen / JEEGero Mühl 16

HTML-Formular

ServletFormularparameter

aus Request extrahieren

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 Archivsi ndex. ht mlMETA- I NF/

MANI FEST. MFWEB- I NF/

web. xmll i b/c l asses/

ava/MySi mpl eSer vl et . c l ass

Webbasierte Anwendungen / JEEGero Mühl 17

Optionaler Deployment Descriptor

Bibliotheken

Klassen

Metainformationen über den Inhalt des Archivs

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 synchr oni zed

> Kritische Auswirkungen auf Leistung möglich> Schnittstelle j avax. ser vl et . Si ngl eThr eadModel

implementieren (deprecated) immer nur ein Request gleichzeitig auf einer Servlet-Instanz aktiv

Webbasierte Anwendungen / JEEGero Mühl 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 Ser vl et Cont ext sichtbar

> Klasse j avax. ser vl et . ht t p. Ht t pSessi on> Abstrahiert von Cookies und URI Rewriting> Dient als Container für beliebige serialisierbare Objekte, die auf dem

Server liegen Client bekommt nur eine Identifikation> Ht t pSer v l et Request #get Sessi on( )

> Erzeugt neue Session, falls noch keine vorhanden

> Anwendungsdaten werden als Attribute an Sessions gebunden> sessi on. set At t r i but e( name, val ue)> val ue = sessi on. get At t r i but e( name)

Webbasierte Anwendungen / JEEGero Mühl 19

Servlets Sessions

> Sessions „fressen“ Betriebsmittel (z.B. Speicher)

> Explizite Invalidierung der Session

> sessi on. i nval i dat e( )

> Globaler Timeout in web. xml einstellbar

> Einstellbarer Per-Session-Timeout

> sessi on. set MaxI nact i veTi meout ( )

Webbasierte Anwendungen / JEEGero Mühl 20

Servlet Cookie API

> Klasse j avax. ser v l et . ht t p. Cooki e repräsentiert einen Cookie

> Konstruktor> publ i c Cooki e( St r i ng name, St r i ng val ue)

> Setzen im Response Header (HTTPSer vl et Request )> r esponse. addCooki e( user Cooki e) ;

> Lesen aus Request Header (HTTPSer vl et Request )> Cooki e[ ] cooki es = r equest . get Cooki es( ) ;

Webbasierte Anwendungen / JEEGero Mühl 21

Getter/Setter-Methoden von j avax. ser v l et . ht t p. Cooki e

> bool ean i sHt t pOnl y( ) voi d set Ht t pOnl y( bool ean onl y)> Cookie nicht an clientseitige Scripts übergeben (Setzen und Testen)

> bool ean get Secur e( )voi d set Secur e( bool ean f l ag)> Cookie darf nur per HTTPS übertragen werden (Setzen und Testen)

> St r i ng get Name( )voi d set Name( St r i ng name)

> St r i ng get Val ue( )voi d set Val ue( St r i ng val ue)

> St r i ng get Domai n( )voi d set Domai n( St r i ng domai n)

Webbasierte Anwendungen / JEEGero Mühl 22

Ereignisse

> Ereignisbehandlung folgt dem Listener-Modell Tritt ein Ereignis auf, so wird der Listener aufgerufen

> Definition von Listenern mittels Annotationen, im Deployment Descriptor oder explizite Registrierung mittels einer der addLi st er er -Methoden im Ser vl et Cont ext

@WebLi st enerpubl i c c l ass Sessi onCount er

i mpl ement s HTTPSessi onLi st ener {pr i vat i nt sessi ons = 0;@Over r i devoi d sessi onCr eat ed( Ht t pSessi onEvent se) { sessi ons++; }@Over r i devoi d sessi onDest r oyed( Ht t pSessi onEvent se) { sessi ons- - ; }i nt get Act i veSessi ons( ) { r et ur n sessi ons; }

}

Webbasierte Anwendungen / JEEGero Mühl 23

Listener-Definitiondurch Annotation

Ereignisse: Klassen und Schnittstellen

Webbasierte Anwendungen / JEEGero Mühl 24

_____HttpSessionListener_____void sessionCreated(

HttpSessionEvent hse)void sessionDestroyed(

HttpSessionEvent hse)

_HttpSessionActivationListener_void sessionDidActivate(

HttpSessionEvent hse)void sessionWillPassivate(

HttpSessionEvent hse)

______HttpSessionEvent ______HttpSession getSession()

_____HttpSessionBindingListener_____void valueBound(

HttpSessionBindingEvent hsbe)void valueUnbound(

HttpSessionBindingEvent hsbe)

____HttpSessionAttributeListener_____void attributeAdded (

HttpSessionBindingEvent hsbe)void attributeRemoved(

HttpSessionBindingEvent hsbe)void attributeReplaced(

HttpSessionBindingEvent hsbe)

____HttpSessionBindingEvent ____HttpSession getSession()String getName()Object getValue()

_____java.util.EventListener_____

Implementiert von Attribut-Objekten

Implementiert von Attribut-Objekten

Ereignisse: Sessions

> Ht t pSessi onAct i vat i onLi st ener -Interface

voi d sessi onDi dAct i vat e( Ht t pSessi onEvent hse)voi d sessi onWi l l Passi vat e( Ht t pSessi onEvent hse)

> Implementiert von Attribut-Objekten, die benachrichtigt werden wollen, wenn zugeordnete Session aktiviert oder passiviert wird

> Ht t pSessi onLi st ener -Interface

voi d sessi onCr eat ed( Ht t pSessi onEvent hse)voi d sessi onDest r oyed( Ht t pSessi onEvent hse)

> Implementiert von Objekten, die benachrichtigt werden wollen, wenn eine Session erzeugt oder zerstört wird

> Ht t pSessi onEvent -Klasse

Ht t pSessi on get Sessi on( )

Webbasierte Anwendungen / JEEGero Mühl 25

Ereignisse: Session-Attribute

> Ht t pSessi onBi ndi ngLi st ener -Interfacevoi d val ueBound( Ht t pSessi onBi ndi ngEvent hsbe)voi d val ueUnbound( Ht t pSessi onBi ndi ngEvent hsbe)

> Implementiert von Attribut-Objekten, die benachrichtigt werden wollen, wenn sie gebunden oder entfernt werden

> Ht t pSessi onAt t r i but eLi st ener -Interface

voi d at t r i but eAdded( Ht t pSessi onBi ndi ngEvent hsbe)voi d at t r i but eRemoved Ht t pSessi onBi ndi ngEvent hsbe)voi d at t r i but eRepl aced( Ht t pSessi onBi ndi ngEvent hsbe)

> Implementiert von Objekten, die benachrichtigt werden wollen, wenn ein Attribut einer beliebigen Session hinzugefügt, entfernt oder ersetzt wird

> Ht t pSessi onBi ndi ngEvent -Klasse

Ht t pSessi on get Sessi on( )St r i ng get Name( )Obj ect get Val ue( )

Webbasierte Anwendungen / JEEGero Mühl 26

Asynchrone Request-Verarbeitung

> Bei synchroner Request-Verarbeitung muss der Request abgeschlossen sein, wenn doMet hod( ) returniert

⇒ Langlaufende Aktionen blockieren ausführenden Thread⇒ Threads werden knapp⇒ Degradierung der Leistung

> Asynchrone Request-Verarbeitung > Ermöglicht aus doMet hod( ) zurückzuspringen, ohne den

Request abzuschließen> Spätere Wiederaufnahme der Ausführung des Requests,

um diesen zum Abschluss zu bringen (evtl. a. mehrfach)

> Weitere Anwendungsmöglichkeit: Server-Side Push> Auch bekannt als Reverse Ajax, Comet, …

Webbasierte Anwendungen / JEEGero Mühl 27

Asynchrone Request-Verarbeitung

> Servlet für asynchrone Requests konfigurieren> @WebSer vl et ( " / chat " , asyncSuppor t ed=t r ue)

> Request in asynchronen Modus versetzen> AsyncCont ext ac = r eq. st ar t Async( ) ;

> Request oder Response aus asynchronem Kontext holen> ac. get Request ( ) ;> ac. get Response( ) ;

> Request abschließen und Response schließen> ac. compl et e( ) ;

Webbasierte Anwendungen / JEEGero Mühl 28

Servlet Chat Beispiel

@WebSer vl et ( " / chat " , asyncSuppor t ed=t r ue)publ i c c l ass MySer vl et ext ends Ht t pSer vl et {

pr i vat e st at i c f i nal Queue<AsyncCont ext > acQueue = new Concur r ent Li nkedQueue<AsyncCont ext >( ) ;

pr i vat e st at i c f i nal Bl ocki ngQueue<St r i ng> messageQueue = new Li nkedBl ocki ngQueue<St r i ng>( ) ;

@Over r i depubl i c voi d i ni t ( Ser vl et Conf i g conf i g) t hr ows Ser vl et Except i on {

Runnabl e not i f i er Runnabl e = new Runnabl e( ) {publ i c voi d r un( ) {

whi l e ( t r ue) {message = messageQueue. t ake( ) ;f or ( AsyncCont ext ac : acQueue) {

Pr i nt Wr i t er acWr i t er = ac. get Response( ) . get Wr i t er ( ) ;acWr i t er . pr i nt l n( message) ; acWr i t er . f l ush( ) ;

} } }new Thr ead( not i f i er Runnabl e) . st ar t ( ) ;

}

Webbasierte Anwendungen / JEEGero Mühl 29

Chat-Nachricht an alle Requests weiter geben

Thread starten, derChat-Nachrichten an

Clients weitergibt

Speichert alleClient-Requests

Speichert dieChat-Nachrichten

Servlet Chat Beispiel

@Over r i depubl i c voi d doGet ( Ht t pSer vl et Request r eq,

Ht t pSer vl et Response r es)t hr ows Ser vl et Except i on, I OExcept i on {

r eq. set AsyncTi meout ( 10 * 60 * 1000) ;AsyncCont ext ac = r eq. st ar t Async( ) ;acQueue. add( ac) ;

}

@Over r i depubl i c voi d doPost ( Ht t pSer vl et Request r eq,

Ht t pSer vl et Response r es) t hr ows Ser vl et Except i on, I OExcept i on {

St r i ng message = r eq. get Par amet er ( " message“ ) ;messageQueue. put ( message) ;

}}

Webbasierte Anwendungen / JEEGero Mühl 30

Neue Chat-Nachricht entgegen nehmen und in Queue speichern

Request in asynchronen Modus schalten und in Queue speichern

Literatur

1. Sun Microsystems, Inc., Java Servlet Specification, Version 3.0> http://java.sun.com/products/servlet

Webbasierte Anwendungen / JEEGero Mühl 31

Fragen?

Webbasierte Anwendungen / JEEGero Mühl 32

Java Server Pages (JSP)

Java Server Pages (JSP)

> Erweiterung der Servlet Technologie> Ermöglicht „komfortablere“ Notation eines Servlets> Gemischte Seitenbeschreibung

> Statische Inhalte (Static Template Code)> Dynamische Inhalte (JSP Elements)

> JSP umfasst Direktiven, Scripting und Aktionen

> JSP wird in Servlet-Klasse kompiliert

Webbasierte Anwendungen / JEEGero Mühl 34

JavaServerPage

JavaServlet

Page Compilation

AktuelleVersion

2.2

Model 1 Architecture

> JSP> Behandelt Request> Übernimmt Steuerung> Generiert Response

> Datenzugriff wird in Java Beans ausgelagert

Webbasierte Anwendungen / JEEGero Mühl 35

Web-Browser

JSP

Java Bean DB

1.

2.

4.

3.

Nur für einfachsteAnwendungensinnvoll!

Model 2 Architecture (MVC Pattern)

Webbasierte Anwendungen / JEEGero Mühl 36

> Serverseitige Realisierung des MVC Patterns> Model: Java Beans, View: JSP, Controller: Servlet

> Servlet leitet Request an passendes JSP weiter:

Ser vl et Cont ext sc = get Ser v l et Cont ext ( ) ;Request Di spat cher r d =

sc. get Request Di spat cher ( f or war dURL) ;r d. f or war d( r eq, r es) ;

Web-Browser

Servlet

Java Bean DB

1.

2.

5.

3.JSP

4.

Für nichttriviale Anwendungen vorzuziehen!

JSP Beispiel – HTML + Java Code

<ht ml ><head>

<t i t l e>JSP Bei spi el </ t i t l e></ head><body>

Dat um und Zei t : <%= new j ava. ut i l . Dat e( ) %><br / ><% f or ( i nt i =0; i <5; i ++) { %>

Das Quadr at von <%= i %> i st <%= i * i %><br / ><% } %>

</ body></ ht ml >

Webbasierte Anwendungen / JEEGero Mühl 37

In dieser Syntax ist ein JSP kein valides HTML-Dokument! Es ist aber möglich, X(HT)ML-konforme JSPs in einer alternativen Syntax zu erstellen.

JSP Direktiven

> <%@ di r ect i ve { at t r i but e=" val ue" } * %>

> page-Direktive: <%@ page … %>> Importieren von Bibliotheken

<%@ page i mpor t =" j ava. ut i l . * " %>> Einstellungen für die Seite festlegen

<%@ page l anguage=" j ava" %>> HTTP-Session erzeugen ja/nein

<%@ page sessi on=" t r ue" %>> Von eigener Servlet-Basisklasse ableiten

<%@ page ext ends=" myser v l et " %>> Fehlerseite festlegen

<%@ page er r or Page=" er r or . j sp" %>> Ist Fehlerseite

<%@ page i sEr r or Page=" t r ue" %>

Webbasierte Anwendungen / JEEGero Mühl 38

JSP Direktiven

> include-Direktive: <%@ include … %>> Einbindung statischer Dokumente

<%@ i ncl ude f i l e=" companyBanner . ht ml " %>

> taglib-Direktive: <%@ taglib … %>> Erweiterung der Menge der vorhandenen Actions

<%@ t agl i b ur i =" / t agl i b" pr ef i x=" myt agl i b" %>

Webbasierte Anwendungen / JEEGero Mühl 39

<myt agl i b: cool t ag>. . .

</ myt agl i b: cool t ag>

JSP Scripting

> Deklarationen: <%! decl ar at i ons %>> Definieren und überschreiben von Methoden,

z.B. j spI ni t ( ) and j spDest r oy( )<%! publ i c voi d j spI ni t ( ) { . . . } %><%! publ i c voi d j spDest r oy( ) { . . . } %>

> Scriptlets: <% j ava code f r agment %>> Wird in den Rumpf der service-Methode eingefügt

<% j ava. ut i l . Dat e dat e = new j ava. ut i l . Dat e( ) ; out . pr i nt l n( dat e) ; %>

> Ausdrücke: <%= expression %>> Ausdruck auswerten und Ergebnis in String umwandeln> String in Seite einfügen

<%= dat e %>

Webbasierte Anwendungen / JEEGero Mühl 40

JSP Deklarationen

<HTML><HEAD>

<TI TLE>Cur r ent Dat e</ TI TLE></ HEAD><BODY><%!

doubl e number = Mat h. r andom( ) ;Dat e comput eDat e( ) {

r et ur n new Dat e( ) ;}

%>The t i me i s now <%= comput eDat e( ) %>Random number i s <%= number %></ BODY>

</ HTML>

Webbasierte Anwendungen / JEEGero Mühl 41

Methoden-Deklaration

Member-Deklaration

Achtung: Mehrere Threadskönnen gleichzeitig auf einer JSP-Instanz arbeiten!

JSP Implizite Objekte

Name> r equest> r esponse> sessi on> out> appl i cat i on> conf i g> page> except i on

Typ> Ht t pSer vl et Request> Ht t pSer vl et Response> Ht t pSessi on> JspWr i t er> Ser vl et Cont ext> Ser vl et Conf i g> äquivalent zu t hi s> java. l ang. Thr owabl e

Webbasierte Anwendungen / JEEGero Mühl 42

> Innerhalb von Scriptlets und Ausdrücken kann auf diese Objekte zugegriffen werden, z.B.<% out.println(request.getRemoteHost()); %>

JSP Sessions

Webbasierte Anwendungen / JEEGero Mühl 43

<HTML><BODY><FORM METHOD=POST ACTI ON=" Save. j sp" >

What ' s your name? <I NPUT TYPE=" TEXT" NAME=" user name" SI ZE=" 20" ><I NPUT TYPE=" TEXT" NAME=" emai l " SI ZE=" 20" ><I NPUT TYPE=" SUBMI T" >

</ FORM></ BODY></ HTML>

<%St r i ng name = r equest . get Par amet er ( " user name" ) ;sessi on. set At t r i but e( " user name" , name ) ;St r i ng emai l = r equest . get Par amet er ( " emai l " ) ;sessi on. set At t r i but e( " emai l " , emai l ) ;

%>

Form.html

Save.jsp

Formular sendet Daten an JSP.

JSP Actions

> Starten zusätzliche Funktionalität zur Laufzeit

> Syntax> mit Body <j sp: t ag>body</ j sp: t ag>> ohne Body <j sp: t ag { at t r i but e=" name" } * / >

> Einfügen einer HTML- oder JSP-Seite<j sp: i nc l ude page=" r ur l " f l ush=" t r ue" / >

> Weiterleiten auf andere Seite<j sp: f or war d page=" er r or Page. j sp" / ><j sp: f or war d page=" <%= . . . %>" / >

Webbasierte Anwendungen / JEEGero Mühl 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

Webbasierte Anwendungen / JEEGero Mühl 45

JSP <useBean>-Tag

Webbasierte Anwendungen / JEEGero Mühl 46

publ i c c l ass User Dat a {publ i c voi d set User name( St r i ng val ue) { user name = val ue; }publ i c voi d set Emai l ( St r i ng val ue) { emai l = val ue; }publ i c St r i ng get User name( ) { r et ur n user name; }publ i c St r i ng get Emai l ( ) { r et ur n emai l ; }

}

<j sp: useBean i d=" user " c l ass=" User Dat a" scope=" sessi on" / ><j sp: set Pr oper t y name=" user " pr oper t y=" * " / >

</ j sp: useBean>

<HTML><BODY>

<j sp: useBean i d=" user " c l ass=" User Dat a" scope=" sessi on" / >

Name: <%= user . get User name( ) %><BR>Emai l : <%= user . get Emai l ( ) %><BR>

</ j sp: useBean></ BODY></ HTML>

Bean

Save.jsp

Load.jsp

JSP <useBean>-Tag

> Aufruf einer JavaBean <j sp: useBean i d=" user " c l ass=" user Dat a"

scope=" sessi on" >

> Ermitteln und Ändern von Eigenschaften einer JavaBean<j sp: get Pr oper t y name=" user " pr oper t y=" name" / >

<j sp: set Pr oper t y name=" user " pr oper t y=" name" val ue=" Pet er " / >

> Mapping eines bzw. aller gleichnamigen Request-Parameter<j sp: set Pr oper t y name=" user " pr oper t y=" name"

par am=" nachname" / ><j sp: set Pr oper t y name=" user " pr oper t y=" * " / >

Webbasierte Anwendungen / JEEGero Mühl 47

JSP XML View

Type of Element Non-XML Syntax XML Tag

Direktiven <%@ directive %><jsp:directive.page ... /><jsp:directive.include ... />

Deklarationen <%! declarations %><jsp:declaration>…</jsp:declaration>

Ausdrücke <%= expression %><jsp:expression>…</jsp:expression>

Codefragmente <% code fragment %><jsp:scriptlet>…</jsp:scriptlet>

Webbasierte Anwendungen / JEEGero Mühl 48

JSP Standard Tag Library (JSTL)

> Nicht Teil der JSP-Spezifikation, sondern eigene Spezifikation> Ersetzt Scriptlets bei einfachen Aufgaben

> Iteration: <c: f or each>> Bedingungen: <c: i f >> Alternativen: <c: choose>, <c: when>, <c: ot her wi se>

<%@ page i sELI gnor ed=" f al se" %><%@ t agl i b pr ef i x=" c" ur i =" ht t p: / / j ava. sun. com/ j sp/ j s t l / cor e" %><ht ml >

. . .Your shoppi ng car t :<t abl e>

<c: f or Each var =" pr oduct " i t ems=" ${ car t } " ><t r ><t d>${ pr oduct } </ t d></ t r >

</ c: f or Each></ t abl e>. . .

</ ht ml >

Webbasierte Anwendungen / JEEGero Mühl 49

AktuelleVersion

1.2

JSP Expression Language (EL)

<ht ml >. . .Sel ect ed CPU has TDP:<%= ( ( Comput er ) r eq. get At t r i but e( " comput er " ) ) . get CPU( ) . get TDP( ) %> W. . .</ ht ml >

<ht ml >. . .<j sp: useBean i d=" comput er " c l ass=" Comput er " scope=" r equest " / >Sel ect ed CPU has TDP:<j sp: get Pr oper t y name=" comput er " pr oper t y=" CPU" / > W. . .</ ht ml >

<ht ml >. . .Your CPU has TDP: ${ comput er . CPU. TDP} W. . .</ ht ml >

Webbasierte Anwendungen / JEEGero Mühl 50

AktuelleVersion

2.2

Geht wegen fehlender Unterstützung für Verschachtelung nicht

EL

JSTL

Scriptlet

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

Webbasierte Anwendungen / JEEGero Mühl 51

Fragen?

Webbasierte Anwendungen / JEEGero Mühl 52

Java Server Faces (JSF)

Java Server Faces (JSF)

> Serverseitiges Komponentenmodell für die Entwicklung Java-basierter Webapplikationen> 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

Webbasierte Anwendungen / JEEGero Mühl 54

AktuelleVersion

2.0

JSF Beispiel

<! DOCTYPE ht ml PUBLI C " - / / W3C/ / DTD XHTML 1. 0 Tr ansi t i onal / / EN"" ht t p: / / www. w3. or g/ TR/ xht ml 1/ DTD/ xht ml 1- t r ansi t i onal . dt d" ><ht ml xml ns=" ht t p: / / www. w3. or g/ 1999/ xht ml “

xml ns: h=" ht t p: / / j ava. sun. com/ j sf / ht ml " ><h: head>…</ h: head><h: body>

<h: f or m><f i el dset >

<l egend>User Logi n</ l egend>User I D:<h: i nput Text val ue=" #{ user Bean. user I d} " / ><br / >Passwor d:<h: i nput Secr et val ue=" #{ user Bean. passwor d} " / ><br / ><h: commandBut t on val ue=" Show St ar t Page"

act i on=" #{ user Bean. showSt ar t Page} " / ></ f i el dset >

</ h: f or m></ h: body>

</ ht ml >

Webbasierte Anwendungen / JEEGero Mühl 55

Button wird mitBean assoziiert

l ogi n. xht mlwird über URLl ogi n. j s fangesprochen

JSF Beispiel

@ManagedBeanpubl i c c l ass User Bean i mpl ement s Ser i al i zabl e {

pr i vat e St r i ng user I d, passwor d;pr i vat e User user ;

publ i c St r i ng get User I d( ) { r et ur n( user I d) ; }publ i c voi d set User I d( St r i ng user I d) { … }publ i c St r i ng get Passwor d( ) { … }publ i c voi d set Passwor d( St r i ng passwor d) { … }publ i c User get User ( ) { … }publ i c voi d set User ( ) { … }

publ i c St r i ng showSt ar t Page( ) {user = User Lookup. get User ( user I d) ;i f ( user == nul l )

r et ur n( " wr ong- user i d" ) ;i f ( ! user . passwor d. equal s( passwor d) ) {

r et ur n( " wr ong- passwor d" ) ;}r et ur n( " show- st ar t " ) ;

}}

Webbasierte Anwendungen / JEEGero Mühl 56

Bean wird durch Annotation deklariert

Rückgabewert bestimmtSeitennavigation

JSF Beispiel

> show- st ar t . xht ml<h1>Wel come</ h1><ul >

<l i >Fi r st name: #{ user Bean. user . f i r s t Name} </ l i ><l i >Last name: #{ user Bean. user . l ast Name} </ l i ><l i >I D: #{ user Bean. user . i d} </ l i >

</ ul >

> wr ong- user i d. xht ml<p>No user f ound wi t h i d " #{ user Bean. user I d} “ </ p>

> wr ong- passwor d. xht ml<p>Wr ong passwor d. Pl ease t r y agai n. </ p>

Webbasierte Anwendungen / JEEGero Mühl 57

f aces- conf i g. xml

<?xml ver si on=" 1. 0" ?><f aces- conf i g ver si on=" 2. 0" >

<navi gat i on- r ul e><f r om- vi ew- i d>/ l ogi n. xht ml </ f r om- vi ew- i d><navi gat i on- case>

<f r om- out come>wr ong- user i d</ f r om- out come><t o- v i ew- i d>/ page- f or - wr ong- user i d. j sp</ t o- v i ew- i d>

</ navi gat i on- case><navi gat i on- case>

<f r om- out come>wr ong- passwor d</ f r om- out come><t o- v i ew- i d>/ page- f or - wr ong- passwor d. j sp</ t o- v i ew- i d>

</ navi gat i on- case><navi gat i on- case>

<f r om- out come>show- st ar t </ f r om- out come><t o- v i ew- i d>/ st ar t - page. j sp</ t o- v i ew- i d>

</ navi gat i on- case></ navi gat i on- r ul e>

</ f aces- conf i g>

Webbasierte Anwendungen / JEEGero Mühl 58

Rückgabewert der Bean-Methode undzugeordnete, darzustellende Seite

Aktuell dargestellte Seite

JSF Beispiel 2

<h: f or m i d=" bookFor m" ><f i el dset >

<l egend>Book I nf o</ l egend>I SBN Number of Book:<h: i nput Text val ue=" #{ bookBean. i sbn} " / ><br / ><h: commandBut t on val ue=" Show Book I nf or mat i on"

act i on=" #{ bookBean. showBookI nf oPage} " ><f : aj ax execut e=" @f or m"

r ender =" bookFor m: aj axMessage" / ></ h: commandBut t on><br / ><h: out put Text

val ue=" #{ bookBean. message} "i d=" aj axMessage" / >

</ f i el dset ></ h: f or m>

Webbasierte Anwendungen / JEEGero Mühl 59

Zu aktualisierendesElement

Formulardaten zum Server schickenund angegebenes Element aktualisieren

JSF Beispiel 2

@ManagedBean( name=" bookBean" )@Sessi onScopedpubl i c c l ass ARX27 i mpl ement s Ser i al i zabl e {

pr i vat e St r i ng message;pr i vat e St r i ng i sbn;publ i c St r i ng get message( ) { …}publ i c voi d set Message( St r i ng message) { …}publ i c St r i ng get I SBN( ) { …}publ i c voi d set I SBN( St r i ng message) { …}…publ i c St r i ng showBookI nf oPage( ) {

Book book = db. l ookupBook( i sbn) ;i f ( book ! = nul l )

message = book. get I nf o( ) ;el se

message = " Sor r y, book not f ound! " ;

r et ur n nul l ;}…

}

Webbasierte Anwendungen / JEEGero Mühl 60

Rückgabewert nul l , dagleiche Seite

Durch Aktualisierung anzuzeigende Nachricht

Facelet Templating

> Ermöglicht die Wiederverwendung von Facelet-Code

> t empl at e- f i l e- 1. xht ml

<h: body>Cont ent shar ed by al l c l i ent f i l es<h2><ui : i nser t name=" t i t l e" >Def aul t Ti t l e</ ui : i nser t ></ h2>Mor e cont ent shar ed by al l c l i ent s<ui : i nser t name=" body" >Def aul t Body</ ui : i nser t >

</ h: body>

> cl i ent - f i l e- 1. xht ml

<ui : composi t i on t empl at e=" / t empl at es/ t empl at e- 1. xht ml " ><ui : def i ne name=" t i t l e" >Ti t l e t ext </ ui : def i ne><ui : def i ne name=" body" >

Cont ent t o go i n " body" sect i on of t empl at e</ ui : def i ne>

</ ui : composi t i on>

Webbasierte Anwendungen / JEEGero Mühl 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

Webbasierte Anwendungen / JEEGero Mühl 62

Fragen?

Webbasierte Anwendungen / JEEGero Mühl 63

Enterprise Java Beans (EJBs)

Enterprise Java Beans (EJBs)

> Server-side component model for multi-tier applications> Not to be confused with Java Beans

> 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

Webbasierte Anwendungen / JEEGero Mühl 65

CurrentVersion

3.1

Two Types of EJBs

> Session beans> Model business processes without persistent state

> Message-driven beans > Execute on receipt of asynchronous messages

Webbasierte Anwendungen / JEEGero Mühl 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.

Webbasierte Anwendungen / JEEGero Mühl 67

Stateless Session Beans

> Do not maintain a conversational state for the client> No state that persists across method invocations

> Except during method invocation, all instances of a stateless bean are equivalent> EJB container can assign an instance to any client

Pooling> One bean can manage several clients

> 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

Webbasierte Anwendungen / JEEGero Mühl 68

Example Stateless Session Bean

@St at el esspubl i c c l ass Conver t er Bean {

pr i vat e Bi gDeci mal eur oRat e = new Bi gDeci mal ( " 1. 34711" ) ;

@WebMet hodpubl i c Bi gDeci mal dol l ar ToEur o( Bi gDeci mal dol l ar s) {

Bi gDeci mal r esul t = dol l ar s. mul t i pl y( eur oRat e) ;r et ur n r esul t . set Scal e( 2, Bi gDeci mal . ROUND_UP) ;

}}

@WebSer vl etpubl i c c l ass Conver t er Ser vl et ext ends Ht t pSer vl et {

@EJBConver t er Bean conver t er ;…

Bi gDeci mal eur oAmount = conver t er . dol l ar ToEur o( dol l ar Amount ) ;

…}

Webbasierte Anwendungen / JEEGero Mühl 69

Servlet uses Session Bean

Offer method as Web serviceusing JAX-WS

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

Webbasierte Anwendungen / JEEGero Mühl 70

Example Stateful Session Bean

1. Define remote interface

@Remot epubl i c i nt er f ace Car t {

publ i c voi d i ni t i al i ze( St r i ng i d)t hr ows BookExcept i on;

publ i c voi d addBook( St r i ng t i t l e) ;publ i c voi d r emoveBook( St r i ng t i t l e)

t hr ows BookExcept i on;publ i c Li s t <St r i ng> get Cont ent s( ) ;

publ i c voi d r emove( ) ;}

Webbasierte Anwendungen / JEEGero Mühl 71

Example Stateful Session Bean

2. Implement bean class

@St at ef ulpubl i c c l ass Car t Bean i mpl ement s Car t {

St r i ng cust omer I d;Li st <St r i ng> cont ent s;

publ i c voi d i ni t i al i ze( St r i ng i d) t hr ows BookExcept i on {I dVer i f i er i dChecker = new I dVer i f i er ( ) ;i f ( i dChecker . val i dat e( i d) ) {

cust omer I d = i d;} el se {

t hr ow new BookExcept i on( " I nval i d i d: " + i d) ;}cont ent s = new Ar r ayLi st <St r i ng>( ) ;

}

Webbasierte Anwendungen / JEEGero Mühl 72

Example Stateful Session Bean

publ i c voi d addBook( St r i ng t i t l e) {cont ent s. add( t i t l e) ;

}

publ i c voi d r emoveBook( St r i ng t i t l e) t hr ows BookExcept i on {bool ean r esul t = cont ent s. r emove( t i t l e) ;i f ( r esul t == f al se) {

t hr ow new BookExcept i on( t i t l e + " not i n car t . " ) ;}

}

publ i c Li st <St r i ng> get Cont ent s( ) {r et ur n cont ent s;

}

@Removepubl i c voi d r emove( ) {

cont ent s = nul l ;}

}

Webbasierte Anwendungen / JEEGero Mühl 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

Webbasierte Anwendungen / JEEGero Mühl 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

Webbasierte Anwendungen / JEEGero Mühl 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

Webbasierte Anwendungen / JEEGero Mühl 76

Beispiel Entity

@Ent i t ypubl i c c l ass Addr ess {

pr ot ect ed l ong i dSt r i ng st r eet ;St r i ng c i t y ;St r i ng z i pCode;

@I dpubl i c l ong get I d( ) { r et ur n i d; }publ i c voi d set I d( ) { t hi s . i d = i d; }publ i c St r i ng get St r eet ( ) { r et ur n st r eet ; }publ i c voi d set St r eet ( St r i ng st r eet )

{ t hi s . st r eet = st r eet ; }…

}

Webbasierte Anwendungen / JEEGero Mühl 77

Primary Key

Object Relational Mapping

> Entities are mapped to tuples in database tables

Webbasierte Anwendungen / JEEGero Mühl 78

_______Address _________long getId()void setId(long id)String getStreet()void setStreet(String street)String getCity()void setCity(String city)…

id street city

1 A-Street 5 London

2 B-Street 7 Berlin

3 X-Avenue 9 New York

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

Webbasierte Anwendungen / JEEGero Mühl 79

Fragen?

Webbasierte Anwendungen / JEEGero Mühl 80

Prof. Dr.-Ing. habil. Gero Mühl

Architektur von Anwendungssystemen (AVA)Fakultät für Informatik und Elektrotechnik (IEF)Universität Rostock

Webbasierte Anwendungen

Toolkits: Apache Wicket und GWT

Webbasierte Anwendungen / Wicket, Ajax und GWTGero Mühl 2

Überblick

> Apache Wicket

> Google Web Toolkit (GWT)

Apache Wicket

Web-Entwicklung in Java?

Servlets

> Java-Programme mit HTML-Ausgaben

> Ausführbar durch Webserverim Servlet-Container

> Grundlage vieler Web-Frameworks

Java Server Pages (JSP)

> HTML-Seiten mit spezifischen Tags und Java-Code

> Skriptlets, JSP-Aktionen undAusdrücke mit Programmfluss-Bedeutung

> Kompilierung zu Servlets

Webbasierte Anwendungen / Wicket, Ajax und GWTGero Mühl 4

Vermischung von Markup (HTML) mit Applikationslogik (Java)

Wartbarkeit? Alternativen?

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

> Transparente Unterstützung des Back Buttons

> Typsichere Sessions für transpa-rentes Zustandsmanagement

> Flexible Lokalisierung (Sprache)> HTML, Bilder, Label, etc.> Formularvalidierung

> Umfangreiche Ajax-Unterstüzungohne 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, Ajax und GWTGero Mühl 5

Aktuelle Version: 2.0

Model/View/Controller-Architektur

Webbasierte Anwendungen / Wicket, Ajax und GWTGero Mühl 6

Model(Modell)

View(Präsentation)

Controller(Steuerung)

Model> Beinhaltet die Geschäfts-

objekte und -daten> Informiert Beobachter

(z.B. Views) über Änderungen

View> Darstellung der

Geschäftsdaten> Informiert Beobachter

(z.B. Controller) über Benutzereingaben

Controller> Verwaltet Präsentationen> Verarbeitet

Benutzereingaben> Tätigt Modelländerungen

Modelländerungen

greift zu

Wicket Architektur

Webbasierte Anwendungen / Wicket, Ajax und GWTGero Mühl 7

<<use>>

<<use>>

WicketServletFilter

WicketComponent

SimpleComponent

ContainerComponent

+ render()

WebPage HTMLFile

MarkupFile

Container Session*

<<use>>

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

Webbasierte Anwendungen / Wicket, Ajax und GWTGero Mühl 8

HelloWorld Beispiel

publ i c c l ass Hel l oWor l dAppl i cat i on ext ends WebAppl i cat i on {

@Over r i depr ot ect ed voi d i ni t ( ) {

mount Bookmar kabl ePage( " / hel l o" , Hel l oWor l dPage. cl ass) ;}

@Over r i depubl i c Cl ass get HomePage( ) {

r et ur n Hel l oWor l dPage. cl ass;}

}

Webbasierte Anwendungen / Wicket, Ajax und GWTGero Mühl 9

Startseite der Webanwendung

Platz für eigene Initialisierungen

Zuweisung von (kurzen) URLs zu

Webseiten

HelloWorld Beispiel

> 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

Webbasierte Anwendungen / Wicket, Ajax und GWTGero Mühl 10

<ht ml ><body>

<span wi cket : i d=" message" >t hi s t ext get s r epl aced

</ span></ body></ ht ml >

HelloWorldPage.html

publ i c cl ass Hel l oWor l dPageext ends WebPage {

publ i c Hel l oWor l dPage( ) {Label l abel =

new Label ( " message" ," Hel l o Wor l d! " ) ;

add( l abel ) ;} }

HelloWorldPage.java

HelloWorld Beispiel – Deployment (web.xml)

<web- app>

<di spl ay- name>AVA</ di spl ay- name>

<f i l t er >

<f i l t er - name>Wi cket Fi l t er </ f i l t er - name>

<f i l t er - c l ass>

or g. apache. wi cket . pr ot ocol . ht t p. Wi cket Fi l t er

</ f i l t er - c l ass>

<i ni t - par am>

<par am- name>appl i cat i onCl assName</ par am- name>

<par am- val ue>ava. wi cket . Exampl eAppl i cat i on</ par am- val ue>

</ i ni t - par am>

</ f i l t er >

<f i l t er - mappi ng>

<f i l t er - name>Wi cket Fi l t er </ f i l t er - name>

<ur l - pat t er n>/ wi cket / * </ ur l - pat t er n>

</ f i l t er - mappi ng>

</ web- app>

Webbasierte Anwendungen / Wicket, Ajax und GWTGero Mühl 11

Wicket-Interceptor für HTTP-Requests

URLs für die Wicketzuständig ist

Einstiegspunkt der Webanwendung

Ereignisbehandlung

> Ausgelöst durch Benutzeraktion HTTP-Request

> Betroffene Komponenten werden mittels Ereignismethoden informiert onCl i ck, onSubmi t , …

> Ereignisbehandlung durch Überschreiben der jeweiligen Methode

Webbasierte Anwendungen / Wicket, Ajax und GWTGero Mühl 12

<ht ml ><body>

<f or m wi cket : i d=" f or m" >. . .<i nput t ype=" submi t " / >

</ f or m></ body></ ht ml >

FormPage.html

publ i c c l ass For mPageext ends WebPage {

publ i c For mPage( ) {For m f or m = new For m( " f or m" ) {

pr ot ect ed voi d onSubmi t ( ) {/ / handl e submi t event. . .

} } ;add( f or m ) ;

} }

FormPage.java

Datenbindung

> 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 I Model> Pr oper t yModel , CompoundPr oper t yModel ,

Resour ceModel

Webbasierte Anwendungen / Wicket, Ajax und GWTGero Mühl 13

Person

+ vorname

+ nachname

Klasse Person

Vorname:

Nachname:

Wicket Formular

Formular Registrierung

Datenbindung

Klasse Pr oper t yModel> Bindet Komponente an ein Attribut eines Geschäftsobjektes> Beispiel

For m f or m = new For m( " f or m" ) ;

f or m. add( new Text Fi el d( " vor name" , new Pr oper t yModel ( per son, " vor name" ) ) ) ;

f or m. add( new Text Fi el d( " nachname" ,new Pr oper t yModel ( per son, " nachname" ) ) ) ;

Klasse CompoundPr oper t yModel> Bindet Kindkomponenten an gleichnamige Attribute eines Objektes> Beispiel

For m f or m = new For m( " f or m" , new CompoundPr oper t yModel ( per son) ) ;

f or m. add( new Text Fi el d( " vor name" ) ) ;

f or m. add( new Text Fi el d( " nachname" ) ) ;

Webbasierte Anwendungen / Wicket, Ajax und GWTGero Mühl 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 onSubmi t bzw. onEr r or Ereignisse

> Bibliothek vorhandener Validatoren> Zahlen Minimum, Maximum, Bereich, …> String Länge, regulärer Ausdruck, …> Datum Minimum, Maximum, Bereich, …> Web Email-Adresse, URL, Kreditkarte, …> Custom Erweitern/Implementieren Abst r act Val i dat or

Webbasierte Anwendungen / Wicket, Ajax und GWTGero Mühl 15

Beispiel Validation

For m f or m = new For m( " f or m" , new CompoundPr oper t yModel ( user ) ) ;. . .Text Fi el d<St r i ng> user Name = new Text Fi el d<St r i ng>( “ user Name" ) ;f or m. add( user Name) ;

user Name. set Requi r ed( t r ue) ;

St r i ngVal i dat or mi n = St r i ngVal i dat or . mi ni mumLengt h( 4) ;St r i ngVal i dat or max = St r i ngVal i dat or . maxi mumLengt h( 10) ;user Name. add( mi n, max) ;

. . .

Component FeedbackPanel f eedback = new Component FeedbackPanel ( " f eedback" , user Name) ;

f or m. add( f eedback) ;

Webbasierte Anwendungen / Wicket, Ajax und GWTGero Mühl 16

Feld ist erforderlich

Benutzernamen sind zwischen 4 und 10 Zeichen lang

Komponente zum Anzeigen von Fehlermeldungen

Markup Inheritance

Webbasierte Anwendungen / Wicket, Ajax und GWTGero Mühl 17

<ht ml ><head></ head><body>

BasePage bef or e<br ><wi cket : chi l d / >BasePage af t er <br >

</ body></ ht ml >

BasePage.html

<ht ml ><head></ head><body>

Chi l dPage bef or e<br ><wi cket : ext end>

Thi s i s t he chi l d mar kup<br ></ wi cket : ext end>Chi l dPage af t er <br >

</ body></ ht ml >

ChildPage.html

<ht ml ><head></ head><body>

BasePage bef or e<br >Thi s i s t he chi l d mar kup<br >BasePage af t er <br >

</ body></ ht ml >

Output

publ i c c l ass Chi l dPageext ends BasePage { … }

ChildPage.java

Unit-Tests

> Klassen Wi cket Test er und For mTest er> 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> Typ der Webseite und enthaltener Komponenten> Sichtbarkeit, Labeltexte, Listenelemente> Werte assoziierter Modell-Objekte> Validationsergebnisse mittels Fehler- und Info-Nachrichten

Webbasierte Anwendungen / Wicket, Ajax und GWTGero Mühl 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 WebOnSwingWebWork wingS Xoplon

Webbasierte Anwendungen / Wicket, Ajax und GWTGero Mühl 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.0-

Anwendungen entwickeln. Hanser.

Webbasierte Anwendungen / Wicket, Ajax und GWTGero Mühl 20

Fragen?

Webbasierte Anwendungen / Wicket, Ajax und GWTGero Mühl 21

Google Web Toolkit (GWT)

Google Web Toolkit (GWT)

> Werkzeugsammlung zur Entwicklung von Cross-Browser AJAX-Applikationen in Java> http://code.google.com/webtoolkit

> Implementieren und 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

Webbasierte Anwendungen / Wicket, Ajax und GWTGero Mühl 23

Write Debug Optimize Run

Aktuelle Version: 2.1

GWT Bestandteile

Webbasierte Anwendungen / Wicket, Ajax und GWTGero Mühl 24

JRE Emulations-bibliothek

(java.lang und java.util)

GWT Web UI Klassenbibliothek

GWT Java JavaScript

Compiler

GWT Developer Plugin

Klassen-bibliotheken

Entwicklungs-werkzeuge

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

Webbasierte Anwendungen / Wicket, Ajax und GWTGero Mühl 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

Webbasierte Anwendungen / Wicket, Ajax und GWTGero Mühl 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

Webbasierte Anwendungen / Wicket, Ajax und GWTGero Mühl 27

Widget-Beispiele

Webbasierte Anwendungen / Wicket, Ajax und GWTGero Mühl 28

Boxes

Menüs, Bäume, Buttons & Popups

Panels

GWT Programmbeispiel

package ava. gwt . c l i ent ;i mpor t com. googl e. gwt . cor e. c l i ent . * ;i mpor t com. googl e. gwt . event . dom. cl i ent . * ;i mpor t com. googl e. gwt . user . c l i ent . * ;i mpor t com. googl e. gwt . user . c l i ent . ui . * ;publ i c c l ass Hel l oWor l d i mpl ement s Ent r yPoi nt , Cl i ckHandl er {

Text Box t ext ;publ i c voi d onModul eLoad( ) {

t ext = new Text Box( ) ;But t on but t on = new But t on( " Show t ext " , t hi s) ;Ver t i cal Panel panel = new Ver t i cal Panel ( ) ;panel . add( t ext ) ; panel . add( but t on) ;Root Panel . get ( ) . add( panel ) ;

}publ i c voi d onCl i ck( Cl i ckEvent event ) {

Wi ndow. al er t ( " You ent er ed: " + t ext . get Text ( ) ) ;} }

Webbasierte Anwendungen / Wicket, Ajax und GWTGero Mühl 29

Einstiegspunkt der Anwendung

Handler für ge-klickten Button

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

Webbasierte Anwendungen / Wicket, Ajax und GWTGero Mühl 30

GWT RPC Übersicht

Webbasierte Anwendungen / Wicket, Ajax und GWTGero Mühl 31

ServiceDefTarget(interface)

RemoteService(interface)

RemoteService-Servlet (class)

YourServiceProxy(class)

YourServiceAsync(interface)

YourService(interface)

YourServiceImpl(class)

related implements

extendsextends

Java-Code ausgeführt als Bytecode auf dem Server

Übersetzter Java-Code ausgeführt als JavaScript auf dem Client

Framework Klassenbzw. Interfaces

Automatisch generierte Klassen Selbstgeschriebene Klassenbzw. Interfaces

ServerseiteClientseite

1. Schnittstellen implementieren

> Synchrone Schnittstelle (serverseitig)

publ i c i nt er f ace EchoSer vi ce ext ends Remot eSer vi ce {

publ i c St r i ng echo( St r i ng s) ;}

> Asynchrone Schnittstelle (clientseitig)

/ / Has t o be named <Synchr oneSchni t t st el l e>Async.

/ / Has t o pass AsyncCal l back obj ect as l ast par amet er ./ / Has t o r et ur n voi d./ /publ i c i nt er f ace EchoSer vi ceAsync {

publ i c voi d echo( St r i ng s, AsyncCal l back<St r i ng> cal l back) ;}

Webbasierte Anwendungen / Wicket, Ajax und GWTGero Mühl 32

Typ des Rückgabewertes

Wird aufgerufen, wenn Ergebnis

eintrifft

2. Dienst implementieren

> Dienstimplementierung> Implementierung erfolgt im Paket server> Klasse von RemoteServiceServlet ableiten> Eigene synchrone Dienstschnittstelle implementieren

package ava. gwt . ser ver ;…publ i c c l ass EchoSer vi ceI mpl ext ends Remot eSer vi ceSer vl et

i mpl ement s EchoSer vi ce {publ i c St r i ng echo( St r i ng s) {

r et ur n " Echo: " + s;} }

Webbasierte Anwendungen / Wicket, Ajax und GWTGero Mühl 33

3. Konfiguration

> Dienste sind Servlets> Konfiguration erfolgt in web.xml-Datei> Angabe der Servlet-Klasse und der Aufruf-URL erforderlich

<?xml ver si on=" 1. 0" encodi ng=" UTF- 8" ?><web- app>

. . .<ser vl et >

<ser vl et - name>EchoSer vi ce</ ser vl et - name><ser vl et - c l ass>ava. gwt . ser ver . EchoSer vi ceI mpl </ ser vl et - c l ass>

</ ser vl et ><ser vl et - mappi ng>

<ser vl et - name>EchoSer vi ce</ ser vl et - name><ur l - pat t er n>/ echo</ ur l - pat t er n>

</ ser vl et - mappi ng></ web- app>

Webbasierte Anwendungen / Wicket, Ajax und GWTGero Mühl 34

4. Dienstaufruf

Webbasierte Anwendungen / Wicket, Ajax und GWTGero Mühl 35

> Erzeugung eines Proxy-Objektes des DienstesEchoSer vi ceAsync echoSer vi ce =

( EchoSer vi ceAsync) GWT. cr eat e( EchoSer vi ce. c l ass) ;

> Angabe der Aufruf-URL des Dienst-ServletsSer vi ceDef Tar get endpoi nt = ( Ser vi ceDef Tar get ) echoSer vi ce;St r i ng modul eRel at i veURL = GWT. get Modul eBaseURL( ) +" echo" ;endpoi nt . set Ser vi ceEnt r yPoi nt ( modul eRel at i veURL) ;

> Erzeugung eines Callback-Objektes für das ErgebnisAsyncCal l back<St r i ng> cal l back = new AsyncCal l back<St r i ng>( ) {

@Over r i de publ i c voi d onSuccess( St r i ng r esul t ) { … }@Over r i de publ i c voi d onFai l ur e( Thr owabl e caught ) { … }

} ;

> Aufruf ausführenechoSer vi ce. echo( " Hel l o Wor l d" , cal l back) ;

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

webAppCr eat or [ - out f ol der ] <Modul eName>

> 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

Webbasierte Anwendungen / Wicket, Ajax und GWTGero Mühl 36

Literatur

1. Google Web Toolkit> http://code.google.com/intl/de-DE/webtoolkit

Webbasierte Anwendungen / Wicket, Ajax und GWTGero Mühl 37

Fragen?

Webbasierte Anwendungen / Wicket, Ajax und GWTGero Mühl 38