1. AJAX MIS 424 MIS 424 Professor Sandvig Professor Sandvig

2. Today 1.What is AJAX 2.Benefits & Uses 3.Implementation 1. Do-it-yourself 2. Download API 3. ASP.NET Ajax 4.Summary

3. What is AJAX Acronym Asynchronous JavaScript And XML Asynchronous JavaScript And XML What it is JavaScript in web page retrieves data from server JavaScript in web page retrieves data from server Data format is XML Data format is XML Allows partial page refresh Allows partial page refresh Reduces need to refresh entire page

4. Benefits & Uses Benefits: Richer experience for user Richer experience for user More like using desktop application More like using desktop applicationUses Google Suggest Google Suggest Google Suggest Google Suggest Google Maps Google Maps Google Maps Google Maps Cascading Menus (Kelly Blue Book) Cascading Menus (Kelly Blue Book)Kelly Blue BookKelly Blue Book REI product image (menu is JavaScript) REI product image (menu is JavaScript) REI product image REI product image Google Docs Google Docs etc. etc. etc. etc.

5. Implementation Options: 1.Do-it-yourself Lightweight, flexible Lightweight, flexible write or modify JavaScript or jQuery write or modify JavaScript or jQuery 2.Use API 1. Google, Yahoo, Highslide, … 3.ASP.NET AJAX drag & drop in VS drag & drop in VS convenient convenient adds a lot of code to application adds a lot of code to application

6. Do it yourself Client Client Include JavaScript or jQuery in web page Requests data from server Server Server Web service provides data Format: XML, JSON, HTML, …

7. Do it yourself Benefits Flexible Flexible Lightweight LightweightDrawbacks Time consuming Time consuming Some knowledge of JavaScript/jQuery Some knowledge of JavaScript/jQuery

8. Do it Yourself Examples JavaScriptJquery XML ZipCodesForCity.asmx AJAXZipCode.aspx CityZipsQueryXml.aspx HTMLBookstore JSONAjaxZipCode Home grown CarParts.com

9. Use AJAX API Ajax applications written by others Google AJAX APIs Google AJAX APIs Google AJAX APIs Google AJAX APIsSearchMaps Calendar Facebook APIs Facebook APIs Facebook APIs Facebook APIs

10. ASP.NET AJAX ASP.NET provides built-in AJAX functionality Two flavors: Built into some Data Controls Built into some Data ControlsLimitations ScriptManager & Update Panel ScriptManager & Update Panel Very flexible

11. Server Controls Built in AJAX functionality GridView, DetailsView, FormView GridView, DetailsView, FormView Property: AllowSortingAndPagingCallbacks Benefits Easy to implement Easy to implementLimitations: Controls cannot use templates Controls cannot use templates Inefficient: retrieves all data and discards extra Inefficient: retrieves all data and discards extra

12. UpdatePanel UpdatePanel Wrap any server controls Wrap any server controls Become AJAX enabled Become AJAX enabledBenefits Easy to implement Easy to implement Flexibility Flexibility Mix & match controls Specify triggers

13. Update Panel Disadvantage JavaScript cannot be tweaked JavaScript cannot be tweaked Fine if it meets your needs Heavy Heavy All controls are repopulated Viewstate also sent/received Example: Cascading Dropdown: Cascading Dropdown: AjaxAspNet.aspx

14. Summary AJAX Use to improve user experience Partial page refreshes Partial page refreshesOptions: 1. Code you own 2. Use APIs 3. ASP.NET AJAX