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

 <asp:ScriptManager EnablePartialRendering="true" ID="ScriptManager1" runat="server"></asp:ScriptManager>

 <asp:UpdatePanel ID="UpdatePanel1" runat="server" UpdateMode="Conditional"> <ContentTemplate> <asp:Label ID="Label1" runat="server" /><br /> <asp:Button ID="Button1" runat="server" Text="Update Both Panels" OnClick="Button1_Click" /> <asp:Button ID="Button2" runat="server" Text="Update This Panel" OnClick="Button2_Click" /> </ContentTemplate> </asp:UpdatePanel> <asp:UpdatePanel ID="UpdatePanel2" runat="server" UpdateMode="Conditional"> <ContentTemplate> <asp:Label ID="Label2" runat="server" ForeColor="red" /> </ContentTemplate> <Triggers> <asp:AsyncPostBackTrigger ControlID="Button1" EventName="Click" /> </Triggers> </asp:UpdatePanel>

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 2005. Web. 12 Mar. 2012. <http://www.adaptivepath.com/ideas/ajax-new-approach-web-applications>.

"Ajax(programming)." Wikipedia, the free encyclopedia. Wikipedia, 26 Jan 2012. Web. 01 Mar 2012. <http://en.wikipedia.org/wiki/Ajax_(programming)>.

"Google Code." Google. Google, 2012. Web. 01 Mar 2012. <http://code.google.com/edu/ajax/tutorials/ajax-tutorial.html>.

"Introduction to the UpdatePanel Control." MSDN. Microsoft Corporation, n.d. Web. 20 Apr 2012. <http://msdn.microsoft.com/en-us/library/bb399001.aspx

Cate, Scott. "Understanding ASP.NET AJAX UpdatePanel Triggers." Microsoft ASP.Net. Microsoft Corporation, March 12, 2008. Web. 20 Apr 2012. <http://www.asp.net/web-forms/tutorials/aspnet-ajax/understanding-asp-net-ajax-updatepanel-triggers>.

Questions?