weekend ms cs program internet and web technologies l.
Download
Skip this Video
Loading SlideShow in 5 Seconds..
Weekend MS CS Program Internet and Web Technologies PowerPoint Presentation
Download Presentation
Weekend MS CS Program Internet and Web Technologies

Loading in 2 Seconds...

play fullscreen
1 / 22

Weekend MS CS Program Internet and Web Technologies - PowerPoint PPT Presentation


  • 211 Views
  • Uploaded on

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

loader
I am the owner, or an agent authorized to act on behalf of the owner, of the copyrighted work described.
capcha
Download Presentation

PowerPoint Slideshow about 'Weekend MS CS Program Internet and Web Technologies' - Michelle


Download Now 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.While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server.


- - - - - - - - - - - - - - - - - - - - - - - - - - E N D - - - - - - - - - - - - - - - - - - - - - - - - - -
Presentation Transcript
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
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
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
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
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 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-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
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
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
Rico Accordion Example
  • accordion.html
  • Note $(…) returns a reference to the accordion object
laboratory exercise 1
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
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
MVC Example 1
  • Musical keyboard
    • Musical.html
    • CSS for keyboard
    • Dynamic assignment of functionality assignKeys()
    • Full separationmusicaldynKeys.html
observer pattern
Observer Pattern
  • Watches for user input
  • Triggers response
  • mousemat.html
    • What’s wrong?
    • Mousemat observer
server interaction
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
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
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
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 combo19
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
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 suggest21
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 suggest22
Type-ahead Suggest
  • TypeAhead.htm
  • TypeAhead_static.htm