Introduction
By now, everyone and their dogs have jumped on to the AJAX bandwagon in order to make their web applications faster and enhance the user experience. (What? Your dog doesn't code? Hmmmm.) Like most programmers, I am lazy and didn't like writing my AJAX code over and over, so I went in search of a solid AJAX library. While there are lots of AJAX libraries out there with tons of bells and whistles, I wanted something simple and yet flexible. I also saw a lot of implementations of AutoComplete boxes and various other common AJAX scenarios, but I wanted an AJAX library that I could re-use, no matter what the project called for.
Design Requirements
- Simple to use.
- Must be flexible enough to handle any AJAX scenario.
- Must be able to pass parameters to the
XmlHttpRequest's callback function
- Must be completely self-contained with no global variables, to ensure compatibility with unknown scripts.
Using the code
Using the code couldn't be easier. First, make sure to link in the AjaxDelegate.js file into your HTML page. Then, create two new JavaScript methods, one that will be called to kick off the AJAX event, and the other that will server as the callback when the AJAX call has completed. In the sample below, I created the getDefinition and setDefinition functions, and wired up the the getDefinition function to the onchange event of a SELECT tag.
function getDefinition(term, textareaID, borderStyle, borderWidth, borderColor)
{
if(term != "")
{
var url = "lookupDefinition.aspx?term=" + term
var ajax = new AjaxDelegate(url, setDefinition,
textareaID, borderStyle, borderWidth, borderColor);
ajax.Fetch();
}
}
function setDefinition(url, response, textareaID,
borderStyle, borderWidth, borderColor)
{
var word = eval(response);
var textarea = document.getElementById(textareaID);
textarea.value = word.definition;
textarea.style.borderStyle = borderStyle;
textarea.style.borderWidth = borderWidth + 'px';
textarea.style.borderColor = borderColor;
}
Under the Hood
When the onchange event fires, the getDefinition function is called. Within that function, a new AjaxDelegate object is created. The first parameter is the URL of the page that will do the behind-the-scenes processing. The second parameter is the name of the callback function that will get executed when the asynchronous call completes. After that, you can pass any number of additional arguments to the AjaxDelegate constructor. The neat part here is that all of these additional arguments will be available to the callback function when the call completes. Finally, make sure to call the Fetch() method to kick off the processing.
When the remote page has finished processing, the function specified as the callback will be called. Remember, all of the arguments that were originally passed in are available to the callback function, along with the response from the HTTP request. At this point, you can do pretty much whatever you want to do with the returned data. (In this case, I actually returned a JavaScript object and used the eval() function to parse it). I will admit the the example is overly-simplistic and not very useful, but the point is to demonstrate the concept.
Conclusion
Although this is a simple little library, hopefully its flexibility will be useful to other programmers. By using a delegate pattern similar to the .NET Framework, it is incredibly easy to create JavaScript callback functions that take additional parameters. And since the code is self-contained, there is no need to have an XmlHttpRequest object with global scope that may conflict with the usage of other libraries or unknown scripts.
History
- 04/03/2006 - Initial code release.
