AJAXAJAXMIS 424

Professor Sandvig

TodayToday

1.1. What is AJAXWhat is AJAX

2.2. Benefits & UsesBenefits & Uses

3.3. ImplementationImplementation1.1. Do-it-yourselfDo-it-yourself

2.2. Download APIDownload API

3.3. ASP.NET AjaxASP.NET Ajax

4.4. SummarySummary

What is AJAXWhat is AJAX

AcronymAcronym AAsynchronous synchronous JJavaScript avaScript AAnd nd XXMLML

What it isWhat it is JavaScript in web page retrieves data from JavaScript in web page retrieves data from

serverserver Data format is XMLData format is XML Allows partial page refreshAllows partial page refresh

Reduces need to refresh entire pageReduces need to refresh entire page

Benefits & UsesBenefits & Uses

Benefits:Benefits: Richer experience for userRicher experience for user More like using desktop applicationMore like using desktop application

UsesUses Google Suggest Google Maps Cascading Menus (Cascading Menus (Kelly Blue Book)) REI product image (menu is JavaScript) (menu is JavaScript) Google DocsGoogle Docs etc. etc.etc. etc.

ImplementationImplementation

Options:Options:

1.1. Do-it-yourselfDo-it-yourself Lightweight, flexibleLightweight, flexible write or modify JavaScript or jQuerywrite or modify JavaScript or jQuery

2.2. Use APIUse API1.1. Google, Yahoo, Highslide, …Google, Yahoo, Highslide, …

3.3. ASP.NET AJAXASP.NET AJAX drag & drop in VSdrag & drop in VS convenientconvenient adds a lot of code to applicationadds a lot of code to application

Do it yourselfDo it yourself

ClientClientInclude JavaScript or jQuery in web pageInclude JavaScript or jQuery in web page

Requests data from serverRequests data from server

ServerServerWeb service provides dataWeb service provides data

Format: XML, JSON, HTML, …Format: XML, JSON, HTML, …

Do it yourselfDo it yourself

BenefitsBenefits FlexibleFlexible LightweightLightweight

DrawbacksDrawbacks Time consumingTime consuming Some knowledge of JavaScript/jQuerySome knowledge of JavaScript/jQuery

Do it Yourself ExamplesDo it Yourself Examples

JavaScript Jquery

XML ZipCodesForCity.asmx

AJAXZipCode.aspx

CityZipsQueryXml.aspx

HTML Bookstore

JSON AjaxZipCode

Home grown CarParts.com

Use AJAX APIUse AJAX API

Ajax applications written by othersAjax applications written by others Google AJAX APIsGoogle AJAX APIs

SearchSearch

MapsMaps

CalendarCalendar Facebook APIsFacebook APIs

ASP.NET AJAXASP.NET AJAX

ASP.NET provides built-in AJAX ASP.NET provides built-in AJAX functionalityfunctionality

Two flavors:Two flavors: Built into some Data ControlsBuilt into some Data Controls

LimitationsLimitations ScriptManager & Update PanelScriptManager & Update Panel

Very flexibleVery flexible

Server ControlsServer Controls

Built in AJAX functionalityBuilt in AJAX functionality GridView, DetailsView, FormViewGridView, DetailsView, FormView

Property: AllowSortingAndPagingCallbacksProperty: AllowSortingAndPagingCallbacks

BenefitsBenefits Easy to implementEasy to implement

Limitations:Limitations: Controls cannot use templatesControls cannot use templates Inefficient: retrieves all data and discards extraInefficient: retrieves all data and discards extra

UpdatePanelUpdatePanel

UpdatePanelUpdatePanel Wrap any server controlsWrap any server controls Become AJAX enabledBecome AJAX enabled

BenefitsBenefits Easy to implementEasy to implement FlexibilityFlexibility

Mix & match controlsMix & match controls

Specify triggersSpecify triggers

Update PanelUpdate Panel

DisadvantageDisadvantage JavaScript cannot be tweakedJavaScript cannot be tweaked

Fine if it meets your needsFine if it meets your needs HeavyHeavy

All controls are repopulatedAll controls are repopulated

Viewstate also sent/receivedViewstate also sent/received

Example:Example: Cascading Dropdown:Cascading Dropdown:

AjaxAspNet.aspxAjaxAspNet.aspx

SummarySummary

AJAXAJAX

Use to improve user experienceUse to improve user experience Partial page refreshesPartial page refreshes

Options:Options:1.1. Code you ownCode you own

2.2. Use APIsUse APIs

3.3. ASP.NET AJAXASP.NET AJAX