![Page 1: User Interaction: AJAX Basicsdjp3/classes/2011_09_INF133/Lectures/Lec… · •Web 1.0 model •every page is new ... Web 2.0 Monday, October 10, 11. AJAX 2.Server delivers data not](https://reader035.vdocuments.us/reader035/viewer/2022081614/5fcfa997dff9c558af665bf4/html5/thumbnails/1.jpg)
User Interaction:AJAX Basics
Asst. Professor Donald J. PattersonINF 133 Fall 2011
1Monday, October 10, 11
![Page 2: User Interaction: AJAX Basicsdjp3/classes/2011_09_INF133/Lectures/Lec… · •Web 1.0 model •every page is new ... Web 2.0 Monday, October 10, 11. AJAX 2.Server delivers data not](https://reader035.vdocuments.us/reader035/viewer/2022081614/5fcfa997dff9c558af665bf4/html5/thumbnails/2.jpg)
AJAX
Building a rich client is harder than building a web page
AJAX in action:Crane
Monday, October 10, 11
![Page 3: User Interaction: AJAX Basicsdjp3/classes/2011_09_INF133/Lectures/Lec… · •Web 1.0 model •every page is new ... Web 2.0 Monday, October 10, 11. AJAX 2.Server delivers data not](https://reader035.vdocuments.us/reader035/viewer/2022081614/5fcfa997dff9c558af665bf4/html5/thumbnails/3.jpg)
AJAX
rich client
AJAX in action:Crane
Monday, October 10, 11
![Page 4: User Interaction: AJAX Basicsdjp3/classes/2011_09_INF133/Lectures/Lec… · •Web 1.0 model •every page is new ... Web 2.0 Monday, October 10, 11. AJAX 2.Server delivers data not](https://reader035.vdocuments.us/reader035/viewer/2022081614/5fcfa997dff9c558af665bf4/html5/thumbnails/4.jpg)
AJAX
rich client
AJAX in action:Crane
Monday, October 10, 11
![Page 5: User Interaction: AJAX Basicsdjp3/classes/2011_09_INF133/Lectures/Lec… · •Web 1.0 model •every page is new ... Web 2.0 Monday, October 10, 11. AJAX 2.Server delivers data not](https://reader035.vdocuments.us/reader035/viewer/2022081614/5fcfa997dff9c558af665bf4/html5/thumbnails/5.jpg)
AJAX
Why have so many non-rich web pages been successful?
AJAX in action:Crane
Monday, October 10, 11
![Page 6: User Interaction: AJAX Basicsdjp3/classes/2011_09_INF133/Lectures/Lec… · •Web 1.0 model •every page is new ... Web 2.0 Monday, October 10, 11. AJAX 2.Server delivers data not](https://reader035.vdocuments.us/reader035/viewer/2022081614/5fcfa997dff9c558af665bf4/html5/thumbnails/6.jpg)
AJAX
Why are those limitations present?
AJAX in action:Crane
Monday, October 10, 11
![Page 7: User Interaction: AJAX Basicsdjp3/classes/2011_09_INF133/Lectures/Lec… · •Web 1.0 model •every page is new ... Web 2.0 Monday, October 10, 11. AJAX 2.Server delivers data not](https://reader035.vdocuments.us/reader035/viewer/2022081614/5fcfa997dff9c558af665bf4/html5/thumbnails/7.jpg)
AJAX
What can we do to overcome network latency?
AJAX in action:Crane
Monday, October 10, 11
![Page 8: User Interaction: AJAX Basicsdjp3/classes/2011_09_INF133/Lectures/Lec… · •Web 1.0 model •every page is new ... Web 2.0 Monday, October 10, 11. AJAX 2.Server delivers data not](https://reader035.vdocuments.us/reader035/viewer/2022081614/5fcfa997dff9c558af665bf4/html5/thumbnails/8.jpg)
AJAX
What does this enable?
AJAX in action:Crane
Monday, October 10, 11
![Page 9: User Interaction: AJAX Basicsdjp3/classes/2011_09_INF133/Lectures/Lec… · •Web 1.0 model •every page is new ... Web 2.0 Monday, October 10, 11. AJAX 2.Server delivers data not](https://reader035.vdocuments.us/reader035/viewer/2022081614/5fcfa997dff9c558af665bf4/html5/thumbnails/9.jpg)
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
![Page 10: User Interaction: AJAX Basicsdjp3/classes/2011_09_INF133/Lectures/Lec… · •Web 1.0 model •every page is new ... Web 2.0 Monday, October 10, 11. AJAX 2.Server delivers data not](https://reader035.vdocuments.us/reader035/viewer/2022081614/5fcfa997dff9c558af665bf4/html5/thumbnails/10.jpg)
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
![Page 11: User Interaction: AJAX Basicsdjp3/classes/2011_09_INF133/Lectures/Lec… · •Web 1.0 model •every page is new ... Web 2.0 Monday, October 10, 11. AJAX 2.Server delivers data not](https://reader035.vdocuments.us/reader035/viewer/2022081614/5fcfa997dff9c558af665bf4/html5/thumbnails/11.jpg)
AJAX AJAX in action:Crane
1.Browser hosts an application, not content
HTML
HTML
HTML
HTML
Monday, October 10, 11
![Page 12: User Interaction: AJAX Basicsdjp3/classes/2011_09_INF133/Lectures/Lec… · •Web 1.0 model •every page is new ... Web 2.0 Monday, October 10, 11. AJAX 2.Server delivers data not](https://reader035.vdocuments.us/reader035/viewer/2022081614/5fcfa997dff9c558af665bf4/html5/thumbnails/12.jpg)
AJAX
• Browser hosts an application, not content
AJAX in action:Crane
HTMLJavascript
XML
XML
XML
XML
XML
HTML
Monday, October 10, 11
![Page 13: User Interaction: AJAX Basicsdjp3/classes/2011_09_INF133/Lectures/Lec… · •Web 1.0 model •every page is new ... Web 2.0 Monday, October 10, 11. AJAX 2.Server delivers data not](https://reader035.vdocuments.us/reader035/viewer/2022081614/5fcfa997dff9c558af665bf4/html5/thumbnails/13.jpg)
AJAX
2.Server delivers data not content
AJAX in action:Crane
Web 1.0
Monday, October 10, 11
![Page 14: User Interaction: AJAX Basicsdjp3/classes/2011_09_INF133/Lectures/Lec… · •Web 1.0 model •every page is new ... Web 2.0 Monday, October 10, 11. AJAX 2.Server delivers data not](https://reader035.vdocuments.us/reader035/viewer/2022081614/5fcfa997dff9c558af665bf4/html5/thumbnails/14.jpg)
AJAX
2.Server delivers data not content
AJAX in action:Crane
Web 2.0
Monday, October 10, 11
![Page 15: User Interaction: AJAX Basicsdjp3/classes/2011_09_INF133/Lectures/Lec… · •Web 1.0 model •every page is new ... Web 2.0 Monday, October 10, 11. AJAX 2.Server delivers data not](https://reader035.vdocuments.us/reader035/viewer/2022081614/5fcfa997dff9c558af665bf4/html5/thumbnails/15.jpg)
AJAX
2.Server delivers data not content
AJAX in action:Crane
Monday, October 10, 11
![Page 16: User Interaction: AJAX Basicsdjp3/classes/2011_09_INF133/Lectures/Lec… · •Web 1.0 model •every page is new ... Web 2.0 Monday, October 10, 11. AJAX 2.Server delivers data not](https://reader035.vdocuments.us/reader035/viewer/2022081614/5fcfa997dff9c558af665bf4/html5/thumbnails/16.jpg)
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
![Page 17: User Interaction: AJAX Basicsdjp3/classes/2011_09_INF133/Lectures/Lec… · •Web 1.0 model •every page is new ... Web 2.0 Monday, October 10, 11. AJAX 2.Server delivers data not](https://reader035.vdocuments.us/reader035/viewer/2022081614/5fcfa997dff9c558af665bf4/html5/thumbnails/17.jpg)
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
![Page 18: User Interaction: AJAX Basicsdjp3/classes/2011_09_INF133/Lectures/Lec… · •Web 1.0 model •every page is new ... Web 2.0 Monday, October 10, 11. AJAX 2.Server delivers data not](https://reader035.vdocuments.us/reader035/viewer/2022081614/5fcfa997dff9c558af665bf4/html5/thumbnails/18.jpg)
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
![Page 19: User Interaction: AJAX Basicsdjp3/classes/2011_09_INF133/Lectures/Lec… · •Web 1.0 model •every page is new ... Web 2.0 Monday, October 10, 11. AJAX 2.Server delivers data not](https://reader035.vdocuments.us/reader035/viewer/2022081614/5fcfa997dff9c558af665bf4/html5/thumbnails/19.jpg)
Monday, October 10, 11