weekend ms cs program internet and web technologies

Weekend MS CS ProgramInternet and Web

TechnologiesCOT 5930

Web Project Development - Ajax

Dr. Roy Levow, Associate Chair & Professor

Email: roy@cse.fau.edu Phone: 954-236-1170

Web: http://www.cse.fau.edu/~roy

Lesson Plan, Session 2

1. HTTP Request2. AJAX design3. MVC pattern4. Laboratory 15. MVC in action6. Server interaction7. Dynamic double combo8. Type-ahead suggest

HTTP Request W3Schools AJAX Tutorial

Observe different code for MSIE, Mozilla / Safari, and Opera (not)

HTTP Request is not standard Callback functions

Passed as parameter to another function

Called by that function on completion of some activity or to provide some servicexmlHttp=GetXmlHttpObject(stateChanged)

stateChanged is called on completion of object load

HTTP Request (cont.)

Example: callbacktest.html Callback assigned to

onreadystatechangeis called on each state change

Testing: What’s wrong? Observe different behavior under IE

and Firefox (Mozilla)

AJAX Design

Patterns Common design elements for

frequently used components or operations

Refactoring Write simple code first Then reorganize to separate

patterns for reuse

Refactoring Example

Refactoring content loader Encapsulate code in a class using

“factory” pattern object Functionality

sendRequest() gets requestor from intHttpRequest() and assigns hard-coded onReadyState() to process response

See ContentLoader.js

Model-View-Controller Pattern Model represents problem

domain View presents things to user Controller provides all

interactions between model and view Enables complete separation of

model and view

Libraries

Cross-browser libraries Provide common functionality

across browsers X library: general DHTML support Sarissa: XML JavaScript

manipulation Prototype: Stronger JavaScript O-O

support

Widgets and Widget Suites

Scriptaculous UI components built on Prototype Animated visual effects Drag and drop

Rico UI components built on Prototype Customizable effects Drop and drag

Rico Accordion Example

accordion.html Note $(…) returns a reference to

the accordion object

Laboratory Exercise 1

JavaScript,DOM, CSS Create a numeric entry keyboard Start with a table

keypad.html Add actions with external .js files Redesign the table using CSS rather

than table

Application Frameworks DWR, JSON-RPC, SAJAX

Server-side but in different languages Backbase Presentation Server

Uses custom tags to markup UI components

Echo2 Java-based server engine

Generates UI components

Ruby-on-Rails Web framework written in Ruby

MVC Example 1

Musical keyboard Musical.html CSS for keyboard Dynamic assignment of

functionalityassignKeys()

Full separationmusicaldynKeys.html

Observer Pattern

Watches for user input Triggers response mousemat.html

What’s wrong? Mousemat observer

Server Interaction

Two roles Deliver application to client Respond to client requests

Coding may be in any language supported by the server PHP, Java, ASP ASP.NET, Ruby (newer)

Server-side Design Patterns Naïve web server

Without framework Server with MVC framework such

as Model2 Component-based frameworks

Provide either general or AJAX-specific tools / widgets

Service-oriented architectures Designed to provide service by

interaction over web Boarder than SOAP based Web

Services

Data Exchange

Client-only interactions Simple responses processed on

client Server request / response

planent browser simple version Add content-centric interaction

Response behavior scripts come from server

planets.html

Dynamic Double Combo

One selection option depends on another

Example: a first drop-down list determines the choices in the second

Client-side solution needs all data Server-side solution loads new

page with each selection AJAX solution builds second drop-

down based on selection in first

Dynamic Double Combo

Implementation Need to define XML response

format Server creates response

Client creates second drop-down dynamically DoubleCombo.htm DoubleCombo_Static.htm DoubleComboMulti.htm

Type-ahead Suggest

Characteristics Google suggest Application responds as you type

1. You type a character2. Type-ahead passes request to server3. Server responds4. Client updates display

Type-ahead Suggest

Issues Posting every keystroke Not caching data Possible slow response time (dial-

ups) Too many results Fancy interface Fast typist (ahead of responses)

Type-ahead Suggest

TypeAhead.htm TypeAhead_static.htm