1. Introduction to Web Programming Fall 2014/2015 Some slides are based upon Web Technologies course slides, HUJI, 2009 Extended System Programming Laboratory (ESPL) CS Department @ BGU

2. 2 An international network of networks (1960s) A system of interlinked hypertext documents that are accessed via the Internet ( 1990) Other applications ?

3. 3

4.  A communication protocol over the web  It is used to communicate between a client and a web server  Let us take a look on a typical scenario 4

5.  The browser/client parses the URL  The URL pattern is:  protocol://server:port/requestURI?arg1=val1&…&argN=valN  Protocol: in our case HTTP  Server : Server location (e.g. www.NBA.com)  Port: port that the web server listens to (default:80)  Request-URI: web server resource (e.g. index.html)  Arg: argument ( e.g. username)  Val: values for the argument (e.g.JohnnyCash) 5

6.  The browser decides which information to send  The browser sends a text called request to the server  Request pattern: [METHOD] [REQUEST-URI] HTTP/[VER] [fieldname1]: [field-value1] [fieldname2]: [field-value2] [request body, if any]  The server knows how to handle/parse a request 6

7.  Get Method  Data is visible in the URL  GET requests can be cached  GET requests remain in the browser history  GET requests should never be used when dealing with sensitive data  GET requests have length restrictions  GET requests should be used only to retrieve data  Post Method  Data is not displayed in the URL  POST requests are never cached  POST requests do not remain in the browser history  POST requests have no restrictions on data length  and more: HEAD, DELETE.. 7

8. GET /players/mJordan/info.html HTTP/1.1 Host: www.nba.com User-Agent: Mozilla/5.0 (Windows;) Gecko Firefox/3.0.4 Accept: text/html,application/xhtml+xml,application/xml; Accept-Language: en-us,en;q=0.5 X-cept-Encoding: gzip,deflate Accept-Charset: ISO-8859-1,utf-8;q=0.7,*;q=0.7 Keep-Alive: 300 Connection: keep-alive [no body] 8

9.  It’s possible to add conditions in the HTTP request  Syntax: If-Match, If-None-Match, If-Range, If-Unmodified-Since, If-Modified-Since  Servers along the way can change the request  how do we call these servers?  Why would we use it? 9

10.  The web-server listens to specific ports (usually 80)  It receives the request and parse it  Typical web-server (Get method) has a mapping between resource-URI to the local hard-drive 10

11.  The server sends back information and content back to the user-agent  Response pattern: HTTP/1.0 code text Field1: Value1 Field2: Value2...Document content here... (e.g. HTML code) 11

12.  The status code is a three-digit integer, and the first digit identifies the general category of the response:  1xx indicates an informational message (mostly for experimental purposes only)  2xx indicates success of some kind (e.g. 200 OK)  3xx redirects the client to another URL  301 Moved permanently  302 Moved temporarily  4xx indicates an error on the client's part  400: Bad request ( bad syntax mostly)  401: Unauthorized (e.g. wrong user/pass)  403: Forbidden ( e.g. not allowed client)  404: Not found  5xx indicates an error on the server's part  500: Internal server error 12

13. HTTP/1.0 200 OK Date: Fri, 31 Dec 1999 23:59:59 GMT Content-Type: text/html Content-Length: 1354 Hello World 13

14.  When the browser receives and renders HTML, it sends new request to get any resource the HTML points to (e.g. images)  Basically the connection is closed after a single request/response pair  Each request creates new TCP connection  Creating TCP connection is super-slow 14

15. 15  HTTP 1.1 (1999)  keep-alive-mechanism: The browser creates one TCP connection and sends many request through it

16.  Each request is an independent transaction that is unrelated to any previous request  Servers do not retain session information about each communications partner  Advantage?  If a client dies in mid-transaction, no part of the system needs to be responsible for cleaning the present state of the server  Disadvantage?  User responsibility 16

17.  Browser Caching  Browser caches most resources in a temporary folder  Browser sends a request to check if it has the most updated resource  Proxy Caching  Some servers along the way hold cache of resources 17

18.  The user communicate with the web server through HTML forms  The user fills in the form and hits the submit button, upon which the data is submitted to the server  The tag has a method attribute  E.g. 18

19.  GET: form data are encoded into the URL  Disadvantages ?  POST: the HTTP request will include a body that contains the parameters  Rule of thumb: Primarily, POST should be used when the request causes a permanent change  See Example: form_get.html 19

20.  Stored as files in the file system  Delivered to the user exactly as stored  Same information for all users, from all contexts via HTTP  Large numbers of static pages as files can be impractical 20

21.  CSS is a style sheet language used to describe the presentation of a document written in HTML  Styles define how to display HTML elements  External Style Sheets can save you a lot of work  External Style Sheets are stored in CSS files  HTML code become cleaner and less messy  HTML pages become richer and user-friendly see example: Zen Garden

22.  A web page with web content that varies based on parameters provided by a user or a computer program  Client-side scripting  generally event driven, using the DOM elements  Server-side scripting  servers response affected by HTML forms, browser type, etc’  Combination  using Ajax 22

23.  Client-side scripting (JavaScript, Flash, etc.)  client-side content is generated on the user's local computer system  event-driven  can appear in events on HTML or separately  Pros: nice and dynamic  Cons: slow, browsers behave differently 23

24.  Server–side scripting (PHP, Perl, Ruby, etc.)  Server processes script on request  Server provides client-designated HTML  Stateful behavior on stateless protocol See example: WebGT 24

25. Not a cleaning spray 25

26. Not a soccer team 26

27.  Asynchrony JavaScript And XML  Sending requests to the server without refreshing the page  Using Javascript code  Client side uses callback functions to manipulate server responses  Do you remember such behavior from Facebook? See example: WebGT 27

28.  Pros  Better layout  Efficiency – Instead of getting an entire page we retrieve the needed data only  Reduce the number of connections (css/images/js)  Cons  the browser can’t register an Ajax action as a different page – No back button 28

29. 29 Client-side programming Server-side programming Proxy Servers DNS Servers

30. 30

31. 31