1. Introduction to AJAX
Sue Brandreth

2. What is Ajax?

3. What is Ajax?

4. Asynchronous JavaScript And XmlHttpRequest (XHR) What is Ajax?
Some use XML, but that is misleading

5. What is AJAX ? Asynchronous Javascript and XML.
Not a stand-alone language or technology.
It is a technique that combines a set of known technologies in order to create faster and more user friendly web pages.
It is a client side technology.

6. Purpose of AJAX Prevents unnecessary reloading of a page.
When we submit a form, although most of the page remains the same, whole page is reloaded from the server.
This causes very long waiting times and waste of bandwidth.
AJAX aims at loading only the necessary innformation, and making only the necessary changes on the current page without reloading the whole page.

7. Technologies Used AJAX uses: Javascript (for altering the page)
XML (for information exchange)
Server-side technology

8. Simple Processing
AJAX is based on Javascript, and the main functionality is to access the web server inside the Javascript code.
We access to the server using special objects; we send data and retrieve data.
When user initiates an event, a Javascript function is called which accesses server using the objects.
The received information is shown to the user by means of the Javascript’s functions.

9. Example We want to input data into a textbox.
We want the textbox to have intellisense property; guess entries according to input.
Only the ‘span’ part of the html code is changed.

10. Data Exchange in AJAX
In AJAX:

11. What is AJAX? Asynchronous Javascript and XML
Not all AJAX apps involve XML
Combination of technologies
XHTML, CSS, DOM
XML, XSLT, XMLHttp, JavaScript
Some server scripting language
A method for building more responsive and interactive applications

12. AJAX Components XHTML and CSS
Ajax applies these familiar Web standards for styling the look and feel of a page and to markup those areas on a page that will be targeted for data updates.
DOM (document object model)
Ajax uses the DOM to manipulate dynamic page views for data and to walkthrough documents to “cherrypick” data. The DOM enables certain pieces of an Ajax page to be transformed and updated with data.
XML, JSON (Javascript Object Notation), HTML, or plain text
Ajax can use any of these standards to provide structure to the data it passes to and from a page.
XMLHttpRequest object
The heavy lifter for Ajax: It’s a javascript object embedded in most modern browsers that sets up data request/response pipelines between client and server.
Javascript
Lightweight programming language that Ajax uses for instructions to bind all of the components together.

13. Why AJAX? Want to make your applications more interactive
Want to incorporate data from external Web Services
Don’t want your users to have to download a plugin

14. Client vs. Server Scripting
Client scripting
Web browser does all the work
Server Scripting
Web server does all the work
AJAX leverages both client and server side scripting

15. How AJAX Works

16. AJAX Web Interaction What you don’t see
Data reload happens in the background
JavaScript queries the server to get the proper data without you knowing it
Page updates without a screen “reload”

17. Potential Problems Javascript MUST be enabled
Back button doesn’t always work
Pages can be difficult to bookmark
Search engines may not be able to index all portions of an AJAX site
Cross browser differences in how XML is dealt with

18. Some AJAX examples
Google Calendar
Flickr
Rojo
Meebo
Backpack

19. Basic AJAX Components Server-side Component Client-side Component
Communicates with the database, or web service
Can be written in any server-side language (PHP, ASP, Coldfusion, etc)
Client-side Component
Written in Javascript, often uses XMLHttp
Accesses the server side page in the background

20. Hidden Frame Method
Communication with server takes place in a frame that user can’t see
Back and Forward buttons still work
If something goes wrong user receives no notification

21. XMLHttp Method Code is cleaner and easier to read
Able to determine if there is a failure
No browser history, Back and Forward buttons break

22. Potential Uses for AJAX
Error checking in Forms
AutoSuggest
Drag and Drop objects functionality
Dynamically move view around on image or map
Preload content you want to show later
Apply limits to search results and get new results quickly

23. Why Ajax? XHR Support across all browsers Emergence of broadband
Based on DOM, CSS, XHTML
Emergence of broadband
AJAX-based JavaScript can take considerable bandwidth to download
The “Killer App” - Google Maps
A Catchy Acronym
Coined by Jesse James Garrett of Adaptive Path (February 2005)

24. Source: Garrett(2005)

25. Why Ajax?
Source: Garrett(2005)

26. AJAX Alternatives Adobe Flash Java Web Start/Applets
Requires a plug-in
So what? It comes already with almost every browser
Java Web Start/Applets
.NET – No Touch Deployment
Both need a runtime preinstalled
Handheld device browsers generally do not support the full range of Ajax technologies.

27. Implementing AJAX To implement AJAX we need to answer three questions:
What triggers the AJAX request?
Usually a JavaScript event (onblur, onclick, etc.)
What is the server process that handles the AJAX request and issues the response?
Some kind of URL (use a Service Locator)
What processes the response from the server(what is the callback method)?
A JavaScript function that gets the response and manipulates the DOM, based on the text returned.

28. XmlHttpRequest Object (XHR)
The ‘heart’ of AJAX
First implemented in IE in 1997 as part of the new DHTML standard
Response comes in one of two properties:
responseXML – Returns a DOM document (can use functions such as, getElementById())
responseText – A text string (can be HTML, or even JavaScript code)

29. XHR : Creating
Non-standard extensions to the web-browser DOM.

30. XHR : Sending the Request
Non-standard extensions to the web-browser DOM.
true = asynchronous

31. XHR : Using a callback handler
Non-standard extensions to the web-browser DOM.

32. Handling the Response Response can be one of the following:
Formatted data (XML, other custom format)
XMLHttpRequest.responseXML
Decouples the server from presentation issues
Could perform XSLT transformation on returned XML
HTML
XMLHttpRequest.responseText
Server generates HTML, script “injects” HTML via innerHTML
Server is now concerned with presentation
JavaScript
Use the eval() JavaScript command
Again, our server code is concerned with presentation

33. AJAX Concerns Security Browser Compatibility Accessibility
The Back Button
What if JavaScript is Turned Off?

34. AJAX and the Back Button
Huge usability issue
Returning to the previous state may not be possible when a page is updated dynamically
Difficult to bookmark on a particular page state
Really Simple History (RSH) framework addresses these issues

35. AJAX Security – Server of Origin Policy

36. AJAX Security Browsers impose security restrictions
Cannot make requests via the XHR outside of the domain the web page came from
Can set security on IE to get around this (but you really don’t want to)
Mozilla-based browsers require digitally signing your script
User must approve going to site.
Firefox requires additional code

37. AJAX Security Calling third-party web-services
Application Proxies – Call the web-service from a servlet
Apache Proxy – Configure Apache to invisibly reroute from the server to the target web service domain

38. Problems with JavaScript
Most Java developers know enough JavaScript to be dangerous.
If you don’t know what you are doing, you could cause memory leaks on the client machine.
Most JavaScript functionality can be factored out and encapsulated

39. Ajax Without the J
It would be nice to encapsulate all of the JavaScript within our components, so we don’t have to write any JavaScript.
JavaServer Faces (JSF) provides a way to accomplish this.