At the Forge - Dojo Events and Ajax

<? echo "Hello from the server!"; ?>

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.

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.