weekend ms cs program internet and web technologies
DESCRIPTION
Weekend MS CS Program Internet and Web Technologies. Dr. Roy Levow, Associate Chair & Professor Email: [email protected] 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 - PowerPoint PPT PresentationTRANSCRIPT
![Page 1: Weekend MS CS Program Internet and Web Technologies](https://reader036.vdocuments.site/reader036/viewer/2022062309/56815b78550346895dc974d6/html5/thumbnails/1.jpg)
Weekend MS CS ProgramInternet and Web
TechnologiesCOT 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
![Page 2: Weekend MS CS Program Internet and Web Technologies](https://reader036.vdocuments.site/reader036/viewer/2022062309/56815b78550346895dc974d6/html5/thumbnails/2.jpg)
Lesson Plan, Session 2
1. HTTP Request2. AJAX design3. MVC pattern4. Laboratory 15. MVC in action6. Server interaction7. Dynamic double combo8. Type-ahead suggest
![Page 3: Weekend MS CS Program Internet and Web Technologies](https://reader036.vdocuments.site/reader036/viewer/2022062309/56815b78550346895dc974d6/html5/thumbnails/3.jpg)
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 servicexmlHttp=GetXmlHttpObject(stateChanged)
stateChanged is called on completion of object load
![Page 4: Weekend MS CS Program Internet and Web Technologies](https://reader036.vdocuments.site/reader036/viewer/2022062309/56815b78550346895dc974d6/html5/thumbnails/4.jpg)
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)
![Page 5: Weekend MS CS Program Internet and Web Technologies](https://reader036.vdocuments.site/reader036/viewer/2022062309/56815b78550346895dc974d6/html5/thumbnails/5.jpg)
AJAX Design
Patterns Common design elements for
frequently used components or operations
Refactoring Write simple code first Then reorganize to separate
patterns for reuse
![Page 6: Weekend MS CS Program Internet and Web Technologies](https://reader036.vdocuments.site/reader036/viewer/2022062309/56815b78550346895dc974d6/html5/thumbnails/6.jpg)
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
![Page 7: Weekend MS CS Program Internet and Web Technologies](https://reader036.vdocuments.site/reader036/viewer/2022062309/56815b78550346895dc974d6/html5/thumbnails/7.jpg)
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
![Page 8: Weekend MS CS Program Internet and Web Technologies](https://reader036.vdocuments.site/reader036/viewer/2022062309/56815b78550346895dc974d6/html5/thumbnails/8.jpg)
Libraries
Cross-browser libraries Provide common functionality
across browsers X library: general DHTML support Sarissa: XML JavaScript
manipulation Prototype: Stronger JavaScript O-O
support
![Page 9: Weekend MS CS Program Internet and Web Technologies](https://reader036.vdocuments.site/reader036/viewer/2022062309/56815b78550346895dc974d6/html5/thumbnails/9.jpg)
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
![Page 10: Weekend MS CS Program Internet and Web Technologies](https://reader036.vdocuments.site/reader036/viewer/2022062309/56815b78550346895dc974d6/html5/thumbnails/10.jpg)
Rico Accordion Example
accordion.html Note $(…) returns a reference to
the accordion object
![Page 11: Weekend MS CS Program Internet and Web Technologies](https://reader036.vdocuments.site/reader036/viewer/2022062309/56815b78550346895dc974d6/html5/thumbnails/11.jpg)
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
![Page 12: Weekend MS CS Program Internet and Web Technologies](https://reader036.vdocuments.site/reader036/viewer/2022062309/56815b78550346895dc974d6/html5/thumbnails/12.jpg)
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
![Page 13: Weekend MS CS Program Internet and Web Technologies](https://reader036.vdocuments.site/reader036/viewer/2022062309/56815b78550346895dc974d6/html5/thumbnails/13.jpg)
MVC Example 1
Musical keyboard Musical.html CSS for keyboard Dynamic assignment of
functionalityassignKeys()
Full separationmusicaldynKeys.html
![Page 14: Weekend MS CS Program Internet and Web Technologies](https://reader036.vdocuments.site/reader036/viewer/2022062309/56815b78550346895dc974d6/html5/thumbnails/14.jpg)
Observer Pattern
Watches for user input Triggers response mousemat.html
What’s wrong? Mousemat observer
![Page 15: Weekend MS CS Program Internet and Web Technologies](https://reader036.vdocuments.site/reader036/viewer/2022062309/56815b78550346895dc974d6/html5/thumbnails/15.jpg)
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)
![Page 16: Weekend MS CS Program Internet and Web Technologies](https://reader036.vdocuments.site/reader036/viewer/2022062309/56815b78550346895dc974d6/html5/thumbnails/16.jpg)
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
![Page 17: Weekend MS CS Program Internet and Web Technologies](https://reader036.vdocuments.site/reader036/viewer/2022062309/56815b78550346895dc974d6/html5/thumbnails/17.jpg)
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
![Page 18: Weekend MS CS Program Internet and Web Technologies](https://reader036.vdocuments.site/reader036/viewer/2022062309/56815b78550346895dc974d6/html5/thumbnails/18.jpg)
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
![Page 19: Weekend MS CS Program Internet and Web Technologies](https://reader036.vdocuments.site/reader036/viewer/2022062309/56815b78550346895dc974d6/html5/thumbnails/19.jpg)
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
![Page 20: Weekend MS CS Program Internet and Web Technologies](https://reader036.vdocuments.site/reader036/viewer/2022062309/56815b78550346895dc974d6/html5/thumbnails/20.jpg)
Type-ahead Suggest
Characteristics Google suggest Application responds as you type
1. You type a character2. Type-ahead passes request to server3. Server responds4. Client updates display
![Page 21: Weekend MS CS Program Internet and Web Technologies](https://reader036.vdocuments.site/reader036/viewer/2022062309/56815b78550346895dc974d6/html5/thumbnails/21.jpg)
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)
![Page 22: Weekend MS CS Program Internet and Web Technologies](https://reader036.vdocuments.site/reader036/viewer/2022062309/56815b78550346895dc974d6/html5/thumbnails/22.jpg)
Type-ahead Suggest
TypeAhead.htm TypeAhead_static.htm