Kapitel 9: HTTP und HTML

Transcription

Kapitel 9: HTTP und HTML
SoPra 2008 Kap. 9: HTTP und HTML (1/34)
HTTP und HTML
Entwickelt vom World Wide Web Consortium:
• HTTP: hypertext transfer protocol
Aktuell: HTTP/1.1 (1990-1999) als IETF-RFC 1945 (1996), 2068, 2069
(1997), 2616, 2617 (1999)
• HTML: hypertext markup language
Aktuell: HTML 4.01 (1994–1999), bzw. XHTML 1.1 (1999–2001)
Aufruf einer Webseite
URL: http://dante/page1.bu
1. Aufbau einer TCP Verbindung zu dante(.informatik.uni-augsburg.de), Port 80
2. Anfrage: GET /page1.bu HTTP/1.1
Tatsächlich:
GET /page1.bu HTTP/1.1
Host: dante
User-Agent: Mozilla/5.0 (X11; U; Linux i686 (x86_64); en-US; rv:1.
Accept: text/xml,application/xml,application/xhtml+xml,text/html;q
Accept-Language: en-us,en;q=0.5
Accept-Encoding: gzip,deflate
Accept-Charset: ISO-8859-1,utf-8;q=0.7,*;q=0.7
Keep-Alive: 300
Connection: keep-alive
Die Datei:
<html><head><title>Page 1</title></head>
<body>
<h1>Eine Überschrift</h1>
</body></html>
Die Server-Antwort:
HTTP/1.1 200 OK
Date: Wed, 03 May 2006 14:38:28 GMT
Server: Apache/2.2.0 (Unix) mod_ssl/2.2.0 OpenSSL/0.9.8a
Last-Modified: Wed, 03 May 2006 07:48:03 GMT
ETag: "6442c2-59-412dd81e232c0"
Accept-Ranges: bytes
Content-Length: 89
Keep-Alive: timeout=5, max=100
Connection: Keep-Alive
Content-Type: text/html
<body>
<h1>Eine Überschrift</h1>
</body></html>
Das Ergebnis:
HTML für Textlayout
Die Datei:
<html><head><title>Page 2</title></head><body>
<h1 style="background-color:yellow;color:red;
font-style:italic;">
Eine Überschrift</h1>
</body></html>
Das Ergebnis:
Benutzerinteraktion in HTML
HTML bietet mehr als nur Layout: Benutzerinteraktion durch Forms (= Formulare):
<body>
<h1>Bitte geben Sie etwas ein:</h1>
<form action="page3.ta" method="get">
<input name="form1" type="text" size="30" maxlength="30">
</form>
</body></html>
Benutzerinteraktion in HTML
Forms in HTML
<form action="page3.ta" method="get">
1. action=page3.ta: Beim Abschicken des Formulars (Return-Taste) fordere
URL page3.ta an.
2. method=get: Hänge Eingabe an URL an.
⇒ GET /page3.ta?form1=was+denn%3F HTTP/1.1
Forms in HTML
Andere method: post
<form action="page4.ta" method="post">
<input name="form1" type="text" size="30" maxlength="30">
</form>
HTTP:
POST /page4.ta HTTP/1.1
Host: dante
.
.
.
Referer: http://dante/page4.bu
Content-Type: application/x-www-form-urlencoded
Content-Length: 17
form1=noch+was%3F
Verarbeitung von Benutzereingaben
• GET + erweiterte URL, POST mit Inhalt: Teil von HTTP
• URL kann statt statischer Webseite ein Programm enthalten. page3.ta:
#!/bin/sh
echo
echo
echo
echo
echo
"Content-type: text/html"
""
"<html><head><title>Page 3</title></head>"
"<body><h1>Ihre Eingabe war ${QUERY_STRING}</h1>"
"</body></html>"
Skripte
• Webserver kann Programme von statischen Seiten unterscheiden (Endung,
Anfang der Datei, . . . )
• Webserver versorgt“ Programm mit Argumenten:
⋆
”
GET /page3.ta?form1=was+denn%3F HTTP/1.1
⇒ Umgebungsvariable QUERY STRING = form1=was+denn%3F
⋆ POST /page4.ta HTTP/1.1
⇒ Inhalt wird dem standard input übergeben.
(Im Skript oben: read in und ${in} )
Skripte
HTTP/1.1 200 OK
Date: Thu, 04 May 2006 16:25:14 GMT
Server: Apache/2.2.0 (Unix) mod_ssl/2.2.0 OpenSSL/0.9.8a
Keep-Alive: timeout=5, max=100
Connection: Keep-Alive
Transfer-Encoding: chunked
Content-Type: text/html
<body><h1>Ihre Eingabe war form1=noch+was%3F</h1>
</body></html>
Skripte
⇒ Auf Browserseite läßt sich nicht zwischen Programm und statischer
Seite unterscheiden.
Weitere Forms
• einzeiliger Text, mehrzeiliger Text, Passwörter
• Auswahlliste, mehrfache Auswahl
• Radiobuttons
• Checkboxen
• Datei-Upload
• Buttons
Buttons
<form name="tbontb">
<input name="yes" type="button" value="To Be">
or
<input name="no" type="button" value="Not To Be">
</form>
Mehr Interaktion
Klick eines Buttons bewirkt nichts
⇒ Neue Konzepte zur Interaktion:
• Events (HTML 4.0)
• JavaScript
⋆ nicht Teil von HTML
⋆ JavaScript 1.1 (Netscape, 1996), 1.6 (z.B. Firefox),
• Document Object Model (W3C Recommendation)
Events und JavaScript in HTML
<input name="yes" type="button"
value="To Be" onclick="S(’Ok!’);">
Event: onclick (beim Drücken des Button)
Aktion: JavaScript Methode S(’Ok!’) ausführen:
<script type="text/javascript">
<!-function S(s) {
document.getElementById(’Here’).firstChild.nodeValue=s;
}
//-->
</script>
JavaScript in HTML
• script Deklaration (hier: JavaScript, könnte alles sein)
•  Trick, um Parser-Fehler zu vermeiden
• function S() { ...} Java-ähnlicher Programmcode
⋆ objektorientiert
⋆ keine selbstdefinierten Klassen
⋆ interpretiert
⋆ untypisiert
⋆ vollständig andere API
• Wie kann JavaScript die HTML-Seite verändern?
Document Object Model – DOM
• Eine HTML-Seite ist ein XML Dokument <tag> . . . </tag>
• XML Dokument hat Baumstruktur
<body> bubu <h1 id="Here"> </h1></body>
BODY
uu
u
uu
u
uu
u
u
” bubu ”
GG
GG
GG
GG
H1 Here
””
• document.getElementById(’Here’).firstChild.nodeValue=s;
setzt Text unterhalb von H1 auf s
Zusammengefasst
<html><head><title>Page 6</title>
<!-function S(s) {
document.getElementById(’Here’).firstChild.nodeValue=s;
}
//--></script></head><body>
<form name="tbontb">
<input name="yes" type="button" value="To Be"
onclick="S(’Ok!’);"> or
<input name="no" type="button" value="Not To Be"
onclick="S(’Really?’);">
</form>
<h1 id="Here"> </h1>
</body></html>
Ergebnis
DHTML
DHTML = dynamic HTML
Events können an unerwarteten Orten verarbeitet werden:
Langweilig ...
<h1 id="H" onClick="document.getElementById(’H’)
.firstChild.nodeValue=’Wirklich!’">
Ich bin dynamisch</h1>
Noch langweiliger ...
Zurück zum Server
<!-function S(a) {
document.Hid.xtra.value = a;
document.Hid.submit();
}
<form name="Hid" action="page8.ta" method="post">
<input type="hidden" name="xtra" value="">
</form>
Langweilig ...
<h1 onClick="S(’Nein’);">Ich bin dynamisch</h1>
</body></html>
Was passiert?
Server antwortet mit neuer, fast identischer Webseite:
Antwort des Server
<script type="text/javascript"><!-function S(a) {
document.Hid.xtra.value = a;
document.Hid.submit();
}
<form name="Hid" action="page8.ta" method="post">
<input type="hidden" name="xtra" value="">
</form>
Langweilig ...
<h1 onClick="S(’Nein’);">Wirklich?</h1>
</body></html>
. . . das merkt man (eventuell) . . .
Noch mehr Interaktion
AJAX (Asynchronous JavaScript and XML)
Idee: Anfragen an den Server stellen, ohne die Seite neu zu laden
⇒ (dynamische) Änderung einer existierenden Seite durch den Server
Noch mehr Interaktion
AJAX (Asynchronous JavaScript and XML)
Idee: Anfragen an den Server stellen, ohne die Seite neu zu laden
⇒ (dynamische) Änderung einer existierenden Seite durch den Server
1. src-Attribut eines Bildes setzen: Browser lädt neues Bild und zeigt es an
2. src-Attribut eines script-Tags setzen: Browser lädt neue
Javascript-Methoden oder Daten, die man dann aufrufen kann
3. per XMLHttpRequest HTML nachladen und in die Seite einbauen
4. beliebiges XML-Dokument laden und verarbeiten
5. JavaScript-Objekte laden und verarbeiten (application/json: JavaScript
Object Notation)
AJAX
zentrales Konzept: In JavaScript HTTP sprechen:
• Request erzeugen
http req = new XMLHttpRequest();
• Funktion setzen, die bei Antwort aufgerufen wird
http req.onreadystatechange = fun;
• An den Server schicken
http req.open(’GET’, "http://dante/page8.ta", true);
http req.send(null);
• Antwort verarbeiten
http req.responseText
AJAX: Beispiel
<script type="text/javascript" language="javascript">
<!-var c = 0;
function S() {
var url = "http://dante/page9.ta";
var http_req;
http_req = new XMLHttpRequest();
http_req.onreadystatechange=function() { T(http_req); };
http_req.open(’POST’, url, true);
http_req.send(c++);
}
AJAX: Beispiel (2)
function T(http_request) {
document.getElementById(’Here’).firstChild.nodeValue =
http_request.responseText;
}
//-->
</script>
<body>
Langweilig ...
<h1 id="Here" onclick="S();">Ich bin dynamisch</h1>
</body></html>
AJAX: Die Serverseite
#!/bin/sh
read in
if [ $in -eq 0 ]; then
res="Wirklich?"
else
res="Wirklich? (${in})"
fi
echo "Content-type: text/html"
echo ""
echo $res
AJAX: Das Ergebnis
AJAX: Die Serverseite
1. Feste Datei im Dateisystem
Nachteil: statisch
2. Skript, das Antwort generiert (php, perl, . . . )
Nachteil: Antwort (XML, json, . . . ) muss ‘von Hand’ generiert werden
3. ASPX-Seite ohne statische Anteile (Response.write(. . . ))
Nachteil: Böser Hack
4. Webservice (Bei ASP.NET: .asmx)
Vorteil: Kaum Programmieraufwand (.net Framework hat sehr gute
Unterstützung für SOAP/json)
Nachteil: Datenformate müssen eingehalten werden
HTTP und HTML:
Zusammenfassung
• Eine Webseite/URL muss nicht statisch sein, kann dynamisch bei Anfrage
erzeugt werden.
• HTML bietet einfache Möglichkeiten zur Benutzerinteraktion.
• Mit JavaScript lassen sich Webseiten dynamisch“ gestalten und mehr
Interaktion ist möglich.
”
• GUI-Design muss auf Browser Rücksicht nehmen (sehr eingeschränkte
Pop-ups, große Fenster, nur linke Maustaste, Browser hat eigene Toolbar,
Statuszeile etc.)

Kapitel 9: HTTP und HTML

Transcription

Similar documents

Trigger

4. Vorlesung JavaScript Anwendungsbeispiele ECMAScript

AJAX – Tutorial

Ladibug 3.0-UserManual-German-2015-0204

PGA of Austria - Richtlinien Abschlussarbeit 2016