Weekend MS CS Program Internet and Web Technologies

Weekend MS CS ProgramInternet and Web Technologies Dr. Roy Levow, Associate Chair & Professor Email: roy@cse.fau.edu Phone: 954-236-1170 Web: http://www.cse.fau.edu/~roy COT 5930 Web Project Development - Ajax

Lesson Plan, Session 2 • 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 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 tablekeypad.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 functionality assignKeys() • 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 • 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

Weekend MS CS Program Internet and Web Technologies