introduction to web programming fall 2014/2015 some slides are based upon web technologies course...
TRANSCRIPT
2
Internet VS. WWW An
international network of
networks (1960s)
A system of interlinked hypertext documents that are accessed via
the Internet (1990)
Other applications?
3
How does it work?
4
Hypertext Transfer Protocol (HTTP)
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
5
1) Typing a URL
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)
6
2) Sending HTTP-Request
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
7
Request methods
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 ..
8
Request example
GET /players/mJordan/info.html HTTP/1.1Host: www.nba.comUser-Agent: Mozilla/5.0 (Windows;) Gecko Firefox/3.0.4Accept: text/html,application/xhtml+xml,application/xml;Accept-Language: en-us,en;q=0.5X-cept-Encoding: gzip,deflateAccept-Charset: ISO-8859-1,utf-8;q=0.7,*;q=0.7Keep-Alive: 300Connection: keep-alive[no body]
9
Conditions in request
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?
10
3) Server Processing
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
11
4 (Server response
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)
12
Status codes
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
13
Response example
HTTP/1.0 200 OK Date: Fri, 31 Dec 1999 23:59:59 GMT Content-Type: text/html Content-Length: 1354
<html> <body>
<h1>Hello World</h1> </body>
</html>
14
Persistence (HTTP)
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
15
Persistence – (cont’d)
HTTP 1.1 (1999) keep-alive-mechanism: The browser creates one TCP
connection and sends many request through it
16
Stateless
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
17
Caching
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
18
“Talking” with the server
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 <FORM> tag has a method attribute E.g. <form method=“post”>
19
Submitting forms
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
20
Static Web Pages
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
Cascading Style Sheets (CSS)
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-friendlysee example: Zen Garden
22
Dynamic web pages
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
23
Dynamic web pages – (cont.)
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
24
Dynamic web pages – (cont.)
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
25
Combination - Basic Ajax
Not a cleaning spray
26
Combination - Basic Ajax
Not a soccer team
27
Combination - Basic Ajax
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
28
Pros and Cons
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
29
Putting All Together
Client-side programmi
ng
Server-side programmi
ng
Proxy Servers
DNS Servers
30
Contribution to Human History
31