Weekend ms cs program internet and web technologies
Download
1 / 22

Weekend MS CS Program - PowerPoint PPT Presentation


  • 210 Views
  • Updated On :

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

Related searches for Weekend MS CS Program

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' - Michelle


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

Weekend MS CS ProgramInternet 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 l.jpg
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 l.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 service

      xmlHttp=GetXmlHttpObject(stateChanged)

    • stateChanged is called on completion of object load


Http request cont l.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)


Ajax design l.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


Refactoring example l.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


Model view controller pattern l.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


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


Widgets and widget suites l.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


Rico accordion example l.jpg
Rico Accordion Example

  • accordion.html

  • Note $(…) returns a reference to the accordion object


Laboratory exercise 1 l.jpg
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 l.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


Mvc example 1 l.jpg
MVC Example 1

  • Musical keyboard

    • Musical.html

    • CSS for keyboard

    • Dynamic assignment of functionality assignKeys()

    • Full separationmusicaldynKeys.html


Observer pattern l.jpg
Observer Pattern

  • Watches for user input

  • Triggers response

  • mousemat.html

    • What’s wrong?

    • Mousemat observer


Server interaction l.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)


Server side design patterns l.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


Data exchange l.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


Dynamic double combo l.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


Dynamic double combo19 l.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


Type ahead suggest l.jpg
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 l.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)


Type ahead suggest22 l.jpg
Type-ahead Suggest

  • TypeAhead.htm

  • TypeAhead_static.htm


ad