WWW and HTTP

http://schoolacademy.telerik.com,[object Object],Web Technologies Basics,[object Object],WWW, HTTP, GET, POST, Cookies,[object Object],Svetlin Nakov,[object Object],Telerik Corporation,[object Object],www.telerik.com,[object Object]

Table of Contents,[object Object],WWW and the HTTP protocol,[object Object],The HTTP protocol,[object Object],The request-response model,[object Object],GET vs. POST methods,[object Object],HTTP Response Codes,[object Object],Cookies,[object Object],Web Development Tools,[object Object],2,[object Object]

WWW and HTTP,[object Object],HTTP Protocol: the Heart of the WWW,[object Object]

What is WWW?,[object Object],WWW = World Wide Web = Web,[object Object],Global distributed information system in Internet,[object Object],A service in Internet (like E-mail, DNS, ...),[object Object],Consists of set of documents (and other resources) located on different Internet servers,[object Object],Accessed through standard protocols like HTTP, HTTPS and FTP by their URL,[object Object],Web servers provide Web content,[object Object],Web browsers display the Web content,[object Object],4,[object Object]

WWW Components,[object Object],Structural components,[object Object],Internet – provides data transfer channels over the TCP and HTTP protocols,[object Object],Clients (Web browsers) – display Web content,[object Object],Web servers – IIS, Apache, Tomcat, GWS, etc.,[object Object],Semantic components,[object Object],Hyper Text Transfer Protocol (HTTP),[object Object],Hyper Text Markup Language (HTML),[object Object],Uniform Resource Locator (URL),[object Object],Uniform Resource Identifiers (URIs),[object Object],5,[object Object]

WWW Infrastructure,[object Object],Clients use Web browser application to request resources from the Web servers via HTTP,[object Object],Resources have unique URL address,[object Object],Servers send the requested resource as a response,[object Object],Or reply with an error message,[object Object],Web pages are resources in WWW,[object Object],HTML text, graphics, animations and other files,[object Object],Web sites,[object Object],Web sites are sets of Web pages in WWW,[object Object],6,[object Object]

WWW Infrastructure (2),[object Object],Client’s browser renders Web pages returned by the Web servers,[object Object],Pages are in HTML (Hyper Text Markup Language),[object Object],Browsers shows the text, graphics, sounds, etc.,[object Object],HTML pages contain hyperlinks to other pages,[object Object],The entire WWW system runs over standard networking protocols,[object Object],TCP, DNS, HTTP, FTP, …,[object Object],The HTTP protocol is fundamental for WWW,[object Object],7,[object Object]

Main Components of WWW: URL,[object Object],Uniform Resource Locator (URL),[object Object],Unique resource location in WWW, e.g.,[object Object],It is just a formatted string, consisting of:,[object Object],Protocol for communicating with the server (e.g., http, ftp, https, ...),[object Object],Name of the server or IP address + optional port (e.g. www.telerik.com, mail.bg:8080),[object Object],Path and name of the resource (e.g. index.php),[object Object],Parameters (optional, e.g. ?id=27&lang=en),[object Object],8,[object Object],http://www.telerik.com/academy/winter-2009-2010.aspx,[object Object]

URL Encoding,[object Object],URLs are encoded according RFC 1738:,[object Object],All other characters are escaped with the formula:,[object Object],Example: space has decimal code 32, in hex – 20, so space in URL becomes %20,[object Object],Space can also be encoded as "+",[object Object],9,[object Object],“... Only alphanumeric [0-9a-zA-Z], the special characters $-_.+!*'() and reserved characters used for their reserved purposes may be used unencoded within an URL.”,[object Object],%[character hex code in ISO-Latin character set],[object Object]

URL – Examples,[object Object],Some valid URLs:,[object Object],Some invalid URLs:,[object Object],10,[object Object],http://www.google.bg/search?sourceid=navclient&ie=UTF-8&rlz=1T4GGLL_enBG369BG369&q=http+get+vs+post,[object Object],http://bg.wikipedia.org:80/wiki/%D0%A2%D0%B5%D0%BB%D0%B5%D1%80%D0%B8%D0%B3,[object Object],Should be: ?q=C%23+.NET+4.0,[object Object],http://www.google.bg/search?&q=C# .NET 4.0,[object Object],Should be: ?q=%D0%B1%D0%B8%D1%80%D0%B0,[object Object],http://www.google.bg/search?&q=бира,[object Object]

