Click here to Skip to main content
15,867,308 members
Articles / Web Development / HTML
Article

AjaxDelegate - An AJAX library with easy-to-use callback functionality

Rate me:
Please Sign up or sign in to vote.
0.00/5 (No votes)
3 Apr 20063 min read 52.4K   247   41   8
An AJAX library with easy-to-use callback functionality.

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.

JavaScript
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.

License

This article has no explicit license attached to it but may contain usage terms in the article text or the download files themselves. If in doubt please contact the author via the discussion board below.

A list of licenses authors might use can be found here


Written By
Web Developer
United States United States
This member has not yet provided a Biography. Assume it's interesting and varied, and probably something to do with programming.

Comments and Discussions

 
GeneralI can't download code Pin
javalinux20053-Apr-06 17:40
javalinux20053-Apr-06 17:40 
GeneralRe: I can't download code Pin
brian dunnington4-Apr-06 6:05
brian dunnington4-Apr-06 6:05 
GeneralRe: I can't download code Pin
brian dunnington4-Apr-06 6:08
brian dunnington4-Apr-06 6:08 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Praise Praise    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.