Thanks to Google, there has been a lot of interest lately in slick ways of doing interfaces on the Web. Jesse James Garrett at Adaptive Path has given the technique a name, AJAX which stands for 'Asynchronous JavaScript and XML'. It's always nice to have a name to make it easier to talk about something, and AJAX is a pretty good one.
Since we saw Google Suggest, Google Maps and GMail we've done some experiments too. One of the things was to take all the controlled headings from WorldCat and do a suggest-like service. Works pretty well, and it might be something we'll pursue later.
Lately, though, I've been applying AJAX to a Dewey browser. This was inspired by the OCLC Research Software Contest. Two of the things we have available are all the records with 'Ohio' in them from WorldCat and the DDC Summaries. So I tried my hand at YADB (yet-another-DDC-browser). There are a lot of them out on the web, but I had the idea of using the Rocks/Ganglia visualization approach to help guide browsing. For various reasons we ended up moving away from the 10x10 display to successive rows of 10, and in the process have gone through a half-dozen different approaches. We think we've got one now that's going to work, though.
If you try to go through any of Google's interface code (in some ways this is easy in that since most of it runs in your browser and you have access to all the JavaScript that's doing the magic) you'll quickly realize that much of what they are doing isn't all that straight-forward, especially in the details. Google tends to use XMLHTTPRequest which allows JavaScript to get data (not necessarily XML) from an HTTP server. Google either downloads JavaScript structures which are turned into HTML by more JavaScript, or XML on which XSLT stylesheets are applied. Making all this work across browsers gets complicated.
Another technique you'll see used is to load data into HTML iframes. The nice thing about doing this is that the browser's history gets updated (so the back button works), and if you're loading XML with an associated XSLT file, that XSLT transformation happens automatically.
So what we are doing for the DDC Browser interface is to do all the HTML generation in the browser using XSLT on XML returned by the server. The main page has four iframes, three for three levels of the DDC and a fourth for record display. There is less than a page of JavaScript that keeps track of things and pokes the 'location' attribute of those iframes to display data.
This technique has gotten rid of virtually all the fancy JavaScript while still updating sections of the screen without reloading the whole page. For a graphical browser (e.g Google Maps or the DDC Browser) not flashing the whole screen seems critical in making the system enjoyable to use.
The real trick to the system, though, is what happens in the server. We've gone through several iterations there before we found a simple scalable solution. Overall, the lines of code involved in the system is probably a third of where we started. More on what I think of as our 3-level server side architecture in another post.
Thanks to Diane Vizine-Goetz (our DDC expert here in OR) for all her help with the browser. In addition to browsing a collection of records, Diane thought of loading the DDC schedules themselves and using it for classification. A sample of the Abridged DDC is show in the screen shot above. Another aspect of interface design is making the whole thing pretty, simple, and functional, all at the same time. Lance Osborne did most of the design work.
--Th