Whether you are using the regular xmlhttprequest method or a library like jQuery for ajax, you are going to want to keep those calls as generic as possible. Chances are you’ll end up using them somewhere else in your code. By creating all of your ajax calls generically, you are able to create a concise library that is easily used throughout your site.
Lets look at how this can be achieved. Typically any ajax request no matter what library you use has the connection information, a success handler and a failure handler passed in somehow. Lets look at the following (not so great) code as it demonstrates the bare minimum need to implement an ajax call.
function getDataById(id){
//spawn the ajax call in library of your choice
doAjax(connectionInfo,getDataByIdSuccess,getDataByIdFailure);
}
/**
* Success handler function
*/
function getDataByIdSuccess(result){
//do something specific with the result
}
/**
* Failure handler function
*/
function getDataByIdFailure(result){
//handle the failure case
}In this code our ajax function getDataById has its success and failure blocks hardcoded into it. An improvement would be to pass those in as parameters to the now more generic ajax call.
//call the ajax call
getDataById(1,getDataByIdSuccess,getDataByIdFailure);
function getDataById(id,success,failure){
//spawn the ajax call in library of your choice
doAjax(connectionInfo,success,failure);
}
/**
* Success handler function
*/
function getDataByIdSuccess(result){
//do something specific with the result
}
/**
* Failure handler function
*/
function getDataByIdFailure(result){
//handle the failure case
}This goes a long way towards making the success method generic. For many applications this is enough but this solution lacks the ability to pass additional parameters to the success/failure function. Sure we could use global variable to do this, but since this is asynchronous, unless we implement some sort of locking mechanism, we can’t guarantee the values will still be the same when we go to read them. To get around this we have our handler functions accept an args object. Obviously your success function needs to produce different results depending on the arguments, otherwise it is fine to hard code those args into the success function itself.
//call the ajax call
argObject = new Object();
argObject.containerDiv = "foo";
argObject.linkDiv ="bar";
getDataById(1,getDataByIdSuccess,getDataByIdFailure,argObject);
function getDataById(id,success,failure,argObject){
//spawn the ajax call in library of your choice
doAjax(connectionInfo,function(result){
success(result,argObject);
}
,function(result){
failure(result,argObject);
});
success,failure);
}
/**
* Success handler function
*/
function getDataByIdSuccess(result,args){
//do something specific with the result and use the passed arguments
var container = args.containerDiv;
var link = args.linkDiv;
document.getElementById(container).innerHTML = "
<li>"+result.title+"</li>
";
}
/**
* Failure handler function
*/
function getDataByIdFailure(result,args){
//handle the failure case
}Using this method you can maintain a single generic ajax call that takes in the handler functions and additional parameters to pass along without having to resort to a global variable and the problems this introduces.
This method makes it very easy for you to separate your presentation code from your data code which will make your system easier to maintain.
I was listening to the radio today and was reminded of one of my favourite clash songs. White riot has this fantastic lyric in it that says: