Date: 02/08/07 (Javascript Community)    Keywords: xml

Ajax Callbacks

I've been slowly increasing the use of Ajax upon one of my sites.

Since I'm only using it for two or three specific things it was simple enough to add the code to just those pages, and add the backend handler to return the appropriate data.

Now I'm starting to consolidate things to make it simpler and to make sure that all my handlers are consistent.

So I've written some code which looks like this:

//
//  Make an AJAX request.
//
//  This function takes three parameters :
//
//   1.  The URL to request.
//
//   2.  The function to call upon successful completion of the AJAX request.
//
//   3.  The function to call upon AJAX error.
//
function makeAjaxRequest( url, ok_function, err_function )
{
    var xmlObj = getXMLHTTPRequest();
    if(! xmlObj ) 
    {
        err_function(nil);
        return;
    }

    xmlObj.onreadystatechange = function()
    {
        if(xmlObj.readyState == 4)
        {
            //
            //  Cancel the timeout.
            //
            clearTimeout(requestTimer); 

            if (xmlObj.status==200) 
            {
                ok_function(xmlObj);
            }
            else
            {
                err_function(xmlObj);
            }
        }
    }
    xmlObj.open ('GET', url,  true);

    // 
    // Setup timeout of 10 seconds.
    //
    var requestTimer = setTimeout(function() { xmlObj.abort(); }, 10000 );

    xmlObj.send ('');
}

This gets called with three arguments, the URL to request, and two functions for either "OK" or "error" results.

eg:

    makeAjaxRequest(  "/ajax/tags/type/" + type,

                     //
                     // Called on OK
                     //
                     function( obj ) {
                         // Show the result message.
                         updateObj( 'current_tags' , obj.responseText ); 

                         // Clear the tag input field.
                         updateObjValue( 'new_tag', '' );
                     },
                     
                     // 
                     // Called on error.
                     //
                     function ( obj ) {
                         // Show the result message.
                         updateObj( 'current_tags' , obj.responseText ); 
                     } );

}

Does this seem like a reasonable approach?

Should I be using a very simple and lightweight library to do this kind of thing for me?

Source: http://community.livejournal.com/javascript/126594.html