Main Components of WWW: HTML,[object Object],Hyper Text Markup Language (HTML),[object Object],Notation for describing formatted text with images and hyperlinks,[object Object],Interpreted and displayed by the Web browsers,[object Object],A Web (HTML) page consists of:,[object Object],HTML file,[object Object],CSS stylesheet file (optional),[object Object],A bunch of images (optional),[object Object],Other resources (optional),[object Object],11,[object Object]

Main Components of WWW: HTML,[object Object],HTML is straight-forward and easy to learn,[object Object],HTML documents are plain text files,[object Object],Easy to add formatting, hyperlinks, bullets, etc.,[object Object],Images can be added as separate files,[object Object],Can be automatically generated by authoring programs,[object Object],Tools to help users creating HTML pages,[object Object],E.g. FrontPage, Dreamweaver, Visual Studio,[object Object],WYSIWYG HTML editors,[object Object],12,[object Object]

HTML – Example,[object Object],13,[object Object],<html>,[object Object], <head><title>HTML Example</title></head>,[object Object], <body>,[object Object], <h1>Heading 1</h1>,[object Object], <h2>Sub heading 2</h2>,[object Object], <h3>Sub heading 3</h3>,[object Object], <p>This is my first paragraph</p>,[object Object], <p>This is my second paragraph</p>,[object Object], <div align="center",[object Object], style="background:skyblue">,[object Object], This is a div</div> ,[object Object], </body>,[object Object],</html>,[object Object]

Main Components of WWW: HTTP,[object Object],Hyper Text Transfer Protocol (HTTP),[object Object],Client-server protocol for transferring Web resources (HTML files, images, styles, etc.),[object Object],Important properties of HTTP,[object Object],Request-response model,[object Object],Text-based format,[object Object],Relies on a unique resource URLs,[object Object],Provides resource metadata (e.g. encoding),[object Object],Stateless (cookies can overcome this),[object Object],14,[object Object]

The HTTP Protocol,[object Object],How HTTP Works?,[object Object],HTTP,[object Object]

HTTP: Request-Response Protocol,[object Object],Client program,[object Object],Running on end host,[object Object],E.g. Web browser,[object Object],Requests a resource,[object Object],Server program,[object Object],Running at the server,[object Object],E.g. Web server,[object Object],Provides resources,[object Object],GET /index.html,[object Object],HTTP/1.0,[object Object],HTTP/1.0 200 OK,[object Object],"Welcome to our,[object Object],Web site!",[object Object],16,[object Object]

Example: Hyper Text Transfer Protocol,[object Object],GET /academy/about.aspx HTTP/1.1,[object Object],Host: www.telerik.com,[object Object],User-Agent: Mozilla/5.0,[object Object],<CRLF>,[object Object],17,[object Object],[object Object],The empty line denotes the end of the request header,[object Object],[object Object],HTTP/1.1 200 OK,[object Object],Date: Mon, 5 Jul 2010 13:09:03 GMT,[object Object],Server: Microsoft-HTTPAPI/2.0,[object Object],Last-Modified: Mon, 12 Jul 2010 15:33:23 GMT,[object Object],Content-Length: 54,[object Object],<CRLF>,[object Object],<html><title>Hello</title>,[object Object],Welcome to our site</html>,[object Object],The empty line denotes the end of the response header,[object Object]

HTTP Request Message,[object Object],Request message sent by a client consists of,[object Object],Request line – request method (GET, POST, HEAD, ...), resource URI, and protocol version,[object Object],Request headers – additional parameters,[object Object],Body – optional data,[object Object],E.g. posted form data, files, etc.,[object Object],18,[object Object],<request method> <resource> HTTP/<version>,[object Object],<headers>,[object Object],<empty line>,[object Object],<body>,[object Object]

