The document provides an introduction to basic web architecture, including HTML, URIs, HTTP, cookies, database-driven websites, AJAX, web services, XML, and JSON. It discusses how the web is a two-tiered architecture with a web browser displaying information from a web server. Key components like HTTP requests and responses are outlined. Extension of web architecture with server-side processing using languages like PHP and client-side processing with JavaScript are also summarized.

1. Introduction to Web ArchitectureChhorn Chamnap

2. About MeBlog: http://chamnapchhorn.blogspot.com/Twitter: http://twitter.com/chamnapRails DeveloperJavaScript Developer

3. AgendaBasic Web ArchitectureHTMLURIHTTPWeb Architecture ExtensionCookieDatabase-driven Website ArchitectureAJAXWeb ServicesXMLJSON

4. The World Wide Web

5. The World Wide WebIn 1989, Tim Berners-Lee had suggested a way to let all users, but particularly scientists, browse each others’ papers on the Internet.He developed HTML, URLs, and HTTP.

6. Basic Web Architecture

7. Basic Web ArchitectureThe web is a two-tiered architecture.A web browser displays information content, and a web server that transfers information to the client.

8. Web BrowserThe primary purpose is to bring information resources to the user. An application for retrieving, presenting, and traversing information resources.

9. Web ServerThe term web server or webserver can mean one of two things:A computer program that accepts HTTP requests and return HTTP responses with optional data content. A computer that runs a computer program as described above.

10. HTMLHyperText Markup Language

11. HTMLDocument layout language (not a programming language)Defines structure and appearance of Web pages

12. URIUniversal Resource Identifier

13. URIURLs are location dependent It contains four distinct parts: the protocol type, the machine name, the directory path and the file name. There are several kinds of URLs: file URLs, FTP URLs, and HTTP URLs.

14. HTTPHyperText Transfer Protocol

15. HTTPHTTP is a request/response standard of a client and a server.Typically, an HTTP client initiates a request.Resources to be accessed by HTTP are identified using Uniform Resource Identifiers (URIs).

16. Request messageThe request message consists of the following:Request lineHeaders (Accept-Language, Accept, ….)An empty lineAn optional message body

17. Request methodsHTTP defines eight methods (sometimes referred to as "verbs") indicating the desired action to be performed on the identified resource.HEADGETPOSTPUTDELETETRACEOPTIONSCONNECT

18. Safe methodsHEAD, GET, OPTIONS and TRACE are defined as safe (no side effects).POST, PUT and DELETE are intended for actions which may cause side effects either on the server.

19. Status CodesThe first line of the HTTP response is called the status line.

20. The way the user agent handles the response primarily depends on the code and secondarily on the response headers.

21. Success: 2xx

22. Redirection: 3xx

23. Client-Side Error: 4xx

24. Server-Side Error: 5xxHTTP session stateHTTP is a stateless protocol.

25. Hosts do not need to retain information about users between requests.

26. Statelessness is a scalability property.

27. For example, when a host needs to customize the content of a website for a user. Solution:

28. Cookies

29. Sessions

30. Hidden variables (when the current page is a form)

31. URL encoded parameters (such as /index.php?session_id=some_unique_session_code)Sample HTTP Request and ResponseClient requestServer response

32. Web Architecture Extension

33. Web Architecture ExtensionCGI extends the architecture to three-tiers by adding a back-end server that provides services to the Web server.

34. Traditional uses of JavaScriptJavaScript is a scripting language designed for creating dynamic, interactive Web applications that link together objects and resources on both clients and servers.Getting your Web page to respond or react directly to user interaction with form elements and hypertext linksPreprocessing data on the client before submission to a serverChanging content and styles

35. Cookietracking cookie, browser cookie, or HTTP cookie

36. CookieCookie is a small piece of text stored on a user's computer by a web browser.

37. A cookie consists of one or more name-value pairs containing bits of information such as user preferences.

38. A cookie can be used for:

39. authenticating,

40. session tracking, and

41. remembering specific information about users.Setting A Cookie

42. Cookie ExpirationCookies expire, and are therefore not sent by the browser to the server, under any of these conditions:At the end of the user session if the cookie is not persistent An expiration date has been specified, and has passed The expiration date of the cookie is changed to a date in the past The browser deletes the cookie by user request

43. Database-driven Website Architecture

44. Database-driven Website Architecture

45. Server-side processingIn server-side processing, the Web server:Receives the dynamic Web page requestPerforms all of the processing necessary to create the dynamic Web pageSends the finished Web page to the client for display in the client’s browser

46. Client-side processingClient-side processingSome processing needs to be “executed” by the browser, either to form the request for the dynamic Web page or to create or display the dynamic Web page.Eg. Javascript code to validate user input

47. Server and Client side processingServer-side processingPHPASPASP.NETPerlJ2EEPython, e.g. DjangoRuby, e.g. Ruby on RailsColdFusionClient-side processingCSSHTMLJavaScriptAdobe FlexMicrosoft Silverlight

48. AJAXAsynchronous JavaScript and XML

49. Defining AjaxAjax isn’t a technology. It’s really several technologies, each flourishing in its own right, coming together in powerful new ways. Ajax incorporates:XHTML and CSS;Document Object Model; XML and XSLT; XMLHttpRequest; JavaScriptJesse James Garrett, essay infebruary 18, 2005 Ajax: A New Approach to Web Applications