Webtechnologie - The web programming environment, client side
advertisement
The web programming environment Lennart Herlaar Webtechnologie 1 Inhoud • Markup, hypertext en HTML • Browsers en servers • HyperText Transfer Protocol • URIs, headers, persistence • Scripting en integratie URI voorbeelden • Absolute en relatieve locaties • Schemes, namespaces http://www.cs.uu.nl/docs/vakken/b2wt/index.html http://lennart:[email protected]:8080/cijfers.php? student=0036123&cijfer=9#resultaat Practicum%20opgave.html ../../../colleges.txt #sectie01 Case sensitive? ftp://ftp.cs.uu.nl/pub mailto:[email protected] urn:isbn:0470916591 urn:isan:0000-0000-9E59-0000-O-0000-0000-2 The gory details • (Sterk) vereenvoudigde grammatica voor URLs url scheme address full-domain domainname domain path-to-doc ::= ::= ::= ::= ::= ::= ::= scheme address http:// | ftp:// | mailto: | file:// | ... full-domain/path-to-doc [#anchor] host.domainname[:portnr] domain . domainname | domain string-without-whitespace-and-;:& /-separated-strings-withoutwhitespace-and-;:& • RFC3986 – URIs : Generic Syntax URL encoding / decoding • Bijzondere karakters in een URI • Spatie, control, :/@&=?%, diakritische tekens, enz. • Voor "normaal" gebruik in een URI is encoding / decoding nodig, ook wel percent-encoding • % teken met ASCII waarde als hexadecimaal getal • Spatie, ASCII code 32, 20 hexadecimaal, dus %20 • Overal waar de URI gebruikt wordt • Chinese URLs? • Internationalized Resource Identifier HTTP request en response GET /index.html HTTP/1.1 Host: www.example.com User-Agent: Mozilla/5.0 […] Accept: text/html, image/png HTTP/1.1 200 OK Date: Fri, 12 Feb 2016 08:01:34 GMT Server: Apache/2.2.21 (Unix) (Red-Hat/Linux) Last-Modified: Sun, 07 Feb 2016 23:11:55 GMT Content-Length: 438 Connection: close Content-Type: text/html; charset=utf-8 <html> […] HTTP headers • Vele tientallen (optionele) headers gedefinieerd • Welke headers hangt af van de HTTP versie • HTTP/1.0 versus HTTP/1.1 versus HTTP/2 • Veelal gericht op content negotiation en efficiënt gebruik van de bandbreedte • De onderhandeling is "server-driven" HTTP headers • Compression Accept-Encoding: gzip, identity Content-Encoding: gzip • Language Accept-Language: fr; q=1.0, en; q=0.5 Content-Language: en-US • MIME type • Character set Later meer hierover! Accept: text/html; q=1.0, image/jpeg; q=0.6, */*; q=0.1 Accept-Charset: utf-8 Content-Type: text/html; charset=utf-8 HTTP headers • Range request Range: bytes=500999 Content-Range: bytes 500-999/3573 • Caching If-Modified-Since: Wed, 27 Jan 2016 10:12:43 GMT If-None-Match: "69af74da0860cdc288ad309d058282f2" Last-Modified: Wed, 27 Jan 2016 10:12:43 GMT ETag: "69af74da0860cdc288ad309d058282f2" Cache-Control: no-cache Connection: close • Persistent connection Connection: keep-alive Poorten en sockets • Een poort is een "brievenbus" binnen het OS • Een proces kan zich koppelen aan een poort • Een socket is een eindpunt voor communicatie • Lokaal IP adres en poortnummer • Remote IP adres en poortnummer (bij TCP) • Transport protocol (TCP, UDP, …) • Een TCP verbinding wordt geïdentificeerd aan de hand van een 4-tuple • De transportlaag gebruikt deze informatie voor (de)multiplexing TCP verbindingen Officiële IANA poorten voor HTTP: 80 – HTTP 443 – HTTPS 8008 – HTTP (alt) Persistent connections Close Client Server Client Server Keep-Alive t 3-way TCP handshake incl. request 3-way TCP handshake incl. request > 2*RTT Response Response TCP disconnect 2 requests 2 responses 3-way TCP handshake incl. request 4 requests 4 responses Response Etc. TCP disconnect TCP disconnect Etc. Ready! Persistence versus state • Verwar persistent connections niet met state • Persistent connections betreffen state op TCP niveau • Op HTTP niveau is er geen state • Echt niet? Later meer hierover! • Nouja, stiekem toch wel ergens iets van… Set-Cookie: UserID=darkhelmet; Max-Age=3600; Version=1 • Headers zijn een krachtig "mod" mechanisme • Headers zijn in de regel bereikbaar vanuit je scripting taal HTTP/2 • Gebaseerd op de oudere Google SPDY standaard • Gestandaardiseerd in mei 2015 • Ondersteund door meeste browsers en sommige sites • • • • • • Multiplexing (> 1 asynchrone requests) Server push (> 1 response voor 1 request) Prioritering van requests Header compressie Binair protocol Voor HTTP en HTTPS; compatible met HTTP/1.1 Zelf aan de slag? • Eenvoudige webserver maken is niet moeilijk • Beperkt aantal methods en headers • Vaak ook libraries beschikbaar 1 proces/thread per request Hoofdproces/thread, luistert op poort 80 Start proces/ thread Request Request Response Response (wacht op volgende request) Start proces/ thread Voorbeeld webserver(tje) void loop() { EthernetClient client = server.available(); if (client) byte mac[] = {{0xDE,0xAD,0xBE,0xEF,0xFE,0xED}; boolean ip(192,168,1,177); currentLineIsBlank = true; IPAddress while (client.connected()) { EthernetServer server(80); if (client.available()) { char c = client.read(); void setup() if (c == '\n' && currentLineIsBlank) { { client.println("HTTP/1.1 200 OK"); Ethernet.begin(mac, ip); client.println("Content-Type: text/html"); server.begin(); client.println(); } //"Put payload goes the fun back intohere! learning computing" – Raspberry Pi Foundation […] } client.stop(); } } Request For Comments • Details over protocollen zijn te vinden in RFCs • RFC2616 – HTTP/1.1 • RFC3986 – URIs • Maar ook: TCP, IP, DHCP, DNS, … • Internet Engineering Task Force (IETF) • Peer review; veel strikter dan het klinkt • (X)HTML(5)? • RFC2322 – peg-DHCP The web programming environment Scripting en integratie Lennart Herlaar Webtechnologie 18 Scripting • Scripts = korte programmaatjes, code snippets • Scripting maakt websites dynamisch • Volledig dynamische website = webapplicatie • Zowel client als server side mogelijk • In de regel in ieder geval server side • In het "Modern Web" tijdperk echter niet meer vanzelfsprekend Client side scripting • Client side scripts worden uitgevoerd in de browser • Client side scripts zijn onderdeel van de opgevraagde pagina <body> <h1>My First JavaScript</h1> <script type="text/javascript"> document.write("<p>" + Date() + "</p>"); </script> </body> • "Actief" zolang de pagina getoond wordt Client side scripting • In essentie gericht op het oplossen van tekortkomingen in protocol en presentatie! • Page based requests • Conditionele GUI, validatie invoer, grafische effecten • Ontbreken van state • Fat clients, "desktop" applicaties in de browser • JavaScript (ECMAScript) • Maar… • Server side JavaScript Server side scripting • Server side scripts worden uitgevoerd op de webserver (of application server) • Er bestaan verschillende integratiemethoden • Veelal het "one resource at a time" paradigma • Een request leidt tot de aanroep van een script • Het script genereert HTML (vaak een form) en stopt • De invoer voor het script is een form • Het draaien van een webapplicatie is een lange reeks script aanroepen Scripting talen: gemene deler • Geïnterpreteerd, of just-in-time compilatie • Geen (verplichte) declaraties • Dynamisch getypeerd • Goede voorzieningen voor tekstmanipulatie • Reguliere expressies • Veel libraries / modules beschikbaar • Buitengewoon flexibel, high level • Buitengewoon gevaarlijk Scripting talen • Belangrijke eigenschap voor het web • "Executable source code" • Voor server side is een scripting taal geen vereiste • PHP, Python, Perl, Ruby • Maar ook Java, C#, C/C++, Pascal, … • Afhankelijk van de integratiemethode • En voor de client side (naast JavaScript)? • Java Applets, Flash, ActiveX en andere objects Architectuur diagram revisited HTTP request Form, parameters Webserver Applicatie Files Result set DB access SQL Return HTML File HTTP response HTML File access Web browser Execute Parameters, code RDBMS POST versus GET • POST: form data in HTTP message body • GET: form data in URI (HTTP resource veld) • Query string (URL encoded) <form name="input" action="welcome.php" method="get"> First name: <input type="text" name="first" /><br /> Last name: <input type="text" name="last" /><br /> <input type="submit" value="Send" /> </form> http://…/welcome.php?first=Willie&last=Wartaal 1. Common Gateway Interface • Standaard voor de aanroep van externe programma's via de webserver • Perl, Python, shell scripts, executables (C++, …) • Webserver start proces; geeft query string door • Via environment variabele (GET) • Via standaardinvoer (POST) • Proces genereert headers en HTML • Op standaarduitvoer 1. Common Gateway Interface • Herkenbaar aan speciale cgi-bin directory • Enkele environment variabelen • QUERY_STRING (bij GET) • CONTENT_LENGTH (bij POST) • CONTENT_TYPE • REMOTE_ADDR • CGI is relatief zwaar voor de webserver • FastCGI houdt het proces actief (state, anyone?) • CGI is een beetje old-skool 2. Inlining code in document • Code snippets die tussen de HTML code staan • Van boven naar onderen uitgevoerd • De code snippets worden vervangen door hun uitvoer • Geïmplementeerd in de vorm van webserver modules of CGI • Server Side Includes (SSI), PHP, ASP.NET, JSP Server Side Includes • Voorloper van latere HTML embedded code • Preprocessing directives tussen de HTML code • Herkenbaar aan extensie (.shtml) of exec bit <h1><!--#echo var="DATE_LOCAL" --></h1> <pre> <!--#exec cmd="ls" --> </pre> <p> Gewijzigd: <!--#flastmod file="index.html" --> </p> • Ook old-skool PHP: Hypertext Preprocessor <html> <body> <html> <body> <p> <p> Hello World<br/> <?php Lecture time! </p> echo "Hello World"; </body> </html> ?><br/> <?php $d=date("D"); if ($d=="Wed" || $d=="Fri") echo "Lecture time!"; ?> </p> </body> </html> 2. Inlining code in document • Oorspronkelijk voor kleine stukjes code • Dunne scheidslaag tussen code en structuur • Steeds in en uit context springen • De code wordt snel onleesbaar • Modernere insteek • Alle HTML gegenereerd vanuit de code • Templates voor vaste onderdelen • MVC frameworks waarbij de HTML pagina niet veel meer is dan een aanroep van een generate functie 3. Integratie in webserver • Uitbreiden van de functionaliteit van de server • Vaak in de vorm van specifieke classes die specifieke requests afhandelen • Java Servlets, JSP • javax.servlet en javax.servlet.http packages • • • • • JDBC voor database connectivity Filters en filterchains Java is een bekende serieuze programmeertaal Minder overhead in afhandeling request Sterke integratie kan gevaarlijk zijn State revisited • Waar kunnen we state onderbrengen? • Query string / hidden input fields • Client side cookies • Client side scripts Later meer hierover! • Server side (database, file system, script) • Als web developer maak je hierin keuzes • Een deel ervan blijft ping-pongen • Het blijft overhead en een security risico • Je blijft ermee bezig… Client side representation Lennart Herlaar Webtechnologie 35 Inhoud • Documentformaten • Het einde van het web • SGML, XML en HTML • XHTML en HTML5 Documentformaten • De mythe van het papierloze kantoor • > 260 miljoen prints per dag in Nederland • Merendeel gebruikt voor transport • Papier als grootste gemene deler • Paradigma shift noodzakelijk • Belang van standaarden • Open standaarden Andere markup talen? Soorten markup revisited • Procedural markup versus descriptive markup • Presentatie versus structuur & semantiek • Toegankelijkheid: gebruiker bepaalt • Onderhoudbaarheid: descriptive is duurzaam • Verwerkbaarheid: indexering, eenduidigheid • Onontkoombaarheid: kun je zonder? HTML puur? <html> <head> <title>Hello world</title> </head> <body> <h1>My First Heading</h1> <p>My <b>first</b> paragraph.</p> <p> Including a <a href="index.html">link</a> </p> </body> </html> Client side representation Het einde van het web Lennart Herlaar Webtechnologie 41 HTML puur! • '91: HTML Tags • '93: HTML Internet Draft, IETF • Gedefinieerd als toepassing van SGML • <IMG> tag • Intentie was duidelijk "It is required that HTML be a common language between all platforms. This implies no devicespecific markup, or anything which requires control over fonts or colors, for example. This is in keeping with the SGML ideal."
