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

Jan 2001 C.Watters 1

World Wide Web and E-Commerce

Client Side Processing


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


Client-Server Model (review)


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


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


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>


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


Client Side Processing

• HTML pages

• Javascript

• Applets

• Cookies


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>


Browser

<html><b>hello</b>

</html>

Hi.html

Browser

hello

http

html

Parse html

server


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)


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


Browser Functions

• Parse input datastream

• Assemble output to client screen


Displaying the data

• Define canvas

• Get the data

• Parse text and act– getTag(file,tag)

– if (tag= = “B”){bold_on()}

• etc.


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


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


<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


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


Javascript Examples

• Calculators

• Simple Calculator

• Shopping Cart


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:


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


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


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


Applets

Compiled java program codeCode is sent from server to the browserExecutes on the browsers machineCANNOT write to client’s machine!!


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


Applet example

• Car search applet


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


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


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


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

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

Documents

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