Transcript Session 2 notes - FAU College of Engineering

Weekend MS CS Program
Internet and Web Technologies
COT 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.
2.
3.
4.
5.
6.
7.
8.
HTTP Request
AJAX design
MVC pattern
Laboratory 1
MVC in action
Server interaction
Dynamic double combo
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 service

xmlHttp=GetXmlHttpObject(stateChanged)

stateChanged is called on completion of
object load
HTTP Request (cont.)

Example: callbacktest.html
Callback assigned to
onreadystatechange
is 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


Backbase Presentation Server


Server-side but in different languages
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 functionality
assignKeys()
 Full separation
musicaldynKeys.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


Server request / response


Simple responses processed on client
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 dropdown 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.
2.
3.
4.
You type a character
Type-ahead passes request to server
Server responds
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
