Reusable JS ajax pattern (jquery)

Question

I'd like to know if there is a better approach to creating re-usable ajax object for jquery.

This is my un-tested code.

var sender = {
 function ajax(url, type, dataType, callback) {
 $.ajax({
 url: url,
 type: type,
 dataType: dataType,
 beforeSend: function() {
 onStartAjax();
 },
 error: function(XMLHttpRequest, textStatus, errorThrown) {
 callback.failure(XMLHttpRequest, textStatus, errorThrown);
 },
 success: function(data, textStatus) {
 callback.success(data, textStatus);
 },
 complete: function (XMLHttpRequest, textStatus) {
 onEndAjax();
 }
 });
 },
 function onStartAjax() {
 // show loader
 },
 function onEndAjax() {
 // hide loader
 } 
};
<script type="text/javascript">
 var callback = {
 success: function(data, textStatus) {
 $('#content').html(data);
 },
 failure: function(XMLHttpRequest, textStatus, errorThrown) {
 alert('Error making AJAX call: ' + XMLHttpRequest.statusText + ' (' + XMLHttpRequest.status + ')');
 }
 }
 sender.ajax(url, type, dataType, callback);
</script>

• Stefan Radulian: you might consider returning the promise itself in your sender.ajax (return $.ajax({...})) so that you can attach other callbacks from the client. Of course if you rather prefer to completely hide jquery's ajax from the other code, you should not do that.

Answer 1

You can set the basic options that you always have the same separately.

for instance if you always use the same thing here:

 type: type, 
 dataType: dataType, 

for those types, you can set them separately.

Here is how you do that type of thing:

$.ajaxSetup({
 type: "POST",
 contentType: "application/json; charset=utf-8",
 data: "{}"
});

NOW those are set and you can simplify your individual ajax calls.

EDIT:

NOTE: Setting parameters to $.ajax override these defaults. Thus presetting "data" to an empty JSON string is safe and desired. This way, any $.ajax call that does specify a data parameter will function as expected, since the default will not be used. This helps avoid issues that can be difficult to find on a deployed site.

• Eeyore: That's a good tip. However, I am more interested in a design pattern that's better than what I have.

Answer 2

Here is what I did:

var ajaxclient = (function (window) {
 function _do(type, url)
 {
 return $.ajax({
 url:url,
 type:type,
 dataType:'json',
 beforeSend: _onStartAjax 
 }).always(_onEndAjax);
 }
 function _onStartAjax()
 {
 console.log("starting ajax call");
 }
 function _onEndAjax()
 {
 console.log("finished ajax call");
 }
 return {
 do:_do
 }
}(this));

Example usage:

ajaxclient.do("get","http://...").done(function(data) {console.log(data);})

Answer 3

I'd probably go the whole hog and have an Ajax Object create.

var ajax = new MySuperAjax(url, data);
ajax.onComplete = function(){}

or similar. You seem to have a halfway between a function which has some defaults it extends with those you apss in and an object for it.