At the Forge - Dojo Events and Ajax

Here, then, is one example. Suppose you want to invoke one particular object method, rather than a simple function call, in an event handler. JavaScript makes it difficult to do this directly from an event handler. However, dojo.event.connect handles this quite simply, in its four-parameter version. As before, the first two parameters are the node and event that will trigger the handler. The third and fourth arguments are the object and function that will be invoked. For example:

dojo.event.connect(eventObject, "onclick",
                   handlerObject, "handlerMethod");

Dojo also makes it possible to connect more than one handler to an event. In non-Dojo JavaScript, you could accomplish this only by making your event handler a function that then invokes other functions. Using Dojo events, you can connect any number of methods:

dojo.event.connect(para, "onclick", testFormContents);
dojo.event.connect(para, "onclick", submitFormContents);

Events are fired in the order that they are connected. So, in the above example, testFormContents would be invoked before submitFormContents.

Note that Dojo allows you to add the same event handler twice, if you want. So, be careful to invoke dojo.event.connect only once for each event-handler combination to avoid potentially odd and hard-to-debug problems.

Let's say you want to provide an expert mode to your users, so they don't have to see all of the annoying alert boxes we're generating. We could create a button that, when pressed, removes the event handler from the object—ooh, but now that's getting kind of tricky, especially if we have multiple events to deal with.

The solution is to use dojo.event.disconnect, which does what you might expect:

dojo.event.disconnect(para, "onclick", testFormContents);

dojo.event.disconnect requires that the parameters be completely identical to those used in dojo.event.connect. Once it is invoked, however, the event is disconnected.

An advanced piece of the event system is known as advice, a term that always has confused me, but which is common in the worlds of Lisp and aspect-oriented programming. The basic idea behind advice is that you can tell the system to invoke a function before or after another function. (If you have used Ruby on Rails, this is analogous to a filter.) This is admittedly an advanced feature, but it might help when debugging an application—rather than inserting logging statements into a problematic function manually, you simply can add advice to the function, invoking the logger before or after the function is invoked.

There is even a topic mechanism for Dojo events, which lets you create multiple channels for event notifications. (This is similar in some ways to the syslog facility in Linux and UNIX.) Thus, a particular object might register its interest when particular events happen on another object.

Finally, Dojo events are used to give functionality to widgets—Dojo's name for GUI elements made up of HTML and CSS.

Now that we understand how to create and use Dojo events, we can look at how to perform Ajax queries using Dojo. As you may recall, Ajax (which stands for Asynchronous JavaScript and XML) is a paradigm for Web development that uses the browser's ability to make HTTP requests behind the scenes. Combining such background HTTP requests with JavaScript, the DOM and CSS makes it possible to create more intuitive and aesthetic Web applications. We could create Ajax applications without Dojo or another toolkit, but it's much easier and more expressive to use a toolkit, if only because it means we can avoid browser differences and incompatibilities.

Listing 2 shows dojo-ajax.html, a page that contains only a single button marked “Press here”. When the button is pressed, the user sees an alert box, much as in Listing 1. But, in this version of the program, the contents of the alert box have come from a server-side program, defined in this case to be the very short hello.php (Listing 3).