AJAX Gregorio López López glopez@it.uc3m.es Juan Francisco López Panea 100032757@alumnos.uc3m.es Departamento de Ingeniería Telemática Universidad Carlos III de Madrid Contents 1. Introduction 2. Overview 3. Development 4. Usage 5. Conclusions 6. References 2
1. Introduction (II) What is AJAX? AJAX stands for Asynchronous JavaScript And XML It is not really a new technology, but a technique/architecture that implies several technologies Uses XMLHttpRequest, CSS, DOM and JS Client side does most of processing Relatively platform independent (works for IE, Mozilla, Opera, Netscape and Safari) 3 1. Introduction (III) History Coined by Jesse James Garret in February 2005 Suite of technologies proposed to a client The technology behind AJAX is much older and dates back to the late 1990 s - IFRAME (IE3), LAYER (NN4) DHTML, Flash - MSRS (Microsoft s Remote Scripting) (IE4, NN4) - Microsoft XMLHttpRequest (IE5) Google started using it for its tool Fashionable!! 4
1. Introduction (IV) Why AJAX? HTTP never intended to dynamically serve content Interactive web pages are slow, require frequent refreshes Flash pages cannot be indexed by search engines Users forced to wait for server to do computation and send back results Users wait for the entire page to load even if just a single piece of data is needed (always reload, never update) 5 Introduction (V) Who uses it? Google Gmail, Google Groups, Google Suggest, Google Maps Flickr photo sharing web site Amazon s A9.com search engine Forgetfoo.com, interactive online forum 6
2. Overview (I) AJAX design principles. The browser hosts an application, not content Application code delivered to browser (JS code) The server delivers data, not content Data may be plane text, JS fragments or XML docs User/application interaction is continuous and fluid Real coding, so discipline is required Significant developer responsibility to manage conversational state over entire web transaction 7 2. Overview (II) AJAX components XHTML and CSS standars-based presentation DOM dynamic display and interaction XML and XSLT data interchange XMLHttpRequest asynchronous data retrieval JavaScript binding all together 8
2. Overview (III) Cascading Style Sheets (CSS) Well-stablished design technique for classic and Ajax web application Goal: standardize formatting of web content - Allow predefined looks 9 2. Overview (IV) Document Object Model (DOM) The DOM exposes a web page to the JS engine Used to identify various components or properties of a web page Tree structured format - defined by W3C - each DOM element is a node DOM can be read and also updated 10
2. Overview (V) JavaScript Solid browser-based programming language Not Java, but from the same family - Java like sintax - Loosely-typed variables - Functions are objects Can use OOP-like style 11 2. Overview (VI) Asynchronous data loading Two possibilities: IFrames, XMLHttpRequest XMLHttpRequest:DOM extensions allowing asynchronous calls Issue with both browser compatibility 12
2. Overview (VII) Classic vs AJAX web application model 13 2. Overview (VIII) The AJAX engine 14
2. Overview (IX) Implementation (I) Client side AJAX engine is created (Java, JS, Flash) Placed in a hidden frame of web page (background) Ajax engine manage the communication with the server Makes HTTP requests and receives XML data asynch JS modified DOM of HTML 15 2. Overview (X) Implementation (II) HTTP request in the browser JS call sent to engine Engine handles most calls without going to the server Anything neede from server is obtained using XMLHttpRequest (or IFrame) Server transfers could be in HTTP format or even.gif as in the Google Maps particular case 16
2. Overview (XI) Example 17 2. Overview (XII) Advantages of AJAX Bandwidth usage produces less network traffic Separation of data, format, style and function Supported by the most important browser Pages can be indexed (impossible using Flash) 18
. Overview (XIII) Disadvantages Breaks back bottom support URL s don t change as state changes Cross Browser Issues can be a pain JS may tax older machine CPU s Can t access domains other than the calling domain May be disable (for security) on some browsers Debugging is difficult 19 3. Development Development tools: AJAX Frameworks. Help to develop Ajax based web-applications. Provide an Ajax engine and associated server and client-side functions. On client side: offer functions that make the requests to the server. On server side: handle the requests made by the client. Three main types: Direct Ajax frameworks. Low level help. Need HTML, CSS and Ajax expertise. Generally small. Ajax component frameworks. Offer pre-built components. Enable fast development for some well-known purposes. Server-driven Ajax frameworks. Server-side component-based development with some grade of Ajax support. 20
3. Development AJAX Frameworks: There are lots of them, mainly depending on the programming language. Javascript DoJo Toolkit - Modular toolkit. Ext. Extends Prototype. jquery. Mootools Visual effects and transitions. Prototype. Script.aculo.us Used with prototype. Mainly for animations and interface development. Yahoo! UI Library C++ Wt. (Witty) Web toolkit. Open Source licesed.net ASP.NET Professional. ASP.NET AJAX. 21 3. Development AJAX Frameworks: There are lots of them, mainly depending on the programming language. Java DRUIDE Framework AJAX applications like SWING applications. DWR remoting toolkit and DHTML library. Echo for AJAX servlets. Google Web Toolkit widget library with Java to Javascript compiler. ThinWire Open source Swing-like Ajax framework. ZK Open source. Enables rich UI with no JavaScript and little programming. Jaxcent direct Java access to the DOM from the server side using AJAX. PHP Sajax Easy to use. Tigermouse driven MVC framework. Xajax Uses only the XML format on the server side. 22
3. Development AJAX Frameworks: There are many ones, so, what are the most used? We can observe that the most used frameworks are those which are free and Javascript based, followed by the Java ones. 23 4. Usage AJAX is an important element of the Web 2.0 Improves the user experience on web-based applications. Increases flexibility to provide advanced interfaces on web applications. 24
4. Usage Real-time form data validation. Fields can be validated before the user sends the form. Autocompletion Specific portions of data can be autocompleted as the user types. 25 4. Usage Load on demand A page can fetch data on background to improve load time of other pages. Sophisticated user interface controls and effects Such as trees, menus, data tables, calendars or progress bars without refreshing the page. 26
4. Usage Refreshing data and server push Pages can poll data from a server for up-to-date data such as scores, stock quotes, weather, or application-specific data. Partial submit A page can submit form data without refreshing the whole page. Page as an application Can help to develop single-page marshalled applications that look and feel much like a desktop application. 27 4. Usage Mashups A page can obtain data to include an external script or mix an external application with ours one. There are lots of developments using this feature. Examples: Tagzania and Panoramio use Google Maps. Yahoo Maps uses Flickr to index images by their location. 28
4. Usage AJAX on the Web Google Apps: Google based their web applications on a rich user experience, providing interactivity and information freshness by using Ajax. Many examples: Gmail. Google Maps. Google Docs. Google Calendar. Google Reader. 29 4. Usage AJAX on the Web Flickr. Web-site to share photos and images. Integrated with other Yahoo! web-applications like Yahoo! Maps. Ajax is used to improve the User Interface while managing the images. 30
4. Usage AJAX on the Web Facebook. Social network. Integrates Ajax in functions like the photo gallery. Del.icio.us. Web-application to save and share bookmarks based on tags. Includes Ajax in some features of its UI. 31 4. Usage AJAX on the Web Non successful Ajax implementations: Many websites fail in their Ajax implementations. There is a difference between interaction and all-moving websites. Implementing Ajax everywhere can be extremely frustrating for the user, as it does not know what will happen on the next click. Constantly varying interfaces often provide poor usability. An example: www.ask.com 4 th search engine on Spain, but it had to change its initial interface on its beginning. It used an Ajax-everywhere interface which made very difficult to distinguish between the results. Lines move up or down with every click where is my result? 32
5. Conclusions It is an important set of techniques to improve user experience on a web site. In order to do so, it integrates a set of already existing, mature and stable techniques. Supported in almost all web-browsers, although there are problems in browsers designed for mobile devices. It is widely used over the Internet, so better frameworks and toolkits appear almost every months. Most of these toolkits allow the developer to programme AJAX applications using widely used programming languages Future Challenge: go beyond the limits of the actual web getting a wider range of possibilities web 2.0 33 6. References http://www.ibm.com/developerworks/web/library/waajaxintro1.html http://www.ibm.com/developerworks/web/library/waajaxintro2/index.html http://adaptivepath.com/ideas/essays/archives/000385.ph p http://www.prototypejs.org/ http://script.aculo.us/ http://code.google.com/webtoolkit/resources.html http://www.petefreitag.com/item/514.cfm http://ajaxian.com/archives/why-ajax 34