AJAX has become a most popular and widely used technology in modern web application. In some web application, around 95% of the server requests are AJAX requests. When you are developing your application, it is always a good practice finding more generic and reusable ways of implementing things. Sometime, we may call as inventing new patterns.
This tutorial explains a pattern of making your all AJAX requests through a single gateway. I am not explaining a technology feature, but this is programing technique.
What are the advantages?
- Suppose you want to pass some common set of parameters with every AJAX request. This can be easily achieved by this technique.
- If your application has an exception flow mechanism which brings exception messages happened in your DAO layer or service layer or even in the controller layer into the client view, those can be easily handled in central point with this technique.
- If you want to show each operations status to the user, that can also be handled from a central point.
If you use jQuery, the following is the typical Javascript method using for AJAX request.
$.ajax({
type: 'POST',
url: CONTEXT_ROOT + "/changePassword.htm",
data: $.blimp.serializeForm("frmChangePwd"),
success: function (response) {
//handle success
},
error: function () {
//handle errors
},
dataType: 'json'
});
For my application, I have written a common central method to make every AJAX requests. This method works as a gateway which all AJAX requests are passing through this method. Any common functionality that we need to add before making the request as well as after making the request, can easily be added to this common method. The following code shows the common gateway method.
/**
* @author Semika siriwardana
*
*/
(function($) {
$.myObj = {
/**
* Central AJAX caller gateway.
*/
ajax: function(objConfig) {
$.ajax({
type: objConfig.type, //mandatory field
url: objConfig.url, //mandatory
headers: (objConfig.headers != undefined)?objConfig.headers:{},
async: (objConfig.async != undefined)?objConfig.async:true,
data : (objConfig.data != undefined)?objConfig.data:{},
dataType : (objConfig.dataType != undefined)?objConfig.dataType:'json',
cache: (objConfig.cache != undefined)?objConfig.cache:true,
contentType: (objConfig.contentType != undefined)?objConfig.contentType:'application/x-www-form-urlencoded',
success: function(data) {
//Handle success status and do more
objConfig.success(data); //Invoke success callback method.
},
error: function(data, textStatus, jqXHR) {
//Handle error status and do more
objConfig.error(data, textStatus, jqXHR)
}
});
}
}
}(jQuery));
As I mentioned before, this is a programing technique or a pattern. You know that '$.ajax()' is the method provided by jQuery for AJAX request. As you see above, I have written a wrapper method as '$.myObj.ajax(objConfig)'. Now onwords, when you want to make any AJAX requests, you are not directly invoking original '$.ajax()' method, but you invoke the wrapper method '$.myObj.ajax(objConfig)'.
Next, you will have a problem. What is this 'objConfig' parameter passing into '$.myObj.ajax()' method?. You will get the answer soon.
To make your AJAX request through our gateway method, you just need to change '$.ajax' to '$.myObj.ajax' from the above code.
myObj.ajax({
type: 'POST',
url: CONTEXT_ROOT + "/changePassword.htm",
data: $.blimp.serializeForm("frmChangePwd"),
success: function (response) {
//handle success
},
error: function () {
//handle errors
},
dataType: 'json'
});
If you use '$.myObj.ajax' for your all AJAX requests, you can easily handle some common behaviours with AJAX invocation.
Great.
ReplyDelete