Ryan Putz

Outline  What is Ajax?  Member Technologies  Methodology  When and When Not To Use  Who’s Using Ajax?  Code Examples

What Is Ajax?  Asynchronous JavaScript And XML  Collection of technologies combined with a particular methodology.  Term first coined by Jesse James Garrett in an article he wrote in 2005

History  1990’s – Web pages were based off of complete HTML pages  1995 – First version of the Java language released which included Java Applets.

History (cont.)  1996 – Microsoft introduces the iFrame element to HTML.  1999 – Dynamic update of news stories and stock quotes on MSN.com  1999 – Creation of the XMLHttp ActiveX control. Later adapted into the XMLHttpRequest JavaScript object.

History(cont.) 2000 – Outlook Web Access 2002 – Oddpost  2004 – Gmail  2005 – Google Maps  2005 – Jesse James Garrett’s article: “Ajax: A New Approach to Web Applications”  2006 – W3C released the first draft specification for the XMLHttpRequest object

Member Technologies  HTML (or XHTML) and CSS  The Document Object Model (DOM)  XML and XLST  The XMLHttpRequest object  JavaScript

Methodology  Overall goal: Make web applications as responsive as desktop applications.  Increase efficiency of data interchange between client and server.  Reduce size of server requests from client(s).

Methodology(cont.)  Added Ajax engine on client side.  Increases responsiveness of application.  Request queuing.  Differentiation of client requests.

Methodology(cont.)

Syntax Elements  Additional HTML elements  ScriptManager  UpdatePanel  Triggers

Syntax Elements(cont.)  Code Behind for HTML  Event Handlers  public partial class _Default : System.Web.UI.Page { protected void Button1_Click(object sender, EventArgs e) { Label1.Text = DateTime.Now.ToLongTimeString(); Label2.Text = DateTime.Now.ToLongTimeString(); } protected void Button2_Click(object sender, EventArgs e) { Label1.Text = DateTime.Now.ToLongTimeString(); } }

When to Use Ajax  Frequently updated controls  Database interaction  Small changes & updates  Forums  Ticker Tape  Progress Bars

When NOT to Use Ajax  Chat Programs.  Ajax is not accessible.  Ajax is not verbose.  No guarantee of efficiency.

What to Avoid  High frequency updates  Tabbed content  Large quantities of data  Unnecessary updates

Who’s Using Ajax?  Google – Maps, Suggest, Mail  Flickr  Amazon  Meebo  Facebook  Twitter

Drawbacks  Pre-HTML5 browsers  Difficult to bookmark and return to particular state of application  Requires XMLHttpRequest and Javascript support.  Ajax-heavy interfaces may impose heavy processing loads on browser

Conlussion  Ajax is a powerful tool that brings many options to the table for web developers.

References Garrett, Jesse. "Ajax: A New Approach to Web Applications." Ideas. Adaptive Path, 18 Feb Web. 12 Mar "Ajax(programming)." Wikipedia, the free encyclopedia. Wikipedia, 26 Jan Web. 01 Mar "Google Code." Google. Google, Web. 01 Mar "Introduction to the UpdatePanel Control." MSDN. Microsoft Corporation, n.d. Web. 20 Apr < Cate, Scott. "Understanding ASP.NET AJAX UpdatePanel Triggers." Microsoft ASP.Net. Microsoft Corporation, March 12, Web. 20 Apr

Questions?