My First AJAX Application

by Alistair Miles

I’ve just written my first AJAX (Asynchronous Java and XML) application, see the Claddier Discovery Service (try searching for ‘cloud’ or ‘atmosphere’). This application interrogates an OAI-PMH provider for metadata about papers and datasets harvested from CCLRC’s ePubs archive and the BADC’s data archive.

I’ve previously avoided Javascript like the plague, mainly because I knew there are browser compatibility issues, and because I didn’t know of any code editors that could provide the kind of developer support that is essential to developing production quality code (i.e. code completion, debugging, documentation tools etc.) I’ve also been used to strongly typed object-oriented languages like Java, so I didn’t know how to get the best out of the weakly-typed functional Javascript language, or how to write code that was easy to debug and test. However, I found a number of tools and resources that have made this work a lot easier.

Both the Eclipse Web Tools project, and the oXygen XML editor provide a Javascript editor for Eclipse. However, these editors do little more than syntax highlighting. However, I found JSEclipse, a Javascript editor plugin for Eclipse, which is available free for non-commercial use. Although JSEclipse is in a relatively early development stage and still has a few bugs, it already easily surpasses the functionality available in the other two editors. Most notably, it provides code completion, which is aware of documentation, and which shows you which DOM methods are implemented in which browsers – extremely useful information to have at your fingertips! I also found the JSDoc tool, which generates Javadoc style documentation for Javascript, and I have found the combination of JSEclipse and JSDoc to be very effective. See the generated documentation for the Claddier Discovery Portal for an example.

For debugging in Mozilla family browsers, I found the DOM inspector, Javascript console, and especially the Venkman Javascript debugger that comes with Mozilla Application Suite to be extremely useful. The Venkman debugger really is an excellent tool, I highly recommend it for finding your way through complicated code. For debugging in IE I used the Microsoft Script Editor – in IE6 sp2 go to Tools > Internet Options > Advanced and deselect ‘Disable Script Debugging (Internet Explorer)’. Restart IE, load the page you want to debug, then select View > Script Debugger > Open and choose ‘New Instance of Microsoft Script Editor’ – the MS Script Editor can handle scripts that are in separate files linked from the main page, whereas the MS Script Debugger crashed when I tried that.

For reference material, I found the following resources indispensable. First, of course, the DOM level 1 specification, and the Javascript Core Guide 1.5 (see also other DevEdge manuals). However, to work around the peculiarities of the various browsers, I found has some good information, especially the W3C DOM Compatibility Core and introduction to events (which is a good tutorial for basic event handling in javascript as well). The MSDN HTML and DHTML reference is also good.

In designing the application, I’ve tried to follow a strict Model-View-Controller architecture. A set of controller functions are invoked when the appropriate view event is fired. Controller functions execute some functionality (e.g. make an asynchronous HTTP request) and then make appropriate changes to a model object. If properties of the model object are changed, the view is notified and updated as appropriate (i.e. the appropriate view functions are invoked). Everything flows in the direction view (event) > controller > model > view. I’ve tried make the best of both the functional and the object-oriented features of the Javascript language, for example I use the Controller and View objects simply to collect a set of related functions that can be called statically, however a single instance of the Model object is created and used. E.g. when the ‘Search’ button is pressed, the static method Controller.searchAll() is invoked. This changes the ‘model’ variable by calling model.setProperty(Model.PROP_RESULTS, results), which then causes the view to be updated via the static method View.updateResults(). The static methods of the View object really only provide convenience layer above manipulations on the actual DOM document being viewed.