AjaxArchitecture

AJAX (Asynchronous Javascript and XML) is a browser-side technology stack and architectural style that interacts with the server to update the UI without refreshing the entire web page. While it is complex to code, it can offer a faster and smoother user experience.

AJAX proponents prefer this mechanism over going to the server for new pages. It can be combined with a RestfulArchitecture to make server side services usable from any client, including the address bar of any browser.

The downside is a ton of JavaScript, which we have learned is hard to debug, trace, standardize, etc. It also has performance and cross-browser compatibility issues. Whew.

Jesse James Garret gives a solid introduction to the technologies and benefits.
Information Week has an article about how Ajax is catching on.

Who Uses Ajax?

Try these two sites to see the browser interact with the server without refreshing the page.

Google Maps fetches neighboring territory as you drag the map around.
Google Suggest runs searches on partial keys as you type. See this great blog with Google Suggest Dissected.

Ajax is not a product, but some products are springing up:

JSON-RPC - JavaScript Object Notation now extended for remote calls to servers with many language bindings. This one is Java.
DWR - " DWR is AJAX and XMLHttpRequest made easy. It makes it simple to call Java on the server directly from Javascript in the browser marshalling all the parameters and return values."
The Prototype JavaScript library is driven by Ruby on Rails, but can be used with any technology stack.
Others...

Ruby On Rails

Ruby on Rails does some amazing Ajax tricks with no visible XML or JavaScript.

01 <html>
02   <head>
03     <title>Ajax Demo</title>
04     <%= javascript_include_tag "prototype" %>
05   </head>
06   <body>
07     <h1>What time is it?</h1>
08     <div id="time_div">
09       I don't have the time, but
10       <%= link_to_remote( "click here",
11                          :update => "time_div",
12                          :url =>{ :action => :say_when }) %>
13      and I will look it up.
14     </div>
15   </body>
16 </html>

In line 10 LinkToRemote is a ROR function. Link means it is rendered as a regular anchor tag link. The URL argument in line 12 tells it to call the "say_when" function on the server, and line 11 tells it to update (replace) the contents of the "time_div" section. See why OnLamp calls it Ajax on Rails!

More Info

Architecture Trends

[Architecture Home]