1. Does Ajax suck? CS575 Spring 2007 Chanwit Suebsureekul

2. Web History Static content Dynamic content Web application

3. Why Web Application? Easy application deployment Easy application distribution No software to download No installation No update Can be used from anywhere

4. Interactivity Issue Simple request-response model Not so responsive Send request, wait for response Send request, wait for response Full page refresh Full page refresh Ajax comes to rescue

5. What’s Ajax? Asynchronous JavaScript and XML A development technique for creating interactive web applications Makes web pages feel more responsive Exchanges data with the server behind the scenes Partial page update

6. Ajax A combination of technologies XHTML and CSS – page presentation XHTML and CSS – page presentation DOM – dynamic display and interaction DOM – dynamic display and interaction XML – data interchange and manipulation XML – data interchange and manipulation XMLHttpRequest – asynchronous data retrieval XMLHttpRequest – asynchronous data retrieval A JavaScript object Send HTTP request Parse XML response Response can be handled asynchronously with a callback function JavaScript – binding everything together JavaScript – binding everything together

7. Web Application Model

8. Ajax Examples Ajax use: Instant save Instant save Translating services Translating services Smart shopping carts Smart shopping carts Form validation (server side VS client side) Form validation (server side VS client side) Etc. Etc. Web application: Gmail Gmail Google Maps Google Maps Google Docs & Spreadsheets Google Docs & Spreadsheets Etc. Etc.

9. Why Ajax Sucks (Most of the Time) http://www.usabilityviews.com/ajaxsucks.html The fundamental design of the Web is based on having “the page” as the atomic unit of information. The page: the user’s view of the information on the screen the user’s view of the information on the screen the unit of navigation the unit of navigation can be retrieved using the URL can be retrieved using the URL Ajax breaks the concept of “the page”

10. Why Ajax Sucks (contd) Breaks the BACK button The second-most used navigation feature The second-most used navigation feature Users can always get back to the firm ground Users can always get back to the firm ground Breaking the BACK button is no less than a usability catastrophe Breaking the BACK button is no less than a usability catastrophe Requires Ajax-compatible browsers W3C browser usage statistics W3C browser usage statistics W3C browser usage statistics W3C browser usage statistics Print problems

11. Why Ajax Sucks (contd) Authoring problems HTML is easy HTML is easy Ajax is hard to learn that many page authors write buggy code Ajax is hard to learn that many page authors write buggy code Search problems Web spiders will only search for HREF, SRC, or some link tags Web spiders will only search for HREF, SRC, or some link tags They won’t follow Ajax JavaScript code They won’t follow Ajax JavaScript code Related to the URL problem Related to the URL problem

12. Ajax Mistakes Using Ajax for the sake of Ajax Breaking the back button Not giving immediate visual cues for clicking widgets Leaving offline people behind Don’t make me wait for Ajax

13. Ajax Mistakes (contd) Assuming AJAX development is single platform development Too much code makes the browser slow Not having a plan for those who do not enable or have JavaScript Changing parts of the page unexpectedly

14. Ajax Mistakes (contd) Not using links I can pass to friends or bookmark Not cascading local changes to other parts of the page Scrolling the page and making me lose my place Blocking Spidering

15. Why Ajax does NOT suck! Web application VS Website Web application: a program made using web technology Web application: a program made using web technology Website: a bunch of pages linked together Website: a bunch of pages linked together Ajax is intended and most useful for web application, not website Don’t blame the technology used but the person who uses it

16. XMLHttpRequest Usability Guidelines Do not load entire pages Know the difference between a web application and a website Do not break what the user is focusing on Consider how to handle users that cannot see XMLHttpRequest Do use it to eliminate confirmation pages Do not over-use it