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>

“Seam in Action” Book Review

February 27, 2008 at 6:43 pm | Posted in Java, Media, Paper, Software Development | 1 Comment
Tags: , , , , , , , , , , ,

Seam in Action Softbound CoverIn the last couple of weeks I was busy reviewing Dan Allen‘s book “Seam in Action”. The book tries to give a practical insight into the internals of the JBoss Seam framework. Seam, unifying the Java EE platform, will help you assemble full-stack applications in no time avoiding its design flaws.

For a quick start check out Dan’s articles on IBM developerWorks:

“Seam is a powerful open source development platform for building rich Internet applications in Java. Seam integrates technologies such as Asynchronous JavaScript and XML (AJAX), JavaServer Faces (JSF), Java Persistence (JPA), Enterprise Java Beans (EJB 3.0) and Business Process Management (BPM) into a unified full-stack solution, complete with sophisticated tooling.”

Dan starts the book with chapter one as a very good introduction to the current problems with the JSF framework. It describes why Seam is needed as a complement to JSF to build real world applications. Throughout the book, the author uses examples and source code that are easy to follow. One example is the AJAX chapter where he picks typical use cases in modern web applications (asynchronous auto completion and form validation). The book teaches JBoss Seam step by step. It starts with an introduction to seam-gen, the code generation tool packaged with Seam, to easily create your own application in less than two hours. I really liked the discussion of development IDEs that you can use to develop Seam projects and when to use one or the other in favor of a specific feature. The book discusses all aspects that were introduced with Seam. Especially when it comes to new concepts like bijection, Dan provides clear explanations and makes good use of relevant examples.

Today’s applications integrate with a lot of other technologies and frameworks (especially when it comes to ORM). Seam makes heavy use of them. The book gives you the options you have when developing with Seam and how to implement them. Furthermore, Dan shows how to access JavaBeans managed by the Spring framework in your application. Many JSF projects already use Spring, which simplifies the migration from plain JSF to a “seamless” JSF application. Whenever possible, Dan compares alternatives. One example is his discussion of XML configuration vs. annotations. Here he provides a balanced and unbiased account about the pros and cons of each alternative.

JBoss Seam was developed to solve JSF’s design caveats and integration problems with other frameworks like Hibernate. The reader should have at least some working knowledge of the discussed technologies and frameworks. As a resume, “Seam in Action” is a down to earth guide for getting started quickly with Seam. The estimated publish date for the softbound print is June 2008. Two thumbs up!

Blog at WordPress.com.
Entries and comments feeds.