This document provides an introduction to AJAX (Asynchronous JavaScript and XML). It discusses what AJAX is, why it was developed, how it works using the XMLHttpRequest object, security considerations, and alternatives like Flash. It also demonstrates how to encapsulate AJAX logic in JavaScript and how frameworks like JSF can be used to implement AJAX without writing JavaScript directly.

1. Introduction to AJAX
Venkat pinagadi

2. What is Ajax?
 Asynchronous
 JavaScript
 And
 XmlHttpRequest (XHR)

Some use XML, but to me that’s misleading

3. Why Ajax?

XHR Support across all browsers


Emergence of broadband



Based on DOM, CSS, XHTML
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)

4. Why Ajax?

5. Why Ajax?

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

7. Implementing AJAX

To implement AJAX we need to answer three
questions:

What triggers the AJAX request?


What is the server process that handles the AJAX
request and issues the response?


Usually a JavaScript event (onblur, onclick, etc.)
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.

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

9. XHR : Creating

10. XHR : Sending the Request
true = asynchronous

11. XHR : Using a callback handler

12. 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
 XMLHttpRequest.responseText
 Use the eval() JavaScript command

Again, our server code is concerned with presentation

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

14. 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

http://codinginparadise.org/projects/dhtml_history/README.html

15. AJAX Security – Server of Origin
Policy

16. 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 (Yuck!)


User must approve going to site.

Firefox requires additional code

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

18. Encapsulating our AJAX Logic

19. Encapsulating our AJAX Logic
(cont.)

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

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

22. JSF and AJAX
Why JSF makes sense
- JSF Lifecycle
- Separates the things that don’t change
(client-side) from the things that do
change (server-side)
- Echo2 is another Java component-based
web framework that supports AJAX.
-
http://www.nextapp.com/platform/echo2/echo/

23. Sun BluePrints Solutions
Catalog
Sun defines best practices for integrating
AJAX into JSF applications.
https://bpcatalog.dev.java.net/nonav/ajax/

24. Java Studio Creator 2
Sun has released several AJAX components that
are available for Creator 2
- Auto-Complete Text Field
- Progress Bar
- Map Viewer
- Select Value Text Field
Obtain components via Creator’s “Update Center”

25. Demo – Creator 2 AJAX
Components



Auto Complete
Map Viewer
Drag-and-drop components

Code server-based functionality

26. Demo – DWR (Direct Web
Remoting)


Call methods from a POJO that reside on
the server.
Wraps objects in a JavaScript wrapper

27. Links

Original AJAX Blog by Jesse James Garrett


“Fixing AJAX: XMLHttpRequest Considered Harmful”


http://www.jsfcentral.com/listings/A10500?link
Really Simple History (RSH) Framework


https://bpcatalog.dev.java.net/nonav/ajax/index.html
“AJAX Without the J” Blog


http://getahead.ltd.uk/dwr/
Java AJAX BluePrints Solutions Catalog


http://www.xml.com/pub/a/2005/11/09/fixing-ajax-xmlhttprequest-considered-harmful.html
DWR (Direct Web Remoting) Home Page


http://adaptivepath.com/publications/essays/archives/000385.php
http://codinginparadise.org/projects/dhtml_history/README.html
ECHO 2 Web Framework
-
http://www.nextapp.com/platform/echo2/echo/

28. Questions

My E-mail is:
Venkat.pinagadi@gmail.com