At the Forge - Dojo Events and Ajax

The quality of your Dojo depends upon your connections.

The button itself is defined as we might do with any button to which we expect to attach an event, with an id attribute. It sits inside of a very small HTML form, named “theForm”:


<form id="theForm">
<input type="button" id="theButton" value="Press here" />
</form>

Using Dojo events, we connect the button to a function (ajaxAlert):


<script type="text/javascript">
    var theButton = dojo.byId("theButton");
    dojo.event.connect(theButton, "onclick", ajaxAlert);
</script>

The only remaining question is what the ajaxAlert function does. First, it creates a JavaScript object literal and assigns it to the local variable ajaxArgs. This object literal assigns several names that will help our Ajax call work: url is the URL of the server-side program that will respond to our Ajax call, error indicates which function should be invoked if an error occurs, load indicates what function should be invoked if the call to url is successful and mimetype defines the MIME type we expect to receive from the server.

One of the annoying aspects of some other JavaScript toolkits is that they require you to create your own list of name-value pairs to be submitted in the Ajax request. This is not the case with Dojo. By setting the formNode name in our object literal to a form node, we can rest assured that all the form elements will be passed to the server. In this particular case, that is not necessarily useful or interesting, but it certainly saves some programmer time and increases program readability.

Finally, our ajaxArgs object is bound, and we're off and running. Clicking on the button means the associated Dojo event is invoked, which is ajaxAlert. That function, thanks to dojo.io.bind, then sends its arguments to the defined URL and invokes the load function upon successful completion. This is surprisingly straightforward and opens up many possible avenues for using Ajax in applications.

Conclusion

Dojo, which we explored over the last two installments of this column, and Prototype, which we looked at in the January 2007 issue, are both strong libraries for Web developers looking to improve the quality of their JavaScript. Each has a different style associated with it. I tend to be more of a Prototype kind of guy, but many aspects of Dojo are also quite appealing to me. In particular, Dojo's extensive set of widgets, and the way those widgets can be connected to one another via the event system, provides a rich set of functionality that all JavaScript developers can enjoy. Even if you don't plan to use Dojo, you should consider installing and trying it, just to understand how it works.

Reuven M. Lerner, a longtime Web/database consultant, is a PhD candidate in Learning Sciences at Northwestern University in Evanston, Illinois. He currently lives with his wife and three children in Skokie, Illinois. You can read his Weblog at altneuland.lerner.co.il.

______________________

Comments

Comment viewing options

Select your preferred way to display the comments and click "Save settings" to activate your changes.

Im fearful of resorting to

Mike's picture

Im fearful of resorting to ajax at times when I am coding because the search engines cant read it.

Geek Guide
The DevOps Toolbox

Tools and Technologies for Scale and Reliability
by Linux Journal Editor Bill Childers

Get your free copy today

Sponsored by IBM

Webcast
8 Signs You're Beyond Cron

Scheduling Crontabs With an Enterprise Scheduler
On Demand
Moderated by Linux Journal Contributor Mike Diehl

Sign up now

Sponsored by Skybot