« XQuery not likely in .NET 2.0, strange to say the least. | Main | Mobile Web Initiative. »
May 6, 2005
AJAX : Demystifying the buzz for all platforms.
AJAX is making its rounds in the news as the next web development buzzword, curiously, I have seen a wide range of articles associating AJAX with everything from a Flash substitute to a Ruby on Rails specific technique. Although the guys developing Ruby on Rails have done a superb job in incorporating it into their framework and some compare the Browser responsivness of AJAX to that of Flash, AJAX -- as its acronym implies -- is just Asynchronous JavaScript+ XML, and as such, can be used with any web development platform : .NET , Java/J2EE, PHP , Perl or any other server side deployment for that matter.
| [Entry continues to the left and below ad ] |
The core of AJAX lies in a Browser based object named XMLHttpRequest which allows the browser to invoke remote calls back to the server without the need to reload the current page. This object or component is available in all modern browsers -- Firefox 1.0+, Internet Explorer 6.0+, Safari 1.2+ -- if there is any limitation to deploying AJAX on an application, this would be it, your Browser not having the capabilities to execute XMLHttpRequest.
Let's move on to another core concept, if you haven't done much HTML coding, you may be asking yourself "How can I make remote calls back to the server without reloading the page ?" or "Even if I can what good are they for ?" Well, as it turns out, HTML/XHTML is not the monolithic beast it appears to be, there is a special tag named <div> which allows a web page to be divided into distinct blocks, all of them in isolation of the other, in essence web pages within a web page.
Ok, now lets go one step back and explore XMLHttpRequest, being a browser bound object the natural language for interacting with this component is obviously JavaScript, and as you might have expected from Browser vendors too, the way you interact with the object differs between browsers! -- a pain you can only fathom if you have done cross-browser JavaScript.
Fortunatly in AJAX's/XMLHttpRequest's case, some people have invested considerable time and are freely sharing their work for dealing with cross-browser and ancillary issues, one such library/framework is Prototype , which I will use in the next paragraphs to describe a hands-on AJAX example.
Let's assume you would like to incorporate AJAX into your application, the first step you need to take is importing the Prototype library onto your page, like so: <script src="/prototype.js" type="text/javascript"></script>
The next thing you need to determine is what information you would like to retrieve from the server via AJAX, where you would like to place it, and obviously what action will actually trigger the retrieval.
Since the whole purpose of AJAX is to avoid reloads, the natural candidate to trigger the action is a JavaScript event, this could be a user selecting a menu option onchange, following a link onclick, or any other event.
Next you need to define the actual server side function/URL that will return the information back to the browser, generally this method/URL will return simple text because the information will be placed on your page -- but HTML tags are also obviously acceptable, just bear in mind that any HTML tags have to integrate with the existing layout of the page. Also note that since this is a browser request, you are free to write the server method in whatever language you please as you would any other web call.
Finally, you need to define a place on your HTML page were you would like to place the results of your server side call, this is done defining a <div> with an id, like so : <div id="myplaceholder"> Nothing yet ! </div>.
Putting it all together, lets assume you would like a user clicking on an image to activate an AJAX call, this would be the code:
|
A top your page the Prototype library. |
<head>
<script src="/prototype.js" type="text/javascript"></script>
</head>
|
|
The image declaration that will make the AJAX call. |
<img
onclick="new Ajax.Updater('myplaceholder','/mybusinesslogic/myownlanguagefunction', {asynchronous:true});return false;"
src="graphic.jpg"
alt="Click Me!" >
|
|
And somewhere else on your page, the location -- <div> element -- were the retrieved information will be placed |
<div id="myplaceholder"> Nothing yet ! </div>
|
The onclick attribute within the img tag is indicative that the action will be triggered when a user clicks on the image, what will actually be invoked is the new Ajax.Updater function which forms part of the JavaScript Prototype library
The Ajax.Update method is core to the AJAX equation -- since it has all the plumbing related to the XMLHttpRequest browser object, a look at the Prototype source will confirm this -- the first parameter ('myplaceholder') indicates the <div> id in which the remote response will be placed, while the second parameter corresponds to the URL which will be called on the server side.
Notice that the function call: '/mybusinesslogic/myownlanguagefunction' is a simple call to a URL which is located on an absolute server path. As you might be imagining already, the function behind the URL can be anything your hearts content : A PHP script, a Java servlet, a Java Struts controller, C# code behind, Ruby on Rails controller, Python. So long as the response is text, you should see it appear in your <div> placeholder ( Even if the method returns an error, you will see that text on your HTML, but you surely don't want that!).
That's it ! Using the prototype library it's as easy as that to perform Asynchronous JavaScript+ XML -- AJAX -- on your webapps in whatever platform you have written your applications.
Updates : Most platforms are tightly integrating AJAX functionalities into their core offerings, here are various links around the web that describe specific techniques.
.NET- AJAX technique fully integrated into ASP.NET 2.0 : ASP.NET 2.0's Client Callback Feature
- .NET Atlas : A richer approach to developing AJAX applications with .NET
- AJAX Web Control for ASP.NET 2.0 : Custom Script Callbacks in ASP.NET
- AJAX JSP Tags (JSTL) : AjaxTags, JSP Tag Library
- Java BluePrints AJAX Components : A formal approach -- provided by Sun -- for developing AJAX components on the Java EE stack.
- AJAX JSF (Java Server Faces) specific Asynchronous JavaScript and XML (AJAX) with Java 2 Enterprise Edition .
| [Comments below ad ] |
Posted by Daniel at May 6, 2005 9:07 AM
Comments
Post a comment
Track back Pings
Track Back URL for this entry:
http://www.webforefront.com/mtblog/mt-tb.cgi/8.
[Any other Reader]
