Reusable, centralized AJAX component based on jQuery

January 5, 2010 at 8:05 pm | Posted in Software Development, Web | 6 Comments
Tags: , , , , , , ,

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>
Advertisements

6 Comments »

RSS feed for comments on this post. TrackBack URI

  1. Thanks!…. You just ended HOURS of stress….

  2. Can I use your code here in my project? If not, please post your message here, I will remove it.

    • Yeah, that’s totally fine.

    • Hi,
      Can you share me some sample code so that i can validate it.

      Thanks
      SB

  3. Hi,

    Further to this reusable component, I wanted know do you have any sample HTML working program where i can embed. If so can you share me one of the HTML page where this is used so that i can test it.

    • Hi,
      Can you share me the sample html page which we can use this functionality.
      Thanks
      SB


Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

Blog at WordPress.com.
Entries and comments feeds.

%d bloggers like this: