Weekend MS CS ProgramInternet and Web
TechnologiesCOT 5930
Web Project Development - Ajax
Dr. Roy Levow, Associate Chair & Professor
Email: [email protected] 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
