user interaction: ajax basics djp3/classes/2011_09_inf133/lectures/lec · pdf file...

Click here to load reader

Post on 22-Aug-2020

0 views

Category:

Documents

0 download

Embed Size (px)

TRANSCRIPT

  • User Interaction: AJAX Basics

    Asst. Professor Donald J. Patterson INF 133 Fall 2011

    1 Monday, October 10, 11

  • AJAX

    Building a rich client is harder than building a web page

    AJAX in action:Crane

    Monday, October 10, 11

  • AJAX

    rich client

    AJAX in action:Crane

    Monday, October 10, 11

  • AJAX

    rich client

    AJAX in action:Crane

    Monday, October 10, 11

  • AJAX

    Why have so many non-rich web pages been successful?

    AJAX in action:Crane

    Monday, October 10, 11

  • AJAX

    Why are those limitations present?

    AJAX in action:Crane

    Monday, October 10, 11

  • AJAX

    What can we do to overcome network latency?

    AJAX in action:Crane

    Monday, October 10, 11

  • AJAX

    What does this enable?

    AJAX in action:Crane

    Monday, October 10, 11

  • AJAX

    • Defining principles of AJAX

    AJAX in action:Crane

    1.Browser hosts an application, not content 2.Server delivers data not content 3.User interaction with the application can be fluid

    and continuous 4.This is real coding

    Monday, October 10, 11

  • AJAX

    1.Browser hosts an application, not content

    AJAX in action:Crane

    •Web 1.0 model • every page is new content •Web 2.0 model • download a program at first • every page is new data • Some server functionality is moved to browser • example, the shopping basket is in the client

    Monday, October 10, 11

  • AJAX AJAX in action:Crane

    1.Browser hosts an application, not content

    HTML

    HTML

    HTML

    HTML

    Monday, October 10, 11

  • AJAX

    • Browser hosts an application, not content

    AJAX in action:Crane

    HTML Javascript

    XML XML XML XML XML

    HTML

    Monday, October 10, 11

  • AJAX

    2.Server delivers data not content

    AJAX in action:Crane

    Web 1.0

    Monday, October 10, 11

  • AJAX

    2.Server delivers data not content

    AJAX in action:Crane

    Web 2.0

    Monday, October 10, 11

  • AJAX

    2.Server delivers data not content

    AJAX in action:Crane

    Monday, October 10, 11

  • AJAX

    3.User interaction with the application can be fluid and continuous

    AJAX in action:Crane

    • Typically when a page is submitting data, the user is in limbo

    • Use the shopping cart example •Google Suggest • Sovereign versus Transient Applications

    Monday, October 10, 11

  • AJAX

    4.This is real coding

    AJAX in action:Crane

    • jQuery (http://jquery.com) • Prototype (http://www.prototypejs.org/) • ExtJS (http://www.extjs.com/) • very good for prebuilt themes and controls, but not

    very customizable

    • YUI (http://developer.yahoo.com/yui/) •MooTools (http://mootools.net/) - very compact,

    much smaller than the others

    • Dojo (http://dojotoolkit.org/)

    Monday, October 10, 11

    http://jquery.com/ http://jquery.com/ http://www.prototypejs.org/ http://www.prototypejs.org/ http://www.extjs.com/ http://www.extjs.com/ http://developer.yahoo.com/yui/ http://developer.yahoo.com/yui/ http://mootools.net/ http://mootools.net/ http://dojotoolkit.org/ http://dojotoolkit.org/

  • AJAX

    • Some good resources

    AJAX in action:Crane

    • http://www.ibm.com/developerworks/views/xml/ libraryview.jsp?search_by=XML+processing+in+Ajax

    Monday, October 10, 11

    http://www.ibm.com/developerworks/views/xml/libraryview.jsp?search_by=XML+processing+in+Ajax http://www.ibm.com/developerworks/views/xml/libraryview.jsp?search_by=XML+processing+in+Ajax http://www.ibm.com/developerworks/views/xml/libraryview.jsp?search_by=XML+processing+in+Ajax http://www.ibm.com/developerworks/views/xml/libraryview.jsp?search_by=XML+processing+in+Ajax

  • Monday, October 10, 11