Weekend MS CS Program Internet and Web Technologies COT 5930 Web Project Development - Ajax Dr. Roy Levow, Associate Chair & Professor Phone: Web:

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.htmlcallbacktest.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.jsContentLoader.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 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 functionality assignKeys() Full separation musicaldynKeys.html 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 Simple responses processed on client Server request / response planent browser simple version planent browser 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