1 / 22

Weekend MS CS Program Internet and Web Technologies

Weekend MS CS Program Internet 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

ernie
Download Presentation

Weekend MS CS Program Internet and Web Technologies

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

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

  2. Lesson Plan, Session 2 • HTTP Request • AJAX design • MVC pattern • Laboratory 1 • MVC in action • Server interaction • Dynamic double combo • Type-ahead suggest

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

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

  5. AJAX Design • Patterns • Common design elements for frequently used components or operations • Refactoring • Write simple code first • Then reorganize to separate patterns for reuse

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

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

  8. Libraries • Cross-browser libraries • Provide common functionality across browsers • X library: general DHTML support • Sarissa: XML JavaScript manipulation • Prototype: Stronger JavaScript O-O support

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

  10. Rico Accordion Example • accordion.html • Note $(…) returns a reference to the accordion object

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

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

  13. MVC Example 1 • Musical keyboard • Musical.html • CSS for keyboard • Dynamic assignment of functionality assignKeys() • Full separationmusicaldynKeys.html

  14. Observer Pattern • Watches for user input • Triggers response • mousemat.html • What’s wrong? • Mousemat observer

  15. 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)

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

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

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

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

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

  21. 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)

  22. Type-ahead Suggest • TypeAhead.htm • TypeAhead_static.htm

More Related