AJAX MIS 424 MIS 424 Professor Sandvig Professor Sandvig

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

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

What is AJAX Data format does not need to be XML Depends upon audience Popular formats: JSON JSON Text Text XML XML CSV CSV Custom Custom

Benefits & Uses Benefits: Richer experience for user Richer experience for user More like using desktop application More like using desktop applicationUses Google Suggest (JSON) Google Suggest (JSON) Google Suggest Google Suggest Kelly Blue Book (Cascading Menus) (JSON) Kelly Blue Book (Cascading Menus) (JSON) Kelly Blue Book Kelly Blue Book REI product image (menu) (JSON) REI product image (menu) (JSON) REI product image REI product image Google Maps (blob) Google Maps (blob) Google Maps Google Maps Amazon (wishlist) (JSON) Amazon (wishlist) (JSON) Amazon MIS 314 bookstore (HTML) MIS 314 bookstore (HTML) MIS 314 bookstore MIS 314 bookstore etc. etc. etc. etc.

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

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, …

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

Do it Yourself Examples JavaScriptJquery XML ZipCodesForCity.asmx AjaxZipCode.aspx (same.asmx) AJAXZipCode.aspx HTMLBookstore JSONAjaxZipCode Home grown CarParts.com

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

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

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

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

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

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