Post on 17-Jan-2016
Jan 2001 C.Watters 1
World Wide Web and E-Commerce
Client Side Processing
Jan 2001 C.Watters 2
Objectives
Examine how http makes the web workExamine computing activities that can be
done at the client (browser side)Consider fat vs thin clientsTake a look at portals
Jan 2001 C.Watters 3
Client-Server Model (review)
Jan 2001 C.Watters 4
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 2001 C.Watters 5
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 data data
Jan 2001 C.Watters 6
HTTP Request Header Example
GET /catalog/ip/ip.htm HTTP 1.0
Accept: text/plain
Accept: text/html
Referer: http://www.cs.dal.ca/catalog.html
User-Agent: Mozilla/2.0
<CR/LF>
Jan 2001 C.Watters 7
HTTP Response Example
HTTP/1.0 200 OK
Server: NCSA/1.3
Mime_version: 1.0
Content_type: text/html
Content_length: 2000
<HTML>
……
</HTML>
http version Response code explanation
Response header
Document body
Jan 2001 C.Watters 8
Client Side Processing
• HTML pages
• Javascript
• Applets
• Cookies
Jan 2001 C.Watters 9
Browser processes HTML
HTML - Hypertext Markup Language
display instructions (tags) and content are mixed
together browser interprets the display instructions and displays
National Gov
<h1>National Gov</h1>
Jan 2001 C.Watters 10
Browser
<html><b>hello</b>
</html>
Hi.html
Browser
hello
http
html
Parse html
server
Jan 2001 C.Watters 11
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 2001 C.Watters 12
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 (<IMG>, <FORM>)
Jan 2001 C.Watters 13
Browser Functions
• Parse input datastream
• Assemble output to client screen
Jan 2001 C.Watters 14
Displaying the data
• Define canvas
• Get the data
• Parse text and act– getTag(file,tag)
– if (tag= = “B”){bold_on()}
• etc.
Jan 2001 C.Watters 15
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 2001 C.Watters 16
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 2001 C.Watters 17
<IMG> 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 2001 C.Watters 18
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 2001 C.Watters 19
Javascript Examples
• Calculators
• Simple Calculator
• Shopping Cart
Jan 2001 C.Watters 20
Forms and Data• Forms are part of HTML document<form>
Price: <input type=“text”><input type=“button” value=“GST”>
</form>
• user enters data or selects options• Data from form goes to javascript (or back to server)
GSTPrice:
Jan 2001 C.Watters 21
Form and call to Javascript
<form>
<input type=“text” name=“price”>
<input type=“button” value=“GST” onClick=“CalcGST(this.Form)”>
</form>
Execute this function in javascript of this page
Send all of the data in this form to the javascript too
Everytime this button isClicked!!
Jan 2001 C.Watters 22
<HTML><TITLE> Javascript sample</title><SCRIPT LANGUAGE="JavaScript">
function GST(theForm){var price=parseInt(theForm.price.value)var gst=price*0.07theForm.result.value=gst
}</SCRIPT><BODY bgcolor="#FFFF80"><CENTER><H3>GST Calculator </h3><FORM><input type="text" name="price" size="6" value="0"><input type="button" value="GST" onClick="GST(this.form)"><input type="text" name="result" size="6" value=""></FORM></BODY></HTML>
Jan 2001 C.Watters 23
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 2001 C.Watters 24
Applets
Compiled java program codeCode is sent from server to the browserExecutes on the browsers machineCANNOT write to client’s machine!!
Jan 2001 C.Watters 25
Applet call example
<HTML>
<APPLET CODE=“http://www.xyz.com/carfind.class” width=100 height=200>Demo </APPLET>
</HTML>
Go here to get code
Give it this much of the Current web page
Jan 2001 C.Watters 26
Applet example
• Car search applet
Jan 2001 C.Watters 27
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 documentdocument.cookie=“cookie1= name=carolyn;
balance=2000;expires=06-01-2001;path=/”
Jan 2001 C.Watters 28
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 2001 C.Watters 29
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 2001 C.Watters 30
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