1. AJAX Presented by: Dickson Fu Dimas Ariawan Niels Andreassen Ryan Dial Jordan Nielson CMPUT 410 University of Alberta 2006

2. What is AJAX? Ajax is shorthand for Asynchronous JavaScript + XML. Ajax is not a new language or technology that works on its own but an implementation technique of multiple existing technologies, which include: – XHTML and CSS for generating standardized presentation – Document Object Model for generating dynamic display and interaction – XML and XSLT for data interchange and manipulation – XMLHttpRequest for asynchronous data retrieval – JavaScript for binging everything together

3. In General… A JavaScript function is created to handle an event on the page. The function creates an object which calls a program on the server, usually written in PHP, ASP, etc. Program executes and returns some XML. The completion of the program triggers another JavaScript function. This function can edit the page content using JavaScript. In other words, it is a powerful version of Dynamic HTML. Things are done in the background.

4. So, why AJAX? – 1 Case study  Desktop vs. Web application Web application: Simple Short turnaround time Flexible Works well with dynamic datasources Desktop: Responsive Dynamic UI

5. So, why AJAX? – 2 Ajax is trying to make web pages feel more responsive and add dynamic UI/ interactivity elements to web applications. Pages appear to load quickly because of the reduced initial requirement of data (JavaScript and actual data). Upon each request for new information smaller chunks of data are transferred between the server and client, all without reloading the entire page. Is platform and browser independent (almost) Very easy to learn and use because it is not a new language.

6. AJAX in Action – 1 Create request: – var xmlHttp = new XMLHttpRequest object; Connect to server – xmlHttp.open(“GET", url, true); Set the method to be invoked on response – xmlHttp.onreadystatechange = updatePage; Send request: – xmlHttp.send(null); Response is put into the “responseText” parameter of the request object The method setup upon request is invoked

7. Ajax in Action – 2 Examples: Google Maps Textfield auto-complete

8. And Why NOT AJAX? Simple tasks can be done quicker using only JavaScript. Only IE 5.5+ and Firefox have full XML support to run AJAX applications Unexpected behavior of back button and bookmarks Search Engine Optimization Response-time concerns

9. Alternative Options The element IFRAME (Internet Explorer 3) and LAYER (Netscape 4). Macromedia Flash (from version 4), could load XML and CSV files from a remote server without a browser refresh. Microsoft's Remote Scripting (or MSRS, introduced in 1998) acted as a more elegant replacement for these techniques, with data being pulled in by a Java applet with which the client side could communicate using JavaScript.Java applet

10. Questions… Thank you for your participation!