Weekend ms cs program internet and web technologies
1 / 22

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

  • Updated 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

Related searches for Weekend MS CS Program Internet and Web Technologies

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

PowerPoint Slideshow about 'Weekend MS CS Program Internet and Web Technologies' - 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: 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 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


    • 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

  • 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


    • 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