Cool AJAX and DHTML January 25
I did some interesting AJAX work last week. I changed one of the pages in my application that displays dynamically created images to use AJAX. AJAX allowed the page not to be redrawn as the user selects the different images. The AJAX part was fairly trivial once I ascertained what was the server-side was doing. The AJAX changes required some refactoring on the server side which was to be expected. The browser would display the missing image symbol since the image had to be generated and then downloaded. I found a way to keep that from happening. What I did was load the image into a variable, and then attach a function to the onLoad event of that image. The function swaps out the image in memory with the one on the page. It is pretty cool if I do say so myself. The onLoad function also does stuff like hides the progress indicator and enables the controls which were turned off when the AJAX call was made. The code looks something like this:
var myImage = new Image();
myImage.onload = function{
var previewImage = document.getElementById(”previewImage”);
previewImage.src = myImage.src;
}
I used the ContentLoader library which comes with Ajax in Action for the plumbing. The server sent JSON back to the browser. This was my first time using JSON which turned to be pretty easy to understand and use. I was considering using the DOJO toolkit, but I did not want to the number of javascript libraries that had to be loaded by the browser.