1 / 20

Ryan Putz

Ryan Putz. Outline. What is Ajax? Member Technologies Methodology When and When Not To Use Who’s Using Ajax? Code Examples. What Is Ajax?. A synchronous J avaScript A nd X ML Collection of technologies combined with a particular methodology.

uri
Download Presentation

Ryan Putz

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. Ryan Putz

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

  3. 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

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

  5. 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.

  6. 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

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

  8. 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).

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

  10. Methodology(cont.)

  11. Syntax Elements <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> • Additional HTML elements • ScriptManager • UpdatePanel • Triggers

  12. 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(); }}

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

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

  15. What to Avoid • High frequency updates • Tabbed content • Large quantities of data • Unnecessary updates

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

  17. 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

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

  19. 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>.

  20. Questions?

More Related