|
Created by daniel-eberwein
almost 10 years ago
|
|
Question | Answer |
Erfinder des WWW | Tim Berners-Lee |
WWW | WWW = Hypertext + Internet |
Basistechnologien des Internets | HTML URL HTTP CSS JavaScript |
Aufbau einer URL | protokoll://host:port/datei?parameter#anker z.B.: http://de.wikipedia.org/wiki/URL#Aufbau http://localhost/quassel/do.jsp?action=search&asc=1  |
HTTP | Zustandsloses Protokoll zur Übertragung von Dokumenten |
HTTP - zustandlos | Keine Erkennung von wiederkehrenden Clients möglich strikte Anfrage/Antwort-Zyklen |
HTTP - Anfrage an den Server | Beginn der Kommunikation zwischen Client und Server Fordert den Server auf eine definierte Aktion durchzuführen Aufforderung in Form von Verben |
HTTP - Antwort des Servers | Beendet die Kommunikation zwischen Client und Server Beinhaltet immer einen Status-Code |
HTTP - Verben | GET/dateiname: Abruf einer Datei vom Server - Antwort Dateiinhalt ohne Response Header GET/dateiname HTTP/1.1: Abruf einer Datei - vollständige Antwort HEAD: fast identisch zu GET, Server antwortet mit Kopfdaten ohne Dateiinhalt POST: Senden von Dateien an den Server DELETE: Löschen einer Datei OPTIONS: Abruf der erlaubten Optionen TRACE: Auffordern, die empfangene Anforderung zurückzusenden |
HTTP - Statuscodes | 1xx: Information 2xx: Erfolgreicher Abschluss 3xx: Umleitung 4xx: Client Fehler 5xx: Server Fehler |
HTTP - Aufbau der Anfrage |
Image:
HTTP-Anfrage (image/jpg)
|
HTTP - Aufbau der Antwort |
Image:
HTTP-Antwort (image/jpg)
|
HTML - Boxenmodell | Inline: Ausrichtung der Boxen wie Buchstaben in einer Zeile Block: Erzwingt einen Zeilenumbruch vor und nach der Box Inline-Block: Wie Block aber Breite wächst mit Inhalt Table-Cell: Formatierung wie die Zelle einer Tabelle |
HTML - Ablauf | 1) Anwender gibt im Browser eine Adresse ein 2) Browser besorgt das angefragte Dokument und alle eingebundenen Ressourcen 3) Browser parst das empfangene Dokument und erstellt einen DOM-Baum 4) Basierend auf dem DOM wird die Anzeige berechnet |
CSS - Ablauf | 1) HTML definiert den Inhalt und die Struktur einer Seite 2) Auswahl von Teilen der Dokumentenstruktur durch spezielle CSS Selektoren 3) Darstellung der ausgewählten Elemente notieren (Vererbung inklusive) 4) Anzeige der angepassten Seite im Browser |
Einbinden einer CSS in HTML | 1) Noch vor dem html-Tag (nur für XHTML erlaubt) 2) im Head: link-Tag <link type="text/css" href="beispiel.css"/> 3) In den Kopfbereich einbinden und CSS hier schreiben 4) Direkte Verwendung im Body |
JavaScript | objekt-orientierte Skriptsprache nutzt Brwoser als Laufzeitumgebung ermöglicht dynamisch erzeugte Inhalte anzuzeigen Zugriff auf das DOM zur Manipulation |
JavaScript - DuckTyping | Keine Typangabe bei der Definition von Variablen Typ ergibt sich aus dem Inhalt und kann sich jederzeit ändern Prüfungen bei Variablenzugriffen erst zur Laufzeit |
JavaScript - Prototypbasierte Objektorientierung | - keine Klassen, die die Struktur von Objekten beschreiben - Struktur eines Objektes kann sich jederzeit ändern, z.B. durch Hinzufügen neuer Methoden - Objekte werden durch Kopien von einem Prototypobjekt erzeugt --> var wert = new Irgendwas(); //Kopie von Irgendwas.prototyp |
JavaScript in HTML einbinden | 1) Verweis auf externe Datei im head-Bereich 2) Code als Teil des Scriptelements im head-Bereich: <script type="text/javascript" src="script.js"></script> 3) Scriptelement im Body 4) Hinweis für Browser ohne JavaScript (<noscript>) |
JavaScript und DOM | 1) Browser lädt eine Webseite mit eingebundenem JavaScript 2) DOM wird erstellt und die Seite angezeigt 3) JavaScript-Code nimmt eine Änderung am DOM-Baum vor 4) Änderungen werden sofort umgesetzt und die Seite entsprechend vom Browser angezeigt |
AJAX | Asynchronous JavaScript and XML AJAX nutzt JavaScript und DOM, um vom Server nur den zu aktualisierenden Teil einer bereits angezeigten Seite anzufordern |
Anwendungen ohne AJAX | 1) Anwender fordert die Startseite einer Webanwendung vom Server an 2) Der Webserver führt ein Skript (z.B. CGI) aus um die Seite zu generieren 3) Durch Anklicken eines Links fordert der Anwender eine weitere Aktion vom Server an 4) Serverseitig wie eine neue Seite generiert und an den Browser geschickt |
Anwendungen mit AJAX | 1) Der Anwender fordert die Startseite einer Webanwendung vom Server an 2) Der Webserver führt ein Skript (z.B. CGI) aus, um die Seite zu generieren 3) Durch Anklicken eines Links fordert der Anwender eine weitere Aktion vom Server an 4) Der JavaScript-Code der Seite reagiert auf den Link und schickt eine Anfrage an den Server. Das Ergebnis wird mit Hilfe des DOM-Baums in die Seite eingebaut |
AJAX - Beispiel |
Image:
AJAX (image/jpg)
|
JavaScript - Vor-und Nachteile | + kompakter Sprachumfang mit javaähnlicher Syntax + offizieller ECMA-Standard, von allen Webbrowsern unterstütz - sehr begrenzter Sprachumfang - Kompatabilitätsproblem zwischen verschiedenen Browsern |
Serverseitiger Code - Ablauf | 1) Webserver empfängt eine HTTP-Anfrage 2) Server führt ein Script aus, um eine Antwort zu generieren 3) Skript hat Zugriff auf alle Daten der HTTP-Anfrage 4) Skript erzeugt eine HTTP-Antwort und übergibt sie an den Server 5) Server fügt der generierten Antwort noch Header Fields hinzu und schickt die Antwort an den Client |
Aktive Serverseiten - Ablauf | 1) Webserver empfängt eine HTTP-Anfrage 2) Anfrage bezieht sich auf HTML, daher sucht der Server im Dateisystem 3) Dokument enthält sowohl HTML als auch Programmcode, muss also einem Interpreter übergeben werden 4) Interpreter führt den Programmcode aus und gibt das Ergebnis an den Server 5) Webserver erzeugt aus dem Ergebnis eine vollständige HTTP-Antwort und sendet diese an den Client |
Webanwendungen | - Entwicklung als in sich geschlossene Komponenten - laufen in einer speziellen Laufzeitumgebung (Java EE) - laufen in einem sog. Webcontainer |
Applikationsserver | Serverseitigt Laufzeitumgebung für Client/Server-Anwendungen |
Webcontainer | - Teil des Applikationsservers, der für Webanwendungen zuständig ist - stellt einen in Java programmierten Webserver dar - Laufzeitumgebung für Servlets und JSP - technische Grundlage für weiterreichende Webframeworks |
Javabasierte Webanwendungen - Ablauf | 1) Webcontainer empfängt eine HTTP-Anfrage 2) Zu jeder anfragbaren URL existiert eine Klasse (Servlet), welche die Anfrage bearbeitet 3) Container muss zur Bearbeitung eine spezielle Methode des Servletobjekts aufrufen 4) Innerhalb der Methode müssen die zurückzuschickenden Daten erzeugt werden 5) Server wandelt die generierte Antwort in eine HTTP-Antwort um und schickt diese an den Client |
Servlets | - Softwarekomponente einer Webanwendung - selbstprogrammierte Klassen, die auf HTTP-Anfragen reagieren - werden dazu vom Webcontainer aufgerufen - HTTP-Anfragen werden an Servlets delegiert - Kommunikation mit dem Client über Webcontainer |
Servlets - Vorteile | - relativ einfach zu programmieren - nicht an HTML als Ausgabeformat gebunden (flexibel) - einmal geladene Servelts bleiben im Speicher - Ausführung erfolgt in Threads statt in Prozessen - hohe Geschwindigkeit - dank Java plattformunabhängig - einfacher Zugang zu Java APIs |
Servlets - Nachteile | - keine direkte HTML-Programmierung möglich - Java-Kenntnisse erforderlich, ungeeignet für Webdesign - viel mehr Tippaufwand als bei anderen Web-Frameworks |
Komponenten des Webcontainers | |
Deployment | Hochladen einer Webanwendung in den Container Anwendung wird als Webarchiv gepackt und in ein vorgegebenes Verzeichnis kopiert |
Servletobjekt | - reagiert auf HTTP-Anfragen - generieren eine Antwort |
Requestobjekt | - Kapselt die empfangenen HTTP-Anfragen - wird bei einem Servlet als Methodenparameter übergeben |
Responseobjekt | - Kapselt die zu sendendne HTTP-Antworten - wird den Servlets übergeben - Methode zum Erzeugen eines PrintWriter für die Antwort |
Servlet Lebenszyklus | |
class HttpServlet | - dient als Basisklasse für eigene HTTP-Servlets - definiert eine Handlermethode je HTTP-Verb, von denen mindestens eine überschrieben werden muss - spezielle Objekte für Anfragen/Antworten: HttpServletRequest HttpServletResponse |
Methoden von HttpServlet | - public void doGet(...): Reaktion auf GET-Anfrage - public void doPost(...): Reaktion auf POST-Anfrage ... |
Beispiel eines Servlets |
Image:
Servlet_Beispiel (image/jpg)
|
Deployment - Webarchiv | classes: Kompilierte Servlets lib: Importierte Bibliotheken, wie z.B. Frameworks sources: nicht-kompilierte Servlets |
Die 3 Kontexte | - jedes Servlet hat Zugriff auf die drei Kontextobjekte, um darin Objekte zwischen mehreren Aufrufen zwischenzuspeichern - Verwaltung eines serverseitigen Zustands je Besucher - Wiedererkennung eines Besuchers notwendig, um Logins /Warenkörbe etc. abzubilden |
Servlet Context | - übergreifender Kontext für gesamte Anwendung - genau ein Servlet Context je Webanwendung |
Session Context | - repräsentiert eine Sitzung mit dem Benutzer - überwindet die Zustandslosigkeit von HTML - fasst mehrere Seitenaufrufe logisch zusammen |
Request Context | - stellt genau eine bearbeitete HTTP-Anfrage dar - Weitergabe von Parametern vor einer Weiterleitung |
Einsatz des Request Context | 1) Anwender setzt eine neue Anfrage ab, die durch ein Request Objekt dargestellt wird 2) Request Context wird dem aufgerufenen Servlet übergeben 3) Das Servlet bindet ein Objekt an den Context und wird für Bearbeitung an ein anderes Servlet weitergeleitet 4) Dem neuen Servlet wird derselbe Request Context übergeben, so dass es das Objekt aus dem Kontext auslesen kann |
Weiterleitung (mit Request Dispatcher) | |
Java Server Pages (JSP) | - Java-Variante von aktiven Serverseiten - bestehen aus statischen Textdateien (z.B. HTML) - integrieren Java-Code - JSP werden nicht interpretiert - JSP werden stattdessen zu Servlets kompiliert - schnellere Ausführung möglich - erweiterte Funktionen wie Tag Libraries |
JSP vs. Servlet | JSP: für die Darstellung der Oberfläche/ HTML Servlet: viel Logik, wenig HTML, Controllr für MVC, wenn kein HTML sondern Binärdaten zurückgegeben werden müssen |
Vorteile JSP vs. Servlet | - Programmierung ohne Java Code möglich - es kann direkt in HTML programmiert werden - Tag Libraries helfen Java Code zu reduzieren |
Java Code in JSPs verwenden |
Image:
Java_Code_in_JSP (image/jpg)
|
Templateseiten | - durch Templateseite index.jsp wird das allgemeine Layout und Stylesheet definiert - die variablen Inhalte werden durch die eingebundene JSP-Seiten erzeugt |
Architekturtyp: Model 1 | - schlechte Architektur - lauter JSP-Dateien in denen sich HTML und Java mischen - eigentlich sollten JSPs überhaupt keinen Javacode beinhalten |
Architekturtyp: Model 2 | - bessere Architektur - die eigentliche Anwendungslogik wurde in Java Beans ausgelagert - JSP beinhalten nur noch HTML - innerhalb der JSPs werden bei Bedarf Methoden aus den Beans aufgerufen |
Java Beans | - sind normale Objekte - besitzen keinen Konstrukor, bzw einen parameterlosen Konstruktor - besitzen für jedes Attribut Setter- und Getter-Methoden |
Architekturtyp: MVC | - Model-View-Controller-Architektur - ähnlich zu Model 2, aber JSP noch weiter reduziert Model: Anwendungslogik in den Beanklassen View: JSP dienen nur noch der Anzeige Controller: Web-spezifische Logik, Navigation steckt in den Servlets |
MVC-Architektur (Bild) |
Image:
MVC_Architektur (image/jpg)
|
Verwendung von Java Beans | |
Vermeidung von Java-Code in JSP | - JSP-Tags zur Verwendung von Beans - JSP Expression Language - JSP Tag Libraries |
Expression Language | |
JSP und MVC - Ablauf - Servlets (C) | 1) Alle HTTP Anfragen werden vom Front Servlet empfangen und verarbeitet. Es untersucht die aufgerufene URL und entscheidet, wohin die Anfrage weitergeleitet wird 2) Der Anwender hat einen Blogeintrag angeklickt, die Anfrage wird daher an das Servlet zum Anzeige eines EIntrags geleitet |
JSP und MVC - Ablauf - Beans (M) | 3) Das gerufene Servlet ruft eine Java Bean auf, um den aufgeforderten Blogeintrag aus der Datenbank auszulesen |
JSP und MVC - Ablauf - JSP (V) | 4) Eine JSP-Datei dient als HTML-Template. Die eingelesene Daten werden daher an die JSP übergeben, um das HTML zu erzeugen. Das Ergebnis wird an den Browser geschickt |
JSP und MVC - Ablauf | 5) Der Anwender hat einen Kommentar geschrieben. Die Formulareingaben werden daher per AJAX an den Server geschickt 6) Das Front Servlet leitet die Anfrage an das Servlet für Kommentare weiter 7) Das Servlet ruft eine Java Bean auf, um den Kommentar in die Datenbank zu speichern |
JSP und MVC - Ablauf | 8) Dem Anwender wir keine neue Seite angezeigt, daher wird auch keine JSP aufgerufen. Stattdessen schickt das Servlet den neuen Datensatz im JSON-Format an den Browser 9) Der JavaScript-Code auf der Webseite empfängt die Antwort und aktualisiert die Anzeige Anmerkung: Ohne AJAX würde das Servlet einen Redirect an den Browser schicken, ihn also auffordern eine neue URL aufzurufen |
Vorteile MVC | - leichtere Wartbarkeit - leichtere Wiederverwendbarkeit - Verantwortlichkeiten getrennt |
Want to create your own Flashcards for free with GoConqr? Learn more.