Home

A Basic Ajax Framework

A Lot of people seem pretty fired up about some of the claims made in a recent article discussing how difficult AJAX can be. This article may overstate the complexity a little bit. Granted if you want a fully functioning point and click framework that just about any braindead code jocky can use, then yeah, that's hard. On the other hand, the basics behind AJAX are pretty simple. While the acronym is new, the facilities to create an AJAX application are not. Heck, I was using them before I knew they had a name. And not just in web pages. I've worked on desktop applications that use the XMLHTTP object in Windows to get information from web pages. Anywhere you use the XMLHTTP connection object (IE) or the XMLHttpRequest object (Other browsers) to get little bits of stuff off a server and put it into an application, you are using the basics of AJAX. To this end and because of a rather pissy reaction to the above article I put together a simple client side JavaScript object that can be used for AJAX applications. Rocket Science my foot...

The Files

Compressed archives of these files are available for Windows or other OS's. The files included in the archive are:

jpajax.js is the one and only file I would expect to be consistent across applications. All the others are an example of a service for testing. The exact nature of the other files depends on the development environment you use and the work your application is doing. This sample uses PHP because it is easily understood by most developers, is available on most web hosts, runs on any server and is widely available for free if you don't have it already. You can use any language or framework on the server in an ajax application. VBScript, Python, LISP, C++, COBOL if that floats your boat. It is entirely up to you.

See the functions updateColor and updateWord in janprogajax.html for examples of using the object. Basic use of the object is simple. You call the constructor with an HTML element name, a target page and an optional action. The action is essentially, for this object, any URL parameters you would pass to the page specified in the constructor's second argument. The first two parameters are required when calling the constructor. The third is optional. All of these have properties on the object that can be set anytime after the object is created

After calling the constructor and setting any properties you need to set you call the appropriate method to update your desired client side HTML element.

A Note about JpAjax's Methods

JpAjax has two exposed methods, SendRequest and GetDynamicImage. Send request simply sends a request to the specified page and assigns the response to the innerHTML property of the specified element. The GetDynamicImage method sends the request and assignes the response to the src property of the specified element. This subtle difference is to simply cut down on the flash of pictures getting loaded in the browser when you do an update. My original pass at this simply called SendRequest and I set the innerHTML to <img src="image.php?R=...>. This caused noticeable flashing everytime the color of the circle was updated. By adding the extra method and setting the src attribute, the image is loaded in the browser before it is displayed so it can be rendered instantly after being downloaded. This makes the page much more responsive and allows you to do things like update the image as the user is typing in the entries for R, G and B instead of having to submit the page to get color updates. That sort of interactivity is the whole reason people use AJAX.

A Note About the Examples

In my original pass of the example I had updateColor and updateWord called when the user entered data into the text boxes by calling the function from the OnKeyUp event. This causes serious problems if the user types very fast. To better handle this situation I use the window object's SetInterval method to call a couple of functions that call updateColor or updateWord if it detects a change. This handles fast typers and other anomolies much better than hooking up the methods to the available events directly.

One peculiarity you will notice if you are not familiar with AJAX at all is that there is a page whose job it is simply to create a single string to refer to a page on the server. The XMLHttpRequest object is only good for handling text. It doesn't do very well with anything binary. So this page simply has the job of generating text that would be valid as the src attribute on an image tab. As mentioned above, this creates a much cleaner UI for the end user.

Conclusion

Hopefully this example proves to be a good basic foundation for creating more interactive web applications. This is meant to be a very basic starting point to get you going and to give you some idea of some of the practical issues you will face when trying to use AJAX. The screen flashing for loading images and handling fast typing are two of those things that theoretically don't matter but do in practice. Handling those issues so the user has a better experience results in code that is slightly more complex. This code was so much simpler when I used the OnKeyUp handler. At the end of the day, however, most users are not going to care about what the code looks like under the covers. They will care about an application working as they expect. I don't see how any framework, such as ATLAS, can account for the wide variety of web browsers, connection speeds, development environments and corporate hardware infrastructures. I'm sure on a corporate intranet where everybody is using IE, the web server is IIS running VBScript and all the developers are using Visual Studio it will work very well. Outside of that controlled environment, who's to say?