Sunday, July 24, 2005

Me and AJAX

AJAX, Asynchronous Javascript And XML, is one of those acronyms you have surely read of in some web sites like TheServerSide or XML.com.
It is one of those technologies which rises a great hype, with everyone talking and talking about it.
However, I must admit, I've never read much about it, being too much absorbed by other technologies and ideas, and being a strong supporter of server-side code against client-side javascript.
So, as soon as I've seen its capabilities, I've suddenly got surprised.

How have I encountered it?

A few days ago, as usual, I was working with Cocoon Forms when, testing a form made by my colleague Ugo Cei, I noticed its great responsiveness in combo box dynamic loading and data validation. So, I started browsing the code and while talking with Ugo I've discovered that the high responsiveness was due to AJAX automatic support in Cocoon Forms.
This got my interest, in particular when I discovered that many services like Google Suggest are driven by AJAX.

"Amazing!" I said. "This is great!"

However, after a few hours, my anti-javascript nature began to threat me and my new friend, AJAX... I started to doubt about its support and behavior in different browsers like IE or Mozilla, and so about its real usefulness in production environments.

This led me to further documenting, reading a bunch of good articles which let me understand how AJAX really works: and well, I must say, my anti-javascript nature, this time, was wrong.

So, how does it work?

I'll do a very short description, because you can find a longer (and better) one in the good articles cited at the end of this post.

All the magic lies into a particular javascript object: XMLHttpRequest.
This object lets you, from javascript code, sending an asynchronous request to the server the containing page come from, and receiving an XML document which will be processed by a callback javascript function when the asynchronous request gets completed.
Asynchronous means that the client doesn't wait for the server response, and the web page remains responsive. Moreover, the server doesn't send the whole page, but only an XML document containing the information requested by the client, which will be processed by the callback function, updating data without page reloading.
Here is a step-by-step summary:

  1. The web page editor associates a javascript function to an event of an HTML control, say a combo box which, once selected, must fill a text field.
  2. This function, called when the user selects some item into the combo box, creates the XMLHttpRequest object which makes an asynchronous request to the server, sending the value of the selected item and then suddenly returning.
  3. Meanwhile, the server-side code makes some business logic and sends back the data, formatted in an XML document.
  4. When this asynchronous request/response completes, the callback function takes the XML data from the XMLHttpRequest object and processes it, through the javascript DOM binding, updating the text field.
  5. All updates gets suddenly displayed.

What about my previous doubts?

The XMLHttpRequest object, invented by Microsoft (I've always said that Microsoft guys are able to do something good, in particular when working in rooms with windows closed, in order to keep away from noises and bugs), is still not standard, but implemented by all major browsers, from IE to Mozilla. So, interoperability should not be a problem, and if you want to be safe, you can implement a sort of fallback behavior, like Cocoon does.
Moreover, all the business logic lies server-side (as it MUST be): client side javascript simply makes view processing.

And the advantages?

You can answer by yourself.
Thanks to AJAX, you gain a more responsive interface, which can make the web a sort of new experience, with new
applications like Google Suggest.

Now the links moment:

http://www.adaptivepath.com/publications/essays/archives/000385print.php
https://bpcatalog.dev.java.net/nonav/ajax/index.html
http://www.xml.com/pub/a/2005/02/09/xml-http-request.html

And, if Google has AJAX, why should we not?

Try clicking the "In-line view syndication titles ..." link on the bottom of the sidebar...

1 comment:

Riccardo said...

Hello Sergio!
Your explanation is very useful,and i hope that your project will grove soon.
Best regards

Riccardo The Oracle Man