Date post: | 02-Apr-2018 |
Category: |
Documents |
Upload: | aanchal-arora |
View: | 217 times |
Download: | 0 times |
of 35
7/27/2019 Web Technologies Fundamentals and HTTP
1/35
Web TechnologiesBasics
WWW, HTTP, GET, POST, Cookies
Svetlin NakovTelerik
Corporationwww.telerik.com
http://www.telerik.com/http://www.telerik.com/http://www.telerik.com/7/27/2019 Web Technologies Fundamentals and HTTP
2/35
Table of Contents
WWW and the HTTP protocolThe HTTP protocolThe request-response model
GET vs. POST methods
HTTP Response Codes
Cookies
Web Development Tools
2
7/27/2019 Web Technologies Fundamentals and HTTP
3/35
WWW and HTTPHTTP Protocol: the Heart of the WWW
7/27/2019 Web Technologies Fundamentals and HTTP
4/35
What is WWW?WWW = World Wide Web = Web
Global distributed information system inInternet
A service in Internet (like E-mail, DNS, ...)
Consists of set of documents (and otherresources) located on different Internetservers
Accessed through standard protocols like
HTTP, HTTPS and FTP by their URLWeb servers provide Web content
Web browsers display the Web content
4
7/27/2019 Web Technologies Fundamentals and HTTP
5/35
WWW Components Structural components
Internet provides data transfer channelsover the TCP and HTTP protocols
Clients (Web browsers) display Webcontent
Web servers IIS, Apache, Tomcat, GWS,etc.
Semantic components
Hyper Text Transfer Protocol (HTTP)Hyper Text Markup Language (HTML)
Uniform Resource Locator (URL)
Uniform Resource Identifiers (URIs)
5
7/27/2019 Web Technologies Fundamentals and HTTP
6/35
WWW Infrastructure Clients use Web browser application to
request resources from the Web serversvia HTTP
Resources have unique URL address
Servers send the requested resource asa response
Or reply with an error message
Web pages are resources in WWW
HTML text, graphics, animations and otherfiles
Web sites
Web sites are sets of Web pages in WWW 6
7/27/2019 Web Technologies Fundamentals and HTTP
7/35
WWW Infrastructure (2)
Clients browser renders Web pages
returned by the Web serversPages are in HTML (Hyper Text Markup
Language)
Browsers shows the text, graphics, sounds,etc.
HTML pages contain hyperlinks to otherpages
The entire WWW system runs overstandard networking protocols
TCP, DNS, HTTP, FTP,
The HTTP protocol is fundamental for
WWW 7
7/27/2019 Web Technologies Fundamentals and HTTP
8/35
Main Components ofWWW: URL
Uniform Resource Locator (URL)
Unique resource location in WWW, e.g.
It is just a formatted string, consisting of:
Protocol for communicating with the server
(e.g., http, ftp, https, ...)Name of the server or IP address + optional
port (e.g. www.telerik.com, mail.bg:8080)Path and name of the resource (e.g.
index.php)Parameters (optional, e.g. ?id=27&lang=en)
8
http://www.telerik.com/academy/winter-2009-2010.aspx
7/27/2019 Web Technologies Fundamentals and HTTP
9/35
URL Encoding
URLs are encoded according RFC1738:
All other characters are escaped withthe formula:
Example: space has decimal code 32,in hex 20, so space in URL becomes%20
Space can also be encoded as "+" 9
... Only alphanumeric [0-9a-zA-Z], thespecial characters $-_.+!*'() and reservedcharacters used for their reserved purposesmay be used unencoded within an URL.
%[character hex code in ISO-Latin characterset]
7/27/2019 Web Technologies Fundamentals and HTTP
10/35
URL Examples
Some valid URLs:
Some invalid URLs:
10
http://www.google.bg/search?sourceid=navclient&ie=UTF-8&rlz=1T4GGLL_enBG369BG369&q=http+get+vs+posthttp://bg.wikipedia.org:80/wiki/%D0%A2%D0%B5%D0%BB%D0%B5%D1%80%D0%B8%D0%B3
http://www.google.bg/search?&q=C# .NET 4.0Should be: ?q=C%23+.NET+4.0
http://www.google.bg/search?&q=Should be: ?q=%D0%B1%D0%B8%D1%80%D0%B0
7/27/2019 Web Technologies Fundamentals and HTTP
11/35
Main Components of
WWW: HTMLHyper Text Markup Language(HTML)Notation for describing formatted
text with images and hyperlinks
Interpreted and displayed by the
Web browsersA Web (HTML) page consists of:HTML file
CSS stylesheet file (optional)A bunch of images (optional)
Other resources (optional)
11
7/27/2019 Web Technologies Fundamentals and HTTP
12/35
7/27/2019 Web Technologies Fundamentals and HTTP
13/35
HTML Example
13
HTMLExampleHeading 1Sub heading 2Sub heading 3
This is my first paragraph
This is my second paragraph
This is a div7/27/2019 Web Technologies Fundamentals and HTTP
14/35
7/27/2019 Web Technologies Fundamentals and HTTP
15/35
The HTTPProtocolHow HTTP Works?
HTTP
HTTP R R
7/27/2019 Web Technologies Fundamentals and HTTP
16/35
HTTP: Request-Response
ProtocolClient program
Running on end hostE.g. Web browser
Requests a resource
Server programRunning at the
server
E.g. Web server
Providesresources
GET /index.htmlHTTP/1.0HTTP/1.0 200 OK"Welcome to ourWeb site!"
16
7/27/2019 Web Technologies Fundamentals and HTTP
17/35
GET /academy/about.aspx HTTP/1.1Host: www.telerik.comUser-Agent: Mozilla/5.0
Text Transfer
Protocol
17
HTTP/1.1 200 OKDate: Mon, 5 Jul 2010 13:09:03 GMTServer: Microsoft-HTTPAPI/2.0Last-Modified: Mon, 12 Jul 2010 15:33:23GMTContent-Length: 54HelloWelcome to our site
HTTP
request:
The empty line
denotes theend of the
request header
The empty linedenotes the
end of theres onse
HTTPresponse:
7/27/2019 Web Technologies Fundamentals and HTTP
18/35
HTTP Request Message
Request message sent by a client consists of
Request line request method (GET, POST,HEAD, ...), resource URI, and protocol version
Request headers additional parameters
Body optional data
E.g. posted form data, files, etc.
18
HTTP/
HTTP GET R t
7/27/2019 Web Technologies Fundamentals and HTTP
19/35
HTTP GET Request Example
19
GET /academy/winter-2009-2010.aspxHTTP/1.1Host: www.telerik.comAccept: */*Accept-Language: bgAccept-Encoding: gzip, deflateUser-Agent:Mozilla/4.0(compatible;MSIE 6.0;Windows NT 5.0)Connection: Keep-AliveCache-Control: no-cache
Example of HTTP GET request:
HTTP request
line
HTTPheaders
The request body isempty
HTTP POST Req est
7/27/2019 Web Technologies Fundamentals and HTTP
20/35
HTTP POST Request Example
20
POST /webmail/login.phtml HTTP/1.1Host: www.abv.bgAccept: */*Accept-Language: bgAccept-Encoding: gzip, deflateUser-Agent: Mozilla/4.0(compatible;MSIE6.0; Windows NT 5.0)Connection: Keep-AliveCache-Control: no-cacheContent-Length: 59LOGIN_USER=menteDOMAIN_NAME=abv.bgLOGIN_PASS=top*secret!
Example of HTTP POST request:
HTTP requestline
HTTP
headersThe request body
contains thesubmitted form
data
C diti l HTTP GET
7/27/2019 Web Technologies Fundamentals and HTTP
21/35
Conditional HTTP GET Example
Fetches the resource only if it has beenchanged at the server
Server replies with 304 Not Modified if theresource has not been changed
Or 200 OK with the latest version otherwise
21
GET /academy/join.aspx HTTP/1.1Host: www.telerik.comUser-Agent: Gecko/20100115 Firefox/3.6If-Modified-Since: Tue, 9 Mar 201011:12:23 GMT
Example of HTTP conditional GET
request:
HTTP Response
7/27/2019 Web Technologies Fundamentals and HTTP
22/35
HTTP ResponseMessage
Response message sent by theserver
Status line protocol version,status code, status phrase
Response headers provide metadata
Body the contents of the response
(the requested resource)
22
HTTP/
HTTP Response
7/27/2019 Web Technologies Fundamentals and HTTP
23/35
Example of HTTP response from theWeb server:
HTTP Response Example
23
HTTP/1.1 200 OKDate: Fri, 17 Jul 2010 16:09:18 GMT+2Server: Apache/2.2.14 (Linux)Accept-Ranges: bytesContent-Length: 84Content-Type: text/htmlTestTest HTML page.
HTTP responsestatus line
HTTPrespons
e
headers
The HTTPresponse
body
HTTP Response
7/27/2019 Web Technologies Fundamentals and HTTP
24/35
HTTP Response Example
24
HTTP/1.1 404 Not FoundDate: Fri, 17 Jul 2010 16:09:18 GMT+2Server: Apache/2.2.14 (Linux)Connection: closeContent-Type: text/html404 Not FoundNot FoundThe requested URL /img/telerik-logo.gif wasnot found on this server.
Apache/2.2.14 Server at Port80
Example of HTTP response with error
result: Response statusline
HTTP
response
headers
The HTTP responsebody
Content Type and
7/27/2019 Web Technologies Fundamentals and HTTP
25/35
Content-Type andDisposition
The Content-Type header at theserver specifies how the outputshould be processed
Examples:
25
Content-Type: text/html; charset=utf-8
UTF-8 encoded HTMLpage. Will be shown
in the browser.
Content-Type: application/pdfContent-Disposition: attachment;filename="Financial-Report-April-2010.pdf"This will download a PDF filenamed Financial-Report-
April-2010.pdf
7/27/2019 Web Technologies Fundamentals and HTTP
26/35
HTTP Request Methods
HTTP request methods:
GET
Return the specified resource, run aprogram at the server, or just
download file,
HEAD
Return the meta-data associated with
a resource (headers only)POST
Update a resource, provide input data
for processing at the server, 26
7/27/2019 Web Technologies Fundamentals and HTTP
27/35
HTTP Response Codes
HTTP response code classes
1xx: informational (e.g., 100 Continue)2xx: success (e.g., 200 OK)3xx: redirection (e.g., 304 NotModified, "302 Found")
4xx: client error (e.g., 404 Not Found)5xx: server error (e.g., 503ServiceUnavailable)
"302 Found" is used for redirecting theWeb browser to another URL
27
7/27/2019 Web Technologies Fundamentals and HTTP
28/35
Browser Redirection
HTTP browser redirection example
HTTP GET requesting a moved URL:
The HTTP response says thebrowser should request anotherURL:
28
GET / HTTP/1.1Host: academy.telerik.comUser-Agent: Gecko/20100115 Firefox/3.6
HTTP/1.1 301 Moved PermanentlyLocation: http://www.telerik.com/academy/
7/27/2019 Web Technologies Fundamentals and HTTP
29/35
HTTP Cookies Cookie
Cookies are small pieces of data stored by theclient on behalf of the server
Included in all future HTTP requests to theserver
29
RequestResponseSet-Cookie: XYZ
Next requestCookie: XYZ
7/27/2019 Web Technologies Fundamentals and HTTP
30/35
Cookies Example
The client requests some URL:
The server sets a cookie in the
HTTP response:
In further requests to google.bgthe Web browser sends the cookiein the HTTP header:
30
GET / HTTP/1.1Host: www.google.bg
HTTP/1.1 200 OKSet-Cookie: PREF=ID=c0bf5fd5c3a25209;expires=Wed, 11-Jul-2012 16:13:22 GMT;domain=.google.bg
GET / HTTP/1.1Host: www.google.bgCookie: PREF=ID=c0bf5fd5c3a25209
View Cookies in the Web
7/27/2019 Web Technologies Fundamentals and HTTP
31/35
View Cookies in the WebBrowser
31
7/27/2019 Web Technologies Fundamentals and HTTP
32/35
HTTP Developer Tools
Firebug plug-in for Firefox
A must have for Web developers
The ultimate tool for monitoring,editing and debugging HTTP, HTML,
CSS, JavaScript, etc.Free, open-source
www.getfirebug.com
Fiddler HTTP proxyIntercepts the HTTP traffic
Analyzes the HTTP conversation
Free tool www.fiddler2.com 32
HTTP Developer Tools
http://www.getfirebug.com/http://www.fiddler2.com/http://www.fiddler2.com/http://www.getfirebug.com/7/27/2019 Web Technologies Fundamentals and HTTP
33/35
HTTP Developer Tools(2)
Wiresharkpacket analyzer
Low-level packet snifferIntercepts the entire IP network traffic
Can reconstruct the HTTP conversation
Can intercept any (unencrypted) protocol
IP, ICMP, TCP, UDP, HTTP, DNS, SMTP, POP3
Can intercept passwords sent in clear-text
Free, open-source project www.wireshark.org
33
Web Technologies
http://www.wireshark.org/http://www.wireshark.org/7/27/2019 Web Technologies Fundamentals and HTTP
34/35
Web TechnologiesBasics
Questions?
??
? ? ??
?
?
?
?
http://academy.telerik.co
http://academy.telerik.com/http://academy.telerik.com/7/27/2019 Web Technologies Fundamentals and HTTP
35/35
Exercises
1. Describe the infrastructure of WWW. What is
URL? What is HTML? What is HTTP?2. Describe the HTTP protocol in details: HTTP
requests, HTTP responses, request methodsand status codes.
3. What is the difference between GET andPOST methods in the HTTP requests?
4. What is a "cookie" and how does it work?
5. Install Fiddler, Firebug and WireShark and
play with them. Try to inspect how Facebookworks.