February 2008 BAND Gig

AJAX: What It Is, How Cool It

Is and How You Can Use It

Today

Greg Howe, MCAD

Agenda

• What AJAX is and what it isn't

• How some big sites are using it

• How you can use it in VS2005−The AJAX Control Toolkit−How to create a new AJAX-ified web app−How to AJAX-ify your existing web apps−How to take AJAX to the next level

What AJAX is and what it isn't• Is = Asynchronous Javascript And XML

• Is Not = Something to clean clothes or

dishes, though you can make your

Windows look cleaner (groan)

• Is = A powerful and easy way to make web

pages more interactive and responsive

• Is Not = A Microsoft thing

How some big sites are using it• Google Maps, maps.live.com, etc

−Can drag a map and it calls down to server to get new map squares on the fly based on your moving around

• Netflix−Mouse over a movie cover to read info on the

movie

• Flickr−Has several places, like their geotagging map

AJAX-ify!

• You can use AJAX on your web

pages several ways:−Buy 3rd party controls like those from

ComponentArt that have their own AJAX implementations. Drop and go!

−Buy 3rd party AJAX frameworks for their versions of update panels, etc.

−Use Microsoft’s implementation

The AJAX Control Toolkit

• Cool web controls that use AJAX or even

just Javascript

• Accordian, Hover Menu Extender, etc

• Demo

• AJAX? DHTML? Kinda both…oh well!

• Don’t need to use these controls to use

AJAX in your apps. They’re just controls.

AJAX-ify!

• Consider what parts of your page will

benefit from posting back to the server

without a full page refresh

• Consider how you get the data you are

refreshing – page method vs. web

service−Page method is easy but has resource

ramifications, esp. on high volume page−Web service is a little more complicated but

tighter and less resource-intensive

AJAX-ify!

• Note you need to be sure your web

server has the AJAX Extensions 1.0

installed if you use the Microsoft

implementation. Just ‘cause you do,

doesn’t mean they do!−Most site hosts have it installed these

days so you should be able to take advantage with sites you have today

AJAX-ify!

• To use the Control Toolkit on a live

website you just need Microsoft’s

implementation installed on the

server plus the Toolkit DLL in your

bin folder.

Using Microsoft’s Implementation

• Install the AJAX Extensions 1.0

• Install the vsi

• Optionally install the Control Toolkit

• Start up Visual Studio and voila!

Install AJAX Extensions 1.0

• Download/install AJAX Extensions 1.0−http://www.asp.net/ajax/downloads, and

go to the “ASP.NET AJAX Downloads for ASP.NET 2.0” section

−This will install the server side of things: something for your client-side javascript to hook into and allow you to process partial page postbacks! Key parts are the UpdatePanel and ScriptManager.

−Has a vsi to install projects and parts into Visual Studio

Install AJAX Control Toolkit

• Download/install the toolkit−http://www.asp.net/ajax/downloads, go to

the “ASP.NET AJAX Optional Components” section and click the “Download the Control Toolkit” button.

−Be sure to grab the right release for your version of Visual Studio.

−Unzip the file into a folder on your machine.

−Grab the AjaxControlToolkit.dll file from the samples’ bin folder and put into your app’s bin

Install AJAX Control Toolkit

• Tip – to add the controls to your

toolbox, right-click your toolbox and

add a new tab. Then right-click in

there and select “Choose Items…”

and browse to the folder where you

unzipped the toolkit and go to the

sample bin (not your web app’s bin)

where the dll is and choose that file.

There you have them!

How to create a new AJAX-ified web app• Download/install AJAX Extensions

1.0

• Start up Visual Studio and choose

Create Web Site and select either

“ASP.NET AJAX-Enabled Web Site” or

“AJAX Control Toolkit Web Site” (the

latter under “My Templates”)

How to create a new AJAX-ified web app

How to AJAX-ify your existing web apps

• You still have to install the pieces –

AJAX Extensions and Toolkit (optional)

• The big deal is your web.config file. It

needs several sections in order to tie

AJAX in.−See http://www.asp.net/learn/ajax-

videos/video-81.aspx for a great video on it

How to AJAX-ify your existing web apps

• Easiest and best thing is to create a

new AJAX Enabled Web Site and steal

sections of its web.config−“configSections” section−“controls” section under “pages” section−“assemblies” under “compilation”−“httpHandlers” and “httpModules”

sections−“system.web.extensions” and

“system.webServer” sections

How to AJAX-ify your existing web apps• Now pop an UpdatePanel on your web

page and put standard web controls in

it

• Items inside the UpdatePanel that

trigger postback will use AJAX

automagically (no coding needed)

• Items outside the UpdatePanel can

trigger postback of the panel via

Triggers section of the UpdatePanel

How to AJAX-ify your existing web apps

Demo

How to take AJAX to the next level• Write JavaScript routines that use the

AJAX libraries

• Write web services and page methods−must be static (C#) or shared (VB)

• Call web/page methods directly to get

data then you put data into page

• Think outside the box and make

something cool!

How to take AJAX to the next level• You have to add your web services to the

ScriptManager

• You have to set your methods to use

scripting or can’t get there from Javascript

• You use the $get command to tie to your

objects on the page

• You call the web/page method by object

name as you would in code

• Demo

Best Practices and Gotchas

• Security−Though the Page object can be used, often

you are using a web service to get data so be sure to lock the service and data too!• GetAccountInfo(acctNum) = Yikes!

−Always lock services. They are open on the web by themselves even if in your web app.

−Must call non-domain web services via a web service on your domain

Best Practices and Gotchas

• Speed−If speed is essential, use PageMethod

or direct Javascript calls−Throttle your results (don’t return

1,000,000 rows just cause you can!)−Cache results in the web service

Best Practices and Gotchas

• Traffic volume−Be aware of how many calls an AJAX app

makes back to the server• 100 users on an app at one time, checking for

stock ticker data every second via AJAX = 100 hits/sec every second!

• Our zip code finder – 4 key hits in 3 seconds is 4 hits…times 100 users is 400 hits in 3 seconds.

−Be aware that page methods post back ENTIRE page, including ViewState! 48K requests possible per AJAX call!

Summary• AJAX frameworks encapsulate the complex stuff

and provide simple ways to make your web apps

interactive

• Microsoft gives you framework, plus a toolkit of

controls if you want (and source code too!)

• Minimal Javascript code allows you to be faster

and more explicit in rendering results

• YOU CAN DO THIS – can be simple and attractive

right out of the box, or can get more complex

and interactive as you wish. Just go do it!

More Information

• Free AJAX training at Microsoft e-

Learning

(http://www.microsoftelearning.com)

• http://ajax.asp.net

• http://www.asp.net/ajax/documentation

has great video tutorials on all of this,

plus good docs to read on it

Other Resources

• http://www.ajaxload.info

where you can create cool loading

gifs

Q & A

THANK YOU for coming! Contact

me directly with questions or

comments:

Greg Howe

gthowe@gwi.net