Here is an AJAX wrapper I wrote in Javascript. I hope you find it useful. If you do, please let me know. I’ll clean it up and possibly extend it.

I am a huge fan of the DOM + JS + Client side processing. As such I do almost all UI development on the client side. If you are like me in this respect you’ll probably find these functions very useful.

As an aside, prior to learning about AJAX, I had been using the MSIE download behavior for a number of years. (<IE:DOWNLOAD ID="getURL" STYLE="behavior:url(#default#download)" />). I find it interesting that this functionality has been around for some time (at least MSIE5.0) yet it took a fancy moniker for the functionality to gain popularity.

Just in case it is not self-explanatory this is how to use it:
AJAXRequest ( url, [asynch,] [destID,] [function,] [graphic]);

URL: the page you wish to process and/or retrieve from the server (without of course refreshing the browser page). I typically append query strings to this URL to pass parameters back to the server. (e.g. URL = Savedata.asp?user=name&field1=stuff&field2=etc )

asynch: Continue processing the client side script while the AJAX routine is running [true/false] ? (default = true / asynchronous)

destID: Place the returned HTML into the specified element. Specify any element by it’s DOM ID. (default = nothing).

Function: Execute the specified function when the AJAX routine completes successfully. (default = nothing). (E.g. “alert(‘Done!’)” )

Graphic: Display a graphic in the [destID] while the AJAX routine is processing. I typically use this to display an animated GIF progress bar – which will appear in the location where the AJAX retrieved content will ultimately go. (Unless the server side processing is really slow this graphic probably won’t be noticed.)

-------------------------------------------------------------------------------------------

//Request content from the server without refreshing this page
//IN: The URL to retireve
//IN: O: asynch: Asynchronous true/false (default=true). If false then processing will halt until the content is returned.
//IN: O: intoDiv: place the returned contents into the specified DIV. (E.g. IntoDiv.innerHTML=[returned content]) (Default = do not load into any DIV)
//IN: O: fn: call the specified function when the contents are returned. (Default = do not call any function)
//IN: O: progressBar: 0=no progress bar, #=progress bar suffix (E.g. /media/progressbar#.gif); displays in "intoDIV"
var http_request = false;   //Does the browser support AJAX
var AJAXIntoDiv='';
var AJAXReturnFn='';
var AJAXReturnVal='';
var AJAXProgressBar=0;
function AJAXRequest(url) {
   var asynch = AJAXRequest.arguments.length > 1 ? AJAXRequest.arguments[1] : true;
   AJAXIntoDiv     = AJAXRequest.arguments.length > 2 ? AJAXRequest.arguments[2] : '';
   AJAXReturnFn    = AJAXRequest.arguments.length > 3 ? AJAXRequest.arguments[3] : '';
   AJAXProgressBar = AJAXRequest.arguments.length > 4 ? AJAXRequest.arguments[4] : 0;
   http_request = false;
   //test browser
   if (window.XMLHttpRequest) {
       http_request = new XMLHttpRequest();
       if (http_request.overrideMimeType) { http_request.overrideMimeType('text/xml'); }
   } else if (window.ActiveXObject) {
       try { http_request = new ActiveXObject("Msxml2.XMLHTTP"); }
       catch (e) {
           try { http_request = new ActiveXObject("Microsoft.XMLHTTP"); }
           catch (e) {}
       }
   }
   if (!http_request) {
       //Cannot create an XMLHTTP instance
       return false;
   }
   http_request.onreadystatechange = AJAXResponseHandler;
   http_request.open('GET', url, asynch);
   http_request.send(null);
}
//PRIVATE: Default function to handle the response from the server on an AJAX call
function AJAXResponseHandler() {
if (AJAXProgressBar!=0) {
document.getElementById( AJAXIntoDiv ).innerHTML = '<img src="../media/progressbar'+ AJAXProgressBar +'.gif" alt="Loading...">';
}
   if (http_request.readyState == 4) {
       //Server response should be 200 ("OK"). For a full list see: http://www.w3.org/Protocols/rfc2616/rfc2616-sec10.html
       if (http_request.status == 200) {
           var s = http_request.responseText;
       } else {
           var s = "Server status: " + http_request.status + ", Raw: :" + http_request.responseText;
       }
       AJAXReturnVal = s;
if( AJAXIntoDiv!='' ) document.getElementById( AJAXIntoDiv ).innerHTML=s;
if( AJAXReturnFn!='' ) setTimeout( AJAXReturnFn, 500 );
   }
}