web technologies fundamentals and http

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/


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


3/35

WWW and HTTPHTTP Protocol: the Heart of the WWW


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


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


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/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


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


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]


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


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


12/35


13/35

HTML Example

13

HTMLExampleHeading 1Sub heading 2Sub heading 3

This is my first paragraph

This is my second paragraph
This is a div


14/35


15/35

The HTTPProtocolHow HTTP Works?

HTTP

HTTP R R


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


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:


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


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


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


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


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


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


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


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


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


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


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/


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


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


31/35

View Cookies in the WebBrowser

31


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/


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/


34/35

Web TechnologiesBasics

Questions?

??

? ? ??

?

?

?

?

http://academy.telerik.co
http://academy.telerik.com/http://academy.telerik.com/


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.

web technologies fundamentals and http

Documents