Jan 2001C.Watters1 World Wide Web and E-Commerce Client Side Processing

Jan 2001C.Watters2 Objectives  Examine how http makes the web work  Examine computing activities that can be done at the client (browser side)  Consider fat vs thin clients  Take a look at portals

Jan 2001C.Watters3 Client-Server Model (review)

Jan 2001C.Watters4 HTTP Connection 1. Client –makes an HTTP request for a web page –makes a TCP/IP connection 2. Server accepts request –sends page as HTTP 3. Client downloads page 4. Server breaks the connection Browser

Jan 2001C.Watters5 What does an HTTP request or response look like? Browser request = Header only Server response = Header + object file (generally) Header object file Plain text about datadata

Jan 2001C.Watters6 HTTP Request Header Example GET /catalog/ip/ip.htm HTTP 1.0 Accept: text/plain Accept: text/html Referer: User-Agent: Mozilla/2.0

Jan 2001C.Watters7 HTTP Response Example HTTP/ OK Server: NCSA/1.3 Mime_version: 1.0 Content_type: text/html Content_length: 2000 …… http version Response code explanation Response header Document body

Jan 2001C.Watters8 Client Side Processing HTML pages Javascript Applets Cookies

Jan 2001C.Watters9 Browser processes HTML  HTML - Hypertext Markup Language   display instructions (tags) and content are mixed together  browser interprets the display instructions and displays  National Gov

Jan 2001C.Watters10 Browser hello Hi.html Browser hello http html Parse html server

Jan 2001C.Watters11 Browser Functions Generate an HTTP request Accept an HTML file parse file contents – get a tag –process data –paint screen accept user events (scroll, click, etc)

Jan 2001C.Watters12 So Browser Needs to: Execute low level TCP/IP operations –make a connection (socket level routines) Draw page on screen Manage page links –make an array of links on current page screen co-ordinates Boolean visited href text string at bottom –Actions click passover scroll process special objects (, )

Jan 2001C.Watters13 Browser Functions Parse input datastream Assemble output to client screen

Jan 2001C.Watters14 Displaying the data Define canvas Get the data Parse text and act –getTag(file,tag) –if (tag= = “B”){bold_on()} etc.

Jan 2001C.Watters15 Sample Browser Function: Move_Mouse(x,y) Called each time the mouse is moved checks if mouse is over a link yes- display href string in bottom bar continuously evaluates logical and screen coordinates to accommodate scrolling

Jan 2001C.Watters16 Button Down Event(x,y) Check (x,y) to see if over a link if yes then –change Boolean attribute for link to visited –make http request –redraw screen with new data

Jan 2001C.Watters17 Action Get file from host –download file –fopen get dimensions of image –eg. GIF file bytes 6-7=width, 8-9=height draw the area

Jan 2001C.Watters18 Client Side Processing JavaScript –Program code in plain text included in the HTML doc –executes on client –Interacts with user using HTML forms in web pages Applet –Program code in java byte code sent from server –executes on the client –Typically takes over part of the current web page

Jan 2001C.Watters19 Javascript Examples Calculators Simple Calculator Shopping Cart

Jan 2001C.Watters20 Forms and Data Forms are part of HTML document Price: user enters data or selects options Data from form goes to javascript (or back to server) GST Price:

Jan 2001C.Watters21 Form and call to Javascript Execute this function in javascript of this page Send all of the data in this form to the javascript too Everytime this button is Clicked!!

Jan 2001C.Watters22 Javascript sample function GST(theForm){ var price=parseInt(theForm.price.value) var gst=price*0.07 theForm.result.value=gst } GST Calculator

Jan 2001C.Watters23 Features using Javascript Shopping carts Checking credit card or phone number patterns What-if Calculations: –car payments –Mortgage payments –Current cost of things in the shopping cart Tutorial or demonstration calculations Remember no data is sent to server!!

Jan 2001C.Watters24 Applets  Compiled java program code  Code is sent from server to the browser  Executes on the browsers machine  CANNOT write to client’s machine!!

Jan 2001C.Watters25 Applet call example Demo Go here to get code Give it this much of the Current web page

Jan 2001C.Watters26 Applet example Car search applet

Jan 2001C.Watters27 Saving Data on a Client Applets can not write to the client’s disk Cookies (generated by javascript (or cgi)) can be saved on client – text strings –“owned” by the current html document document.cookie=“cookie1= name=carolyn; balance=2000;expires= ;path=/”

Jan 2001C.Watters28 Applet restrictions Cannot write to local disk Only establish socket connection to owner host (i.e., where applet was downloaded from) Why are these sensible??? Why are these ridiculous???

Jan 2001C.Watters29 Fat vs Thin Clients Fat clients have a lot of the processing done on the client (applets, applications, etc) Thin clients have very little processing mostly just display Fat: offload server, save bandwidth Thin: no software upgrades, cheap clients

Jan 2001C.Watters30 Recap HTTP protocol is used for browser-server communication HTTP is stateless (here and now!) Javascript can be used to do some of the work on the client, including saving data between sessions as cookies Applets can be used to execute a program from the server on the client, but cannot save data on the client