AJAX Without the J

George Lawniczak

What is Ajax?

What is Ajax?

What is Ajax?

Asynchronous JavaScript And XmlHttpRequest (XHR)

Some use XML, but to me that s misleading

Why Ajax?
XHR Support across all browsers
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)

Why Ajax?

Source: Garrett(2005)

Why Ajax?

Source: Garrett(2005)

AJAX Alternatives
Macromedia Flash
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.

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.

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)

XHR : Creating

XHR : Sending the Request

true = asynchronous

XHR : Using a callback handler

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

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

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

AJAX Security

Server of Origin Policy

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

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

Encapsulating our AJAX Logic

Encapsulating our AJAX Logic (cont.)

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

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.

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 componentbased web framework that supports AJAX.
http://www.nextapp.com/platform/echo2/echo/

Sun BluePrints Solutions Catalog

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

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

Demo

Creator 2 AJAX Components

Auto Complete Map Viewer Drag-and-drop components

Code server-based functionality

Demo

DWR (Direct Web Remoting)

Call methods from a POJO that reside on the server. Wraps objects in a JavaScript wrapper

Links
Original AJAX Blog by Jesse James Garrett
http://adaptivepath.com/publications/essays/archives/000385.php

Fixing AJAX: XMLHttpRequest Considered Harmful

http://www.xml.com/pub/a/2005/11/09/fixing-ajax-xmlhttprequest-considered-harmful.html

DWR (Direct Web Remoting) Home Page

http://getahead.ltd.uk/dwr/

Java AJAX BluePrints Solutions Catalog

https://bpcatalog.dev.java.net/nonav/ajax/index.html

AJAX Without the J Blog

http://www.jsfcentral.com/listings/A10500?link

Really Simple History (RSH) Framework

http://codinginparadise.org/projects/dhtml_history/README.html

ECHO 2 Web Framework

http://www.nextapp.com/platform/echo2/echo/

Questions
My E-mail is:
glawniczak@gel3.com