Getting data to the browser

Slowly, all the necessary components are slotting into place to allow the developer to bypass the requirement to write traditional PC-based applications, or escape the tyranny of the all-encompassing n-tier distributed systems.

AJAX (Asynchronous JavaScript and XML) seemed to appear out of nowhere around the start of 2005. XML is one of the few happy cases where everyone decided that the technology would be important before they’d actually finished inventing it. For those of us who are wary of such a complex beast, and wanting to take a putt at it, there is the frustration of aiming at a moving target. As soon as one has protested that it doesn’t do something, a huge team of programmers have moved in to make it happen by brute force rather than ingenuity. Despite its complexity, I think I shall warm to AJAX though, if only because it, at last, provides a standard means of allowing JavaScript to communicate with the server to request and access XML data. Essentially, it allows JavaScript to call a stored procedure with whatever parameters it wants, and to get an XML result set back. Actually, you can get any text data back that you want, as you are not forced to use XML..

There is nothing new in being able to access a database via JavaScript. For several years, we’ve been trying to defeat the lack of any defined process to allow JavaScript to call a procedure remotely in a host. The only cross-browser method that can be made to work is the ‘Invisible Iframe’ approach, where one can, in JavaScript, assign a new value to the SRC attribute of an invisible Iframe (usually given absolute coordinates off-window), using the GET parameters to pass data back to the host. Microsoft was actually in the vanguard of trying to solve this problem, using a ‘download behavious’ that appeared as a stealth operation in IE5. This worked very well. Its advantage over the Iframe trick was that one didn’t need to write a JavaScript callback (on the iframe’s load event) when the data was returned from the host. It was all done for you. The downside was that it was IE-only, but this was, for a long while, a minor consideration. As the general use for this technique was to transfer object data to the browser for rendering, it was a shame that there was no agreed way of transferring the data. Javascript, at the time, couldn’t parse or understand XML Whenever I used it, I constructed the text of the object assignment script in JavaScript from within a stored procedure. This was transmitted to the browser and EVAL’d. This was great as long as one got it right. IE’s javascript debugger was pathetic, and as buggy as a dead hedgehog. A safer technique was to ‘serialise’ the data with arbitrary delimiters between columns and rows, and to use the ‘split’ function to turn it into a javascript array.. I’ve even created HTML tags on the server and dropped them in place by assigning the text into the innerHTML property of a convenient DIV..

The XMLHttpRequest was another attempt by Microsoft to solve the problem, but this time it got the consensus. The implementation of AJAX technology is a typical donkeys’ breakfast of a mess at the moment, due to the fact that IE implemented it with a whole series of ActiveX objects each with different progIDs, one of which has to be loaded. Firefox’s implementation is a lot cleaner of course, as a direct window method. The important thing is, that, like the download behaviour, AJAX can work asynchronously. The XML that is returned to the browser is accessible to JavaScript as a DOM document, which is very easy to access. If you use the responseText property of the server response, you get text. or you can treat it as XML using responseXML.

So migrating from the old Iframe or ‘Download Behaviour’ techniques to Ajax buys you a reasonably standard means of getting data from a database via JavaScript. The pain is taken away by using a standard prototype JavaScript library. Because you don’t have to use XML, you keep the versatility and tricks of the old techniques. Everybody wins..

More at the XHConn standard library

Or the wonderful BrainJar Ajax Tutorial both of which successfully hide the complexity of the underlying code.