AJAX (Asynchronous JavaScript And XML)

Title:

“AJAX: …A- WHAT? … And WHAT Can It Do For Me? ?? ???”

Speaker:

Aydin Akcasu, aakcasu@gmail.com, 734-455-0719

Date:

Wednesday April 5, 2006

Summary:

Web sites usually followed the same pattern: Display information, the user makes a change, information gets updated, and the process continues.

AJAX (Asynchronous JavaScript And XML) is the latest buzzword to change all that.

Conventional websites send data back to the server, where updated data is processed and a new page is send back to the client (browser), where the cycle repeats.

AJAX allows the page to be updated WITHOUT reloading or refreshing the page.

You may already be using it on the web without realizing it (Gmail, Google Maps, Google Suggest). Notice how the pages at these sites do not refresh.

In this talk, Aydin will demonstrate the basic concepts of AJAX, with many code examples using AJAX technology.

Detail:

For example, consider a webpage where you used pull down menus to specify a country, state, city.

The conventional process would be the following.

· Webpage (first load from the server) comes up with ‘Country’ menu populated. Since the ‘Country’ menu item has not been selected yet, the ‘State’ or ‘City’ menus are not populated, or possibly not displayed at all.

· User selects a ‘Country’.

· Now that the ‘Country’ data has been specified, the webpage refreshes (second reload from the server), and populates the ‘State’ menu, for that particular ‘Country’. Since the ‘State’ menu item has not been selected yet, the ‘City’ menus are not populated, or possibly not displayed at all.

· User selects a ‘State’.

· Now that the ‘Country/State’ data has been specified, the webpage refreshes again (third reload from the server), and populates the ‘City’ menu for that particular ‘Country/State’ combination.

· User selects a ‘City’.

· Now that the ‘Country/State/City’ data has been specified. The webpage refreshes again (reload trip from the server), and the location information has been input.

Whereas conventional websites send data back to the server, where updated data is processed and a new complete web page is send back to the client (browser), AJAX allows the page to be updated WITHOUT reloading or refreshing the page.

AJAX simplifies the prior example:

· User selects a ‘Country’.

· Now that the ‘Country’ data has been specified, this data is sent back to the server behind the scenes, and refreshes and populates JUST the ‘State’ menu, for that particular ‘Country’. Since the ‘State’ menu item has not been selected yet, the ‘City’ menus are not populated, or possibly not displayed at all.

· User selects a ‘State’.

· Now that the ‘Country/State’ data has been specified, this data is sent back to the server behind the scenes, and refreshes and populates JUST the ‘City’ menu, for that particular ‘Country/State’.

· User selects a ‘City’.

· Now that the ‘Country/State/City’ data has been specified. The webpage refreshes again (second reload from the server), and the location information has been input.

About Me:

Aydin Akcasu is the founder of A Vision, Inc (www.A-Vision-Inc.com). He has over 20 years of experience, and provides innovative solutions using technologies such as Java, JavaScript, ASP, Visual Basic, VB.Net, C#.Net, ASP.Net, Flash, XML, XSL.

He has given presentations and classes in the past to local groups (as well as in India) in topics such as ‘Help, I need to learn Javascript’, ‘Cover you ASP’, ‘VB- What is it good for?‘, ‘FLASH-in-the-Pants?’, ‘C#, ASP.Net on a Budget’, ‘Introduction to ‘C#.Net’.

He is also a part time instructor at Washtenaw Community College (www.wccnet.edu). He will teach another 15 week course titled ‘C#.Net’ (http://www.wccnet.edu/academicinfo/creditofferings/courses/course.php?course=CPS%20293) this Fall 2006, and a new advanced C# class next winter ‘Advanced C#.Net’.