Global Gateway

Reusable, centralized AJAX component based on jQuery

When working on applications that use JavaScript you want to apply good practices like design patterns also on the client-side. Often times you’ll find yourself using the same piece of code over and over again but slightly changing parts of it. Sometimes you even want to have a centralized functionality you want to reuse across your application.

If your application makes AJAX calls to your server-side components jQuery’s AJAX implementation comes in handy. Usually you want to handle at least the successful and erroneous response of that call. Today’s web applications (like Gmail) based on a lot of AJAX calls display a “busy/loading” indicator like a spinner or some text.

JavaScript supports the Factory pattern (see the book “Pro JavaScript Design Patterns”) which lets you create an implementation with the new keyword. The nice thing about it is that you can even create multiple implementations that handle your HTTP calls differently. The methods are being added over the the class’s prototype object. Below you’ll find an implementation for making AJAX calls using jQuery. For each GET or POST call you pass in a callback variable. The callback variable defines how to handle the response.

ajax.js:

var AjaxHttpSender = function() {};

AjaxHttpSender.prototype.sendGet = function(url, callback) {
   $.ajax({
      url: url,
      type: 'GET',
      beforeSend: function() {
         onStartAjaxRequest();
      },
      error: function(XMLHttpRequest, textStatus, errorThrown) {
         callback.failure(XMLHttpRequest, textStatus, errorThrown);
      },
      success: function(data, textStatus) {
         callback.success(data, textStatus);
      },
      complete: function (XMLHttpRequest, textStatus) {
         onEndAjaxRequest();
      }
   });
}

AjaxHttpSender.prototype.sendPost = function(url, data, callback) {
   $.ajax({
      url: url,
      type: 'POST',
      data: data,
      beforeSend: function() {
         onStartAjaxRequest();
      },
      error: function(XMLHttpRequest, textStatus, errorThrown) { 
         callback.failure(XMLHttpRequest, textStatus, errorThrown);
      },
      success: function(data, textStatus) {
         callback.success(data, textStatus);
      },
      complete: function (XMLHttpRequest, textStatus) {
         onEndAjaxRequest();
      }
   });
}

function onStartAjaxRequest() {
    // e.g. show spinner
}

function onEndAjaxRequest() {
    // e.g. hide spinner
}

Usage Example:

<script type="text/javascript" src="js/jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="js/ajax.js"></script>
<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 + ')');
      }
   }

   function makeAjaxCall() {
      var ajaxHttpSender = new AjaxHttpSender();
      ajaxHttpSender.sendGet(url, callback);
   }
</script>