HTTP GET Request – Example,[object Object],19,[object Object],[object Object],GET /academy/winter-2009-2010.aspx HTTP/1.1,[object Object],Host: www.telerik.com,[object Object],Accept: */*,[object Object],Accept-Language: bg,[object Object],Accept-Encoding: gzip, deflate,[object Object],User-Agent: Mozilla/4.0(compatible;MSIE 6.0; Windows NT 5.0),[object Object],Connection: Keep-Alive,[object Object],Cache-Control: no-cache,[object Object],<CRLF>,[object Object],HTTP request line,[object Object],HTTP headers,[object Object],The request body is empty,[object Object]

HTTP POST Request – Example,[object Object],20,[object Object],[object Object],POST /webmail/login.phtml HTTP/1.1,[object Object],Host: www.abv.bg,[object Object],Accept: */*,[object Object],Accept-Language: bg,[object Object],Accept-Encoding: gzip, deflate,[object Object],User-Agent: Mozilla/4.0(compatible;MSIE 6.0; Windows NT 5.0),[object Object],Connection: Keep-Alive,[object Object],Cache-Control: no-cache,[object Object],Content-Length: 59,[object Object],<CRLF>,[object Object],LOGIN_USER=mente,[object Object],DOMAIN_NAME=abv.bg,[object Object],LOGIN_PASS=top*secret!,[object Object],<CRLF>,[object Object],HTTP request line,[object Object],HTTP headers,[object Object],The request body contains the submitted form data,[object Object]

Conditional HTTP GET – Example,[object Object],Fetches the resource only if it has been changed at the server,[object Object],Server replies with “304 Not Modified” if the resource has not been changed,[object Object],Or “200 OK” with the latest version otherwise,[object Object],21,[object Object],[object Object],GET /academy/join.aspx HTTP/1.1,[object Object],Host: www.telerik.com,[object Object],User-Agent: Gecko/20100115 Firefox/3.6,[object Object],If-Modified-Since: Tue, 9 Mar 2010 11:12:23 GMT,[object Object],<CRLF>,[object Object]

HTTP Response Message,[object Object],Response message sent by the server,[object Object],Status line – protocol version, status code, status phrase,[object Object],Response headers – provide meta data,[object Object],Body – the contents of the response (the requested resource),[object Object],22,[object Object],HTTP/<version> <status code> <status text>,[object Object],<headers>,[object Object],<CRLF>,[object Object],<response body – the requested resource>,[object Object]

[object Object],HTTP Response – Example,[object Object],23,[object Object],HTTP response status line,[object Object],HTTP/1.1 200 OK,[object Object],Date: Fri, 17 Jul 2010 16:09:18 GMT+2,[object Object],Server: Apache/2.2.14 (Linux),[object Object],Accept-Ranges: bytes,[object Object],Content-Length: 84,[object Object],Content-Type: text/html,[object Object],<CRLF>,[object Object],<html>,[object Object], <head><title>Test</title></head>,[object Object], <body>Test HTML page.</body>,[object Object],</html>,[object Object],HTTP response headers,[object Object],The HTTP response body,[object Object]

HTTP Response – Example,[object Object],24,[object Object],[object Object],Response status line,[object Object],HTTP/1.1 404 Not Found,[object Object],Date: Fri, 17 Jul 2010 16:09:18 GMT+2,[object Object],Server: Apache/2.2.14 (Linux),[object Object],Connection: close,[object Object],Content-Type: text/html,[object Object],<CRLF>,[object Object],<HTML><HEAD>,[object Object],<TITLE>404 Not Found</TITLE>,[object Object],</HEAD><BODY>,[object Object],<H1>Not Found</H1>,[object Object],The requested URL /img/telerik-logo.gif was not found on this server.<P>,[object Object],<HR><ADDRESS>Apache/2.2.14 Server at Port 80</ADDRESS>,[object Object],</BODY></HTML>,[object Object],HTTP response headers,[object Object],The HTTP response body,[object Object]

Content-Type and Disposition,[object Object],The Content-Type header at the server specifies how the output should be processed,[object Object],Examples:,[object Object],25,[object Object],UTF-8 encoded HTML page. Will be shown in the browser.,[object Object],Content-Type: text/html; charset=utf-8,[object Object],Content-Type: application/pdf,[object Object],Content-Disposition: attachment;,[object Object], filename="Financial-Report-April-2010.pdf",[object Object],This will download a PDF file named Financial-Report-April-2010.pdf,[object Object]

