Poor Man's Ajax

Last summer I began working on extending Avi Bryant’s liveUpdater.js and integrating it into Borges . I was successful as far as that went and reported my results here and here . Unfortunately Borges turned out to be a dead end because of some fundamental problems with its implementation.

However my fork of liveUpdater.js has went on to lead a productive part in the Lakeshore project (more about it later). liveUpdater has been a core piece of the user interface for many commercial applications written by myself, the gentle folk at Mission Data , and several other people that are using Lakeshore. So in short, liveUpdater is under active development and is being used successfully in several commercial applications.

Enough with the history lesson… take a look at the demo . What’s happening is that some event on the client side (a keypress, a click, etc) triggers a request to the server via XMLHttpRequest. The server returns one or more snippets of HTML. The snippets replace existing sections of the current document based on their “id”. Very nice things are now possible with only a tiny amount (or in the case of Lakeshore, no) javascript coding. You get the dynamic feel and most of the responsiveness that is promised by Ajax without splitting your logic between the client and the server.

Here is how the “Update time” link on the demo works. The HTML contains an empty div with an id of “time”. The “Update time” link is set to use liveUpdater with a target URL of time.cgi :



document.getElementById(‘time-link’).onclick = liveUpdaterUri(‘time-link’,‘time.cgi’)

time.cgi sets the content type of its response to “text/xml”. It returns a body element containing a div with the current time. Note that the id of the div matches the id of the empty div in the original HTML document. If you wished to replace additional elements on the page just include them in the body element.

Javascript, it's what's for dinner

Javascript is a good language. I like Ruby better, but it is certainly better than Java (which is not a good language) and it has has certain unique charms. A dynamic, prototyped OO language with a runtime penetration of nearly 100% on desktop systems. I’m ashamed I haven’t done more with it.
This script from Florian Gross that adds several of the Ruby standard methods to Javascript is an excellent example how flexible and clean Javascript is. Below is a code snippit for adding Ruby style mixin support to Javascript. While it is impressive that Javascript is flexible enough to allow this sort of thing, the truly amazing bit is that it is seven lines of straightforward code that even a casual Javascripter such as myself can understand.

Object.prototype.extend = function(other) {
 if (!this.mixins) this.mixins = []
 this.mixins.push(other)
 for (var property in other)
   if (!this.hasOwnProperty(property))
     this[property] = other[property]
}

Now for the practical aspects of programming Javascript Ruby style.
Here’s some brief documentation written by Florian. Also while using ruby.js in a script that interacts with the DOM, I ran into a bit of trouble. In Firefox at least the Array that is returned by getElementsByTagName does not have the added methods. I would appreciate any explanation as to why this is so, but there is a work around in the mean time.
Instead of:



foo.getElementsByTagName(‘tr’).each(function(row) {

  …do something with the row…

});

You have to:



Array.fromObject(foo.getElementsByTagName(‘tr’)).each(function(row) {

  …do something with the row…

});

Youth culture killed my dog

Poor Man's Ajax

Javascript, it's what's for dinner