Introduction to Ajax Dott. Ing. Giulio Piancastelli [email protected] IngegneriaDue Alma Mater Studiorum–Universit`adiBolognaaCesena Academic Year 2006/2007 Dott.Ing.GiulioPiancastelli IntroductiontoAjax What is Ajax? I A cleaning powder I A Dutch football team I A Greek hero I A different approach to web interaction I None of the previous I All of the previous Dott.Ing.GiulioPiancastelli IntroductiontoAjax History of web interaction (1/2) I JavaScript gets released and for the first time developers are able to affect the interaction between the user and the web page (Netscape Navigator 2) I Frame are introduced and the web page can be split up into several documents (Netscape Navigator 2) I The ability to use JavaScript to control a frame and its contents lets the hidden frame technique for client-server interaction emerge I Aframerepresentsacompletelyseparatedrequesttotheserver I The technique represents the first asynchronous request/response model for web applications Dott.Ing.GiulioPiancastelli IntroductiontoAjax History of web interaction (2/2) I DHTML enables developers to alter any part of a loaded page by using JavaScript. Combining it with hidden frames let any part of a page to be refreshed with server information at any time (Internet Explorer 4) I Implementation of the DOM standard and the iframe HTML element let the hidden iframe technique emerge: dynamic creation of an iframe to make a request and get a response on the fly (Internet Explorer 5, Netscape 6) I The XMLHttp object gets introduced as an ActiveX control: an ad-hoc HTTP request that can be controlled from JavaScript independently from the page load/reload cycle (Internet Explorer 5) I An XMLHttpRequest native JavaScript object gets implemented by virtually every modern web browser Dott.Ing.GiulioPiancastelli IntroductiontoAjax History of Ajax (I) I Developers have tried to give users a more interactive and satisfying experience of the web since the days of JavaScript and frames, long before those techniques were called Ajax I A technology can be called mature not when some developers play with it, but when big enterprises adopt it for their core business I The Ajax turning point is generally considered to be Google Maps, appeared even before the term Ajax was coined Dott.Ing.GiulioPiancastelli IntroductiontoAjax Google Maps (1/2) Dott.Ing.GiulioPiancastelli IntroductiontoAjax Google Maps (2/2) I A scrollable and draggable map broken in a grid of tiles asynchronously downloaded from the server during the normal user workflow I Zooming and zoom level control widget I Push pins and active dialogs (with shadows!) used to highlight search results on a map Dott.Ing.GiulioPiancastelli IntroductiontoAjax History of Ajax (II) I In February 2005, Jesse James Garrett (Adaptive Path) coins the term Ajax, meaning Asynchronous JavaScript and XML, and quotes Google Maps and Google Suggest as examples of Ajax applications I The Ajax tidal wave raises I because all the Ajax component technologies (HTML, CSS, DOM, XML, JavaScript) are already known and deployed I and because of the Google effect and experience I More companies (e.g. Amazon) adopt Ajax on the web I Web frameworks (e.g. Ruby on Rails) add Ajax support, and toolkits (e.g. Google Web Toolkit) start to appear Dott.Ing.GiulioPiancastelli IntroductiontoAjax Why is Ajax different? I Ajax can be viewed as I a set of technologies I a web application architecture I More precisely, Ajax can be viewed as a set of relatively old technologies combined to create a new architecture for web applications, meant to increase the page’s interactivity, speed, and usability Dott.Ing.GiulioPiancastelli IntroductiontoAjax Classic web application architecture Dott.Ing.GiulioPiancastelli IntroductiontoAjax