Weekend MS CS Program Internet and Web Technologies

quaggahooliganInternet και Εφαρμογές Web

5 Φεβ 2013 (πριν από 4 χρόνια και 6 μήνες)

323 εμφανίσεις

Weekend MS CS Program

Internet and Web Technologies

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

2.
AJAX design

3.
MVC pattern

4.
Laboratory 1

5.
MVC in action

6.
Server interaction

7.
Dynamic double combo

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


Server
-
side but in different languages


Backbase Presentation Server


Uses custom tags to markup UI
components


Echo
2


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


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 character

2.
Type
-
ahead passes request to server

3.
Server responds

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