HTTP Request Methods,[object Object],HTTP request methods:,[object Object],GET,[object Object],Return the specified resource, run a program at the server, or just download file, …,[object Object],HEAD,[object Object],Return the meta-data associated with a resource (headers only),[object Object],POST,[object Object],Update a resource, provide input data for processing at the server, …,[object Object],26,[object Object]

HTTP Response Codes,[object Object],HTTP response code classes,[object Object],1xx: informational (e.g., “100 Continue”),[object Object],2xx: success (e.g., “200 OK”),[object Object],3xx: redirection (e.g., “304 Not Modified”, "302 Found"),[object Object],4xx: client error (e.g., “404 Not Found”),[object Object],5xx: server error (e.g., “503ServiceUnavailable”),[object Object],"302 Found"is used for redirecting the Web browser to another URL,[object Object],27,[object Object]

Browser Redirection,[object Object],HTTP browser redirection example,[object Object],HTTP GET requesting a moved URL:,[object Object],The HTTP response says the browser should request another URL:,[object Object],28,[object Object],GET / HTTP/1.1,[object Object],Host: academy.telerik.com,[object Object],User-Agent: Gecko/20100115 Firefox/3.6,[object Object],<CRLF>,[object Object],HTTP/1.1 301 Moved Permanently,[object Object],Location: http://www.telerik.com/academy/,[object Object],…,[object Object]

HTTP Cookies,[object Object],Cookie,[object Object],Cookies are small pieces of data stored by the client on behalf of the server,[object Object],Included in all future HTTP requests to the server,[object Object],29,[object Object],Request,[object Object],Response,[object Object],Set-Cookie: XYZ,[object Object],Next request,[object Object],Cookie: XYZ,[object Object]

Cookies – Example,[object Object],The client requests some URL:,[object Object],The server sets a cookie in the HTTP response:,[object Object],In further requests to google.bg the Web browser sends the cookie in the HTTP header:,[object Object],30,[object Object],GET / HTTP/1.1,[object Object],Host: www.google.bg,[object Object],HTTP/1.1 200 OK,[object Object],Set-Cookie: PREF=ID=c0bf5fd5c3a25209; expires=Wed, 11-Jul-2012 16:13:22 GMT; domain=.google.bg,[object Object],GET / HTTP/1.1,[object Object],Host: www.google.bg,[object Object],Cookie: PREF=ID=c0bf5fd5c3a25209,[object Object]

View Cookies in the Web Browser,[object Object],31,[object Object]

HTTP Developer Tools,[object Object],Firebug plug-in for Firefox,[object Object],A must have for Web developers,[object Object],The ultimate tool for monitoring, editing and debugging HTTP, HTML, CSS, JavaScript, etc.,[object Object],Free, open-source – www.getfirebug.com,[object Object],Fiddler – HTTP proxy,[object Object],Intercepts the HTTP traffic,[object Object],Analyzes the HTTP conversation,[object Object],Free tool – www.fiddler2.com,[object Object],32,[object Object]

HTTP Developer Tools (2),[object Object],Wireshark packet analyzer,[object Object],Low-level packet sniffer,[object Object],Intercepts the entire IP network traffic,[object Object],Can reconstruct the HTTP conversation,[object Object],Can intercept any (unencrypted) protocol,[object Object],IP, ICMP, TCP, UDP, HTTP, DNS, SMTP, POP3,[object Object],Can intercept passwords sent in clear-text,[object Object],Free, open-source project – www.wireshark.org,[object Object],33,[object Object]

Web Technologies Basics,[object Object],?,[object Object],?,[object Object],?,[object Object],?,[object Object],?,[object Object],Questions?,[object Object],?,[object Object],?,[object Object],?,[object Object],?,[object Object],?,[object Object],http://academy.telerik.com,[object Object]

WWW and HTTP

WWW and HTTP

Recommended

More Related Content

What's hot

What's hot(20)

Similar to WWW and HTTP

Similar to WWW and HTTP(20)

More from BG Java EE Course

More from BG Java EE Course (20)

Recently uploaded

Recently uploaded(20)

WWW and HTTP