Dojo and Ajax

If you want to create really compelling sites you have to master Ajax – shorthand for Asynchronous JavaScript and XML, link. There are also a few patterns you need to consider when implementing a “Web 2.0” like site. The most important can be described in this small code flow:

User Click -> show “loading” UI, getUI with Ajax -> On Complete -> Show new UI

The key is to chain together as many asynchronous events as possible to get a seamless flow in your code. Each JavaScript framework has a way to do this, and Dojo’s is dead simple.

There are three main methods used for this:

dojo.xhrGet

dojo.xhrPost

dojo.xhrPut

dojo.xhrDelete

The two most widely used are clearly xhrGet and xhrPost. They are pretty self explanatory in that an xhrGet allows a REST call to “get” data from the server and the xhrPost allows you to “put” data to the server. They both support a response and a key aspect of Dojo is you can tell the API what kind of response you expect using the handleAs parameter. The default is to handle as “text” but other formats like “xml” and “json” are also supported.

Since the API’s are very similar let’s focus on the post and then compare it to how it is done in jQuery.

Both Dojo and jQuery support the serialization of a form within the API but they each take a different stance on how to do that. Check out the sample code from the Dojo.xhrPost() reference:

            var xhrArgs = {
                form: dojo.byId("myform"),
                handleAs: "text",
                load: function(data) {
                    dojo.byId("response").innerHTML = "Form posted.";
                },
                error: function(error) {
                    //We'll 404 in the demo, but that's okay.  We don't have a 'postIt' service on the
                    //docs server.
                    dojo.byId("response").innerHTML = "Form posted.";
                }
            }
            //Call the asynchronous xhrPost
            dojo.byId("response").innerHTML = "Form being sent..."
            var deferred = dojo.xhrPost(xhrArgs);
        });

Notice the “form” parameter in red. The Dojo API allows you to just specify a DOM node for a form and does the serialization for you. If you do not want to post a form but some of your own data you can optionally use the postData parameter versus specifying a form. This is similar to jQuery.

The jQuery.post() is just as nice but you have to specify the data serialized:

$.post("test.php", $("#testform").serialize(),

   function(data){
     alert("Data Loaded: " + data);
   });

Don’t get scared with the “$” stuff, that is just short for “jquery.post()”. Notice you use the famous jQuery selector and just call serialize()? You could optionally massage the data and then serialize if needed. The callback for jQuery.post is actually the third parameter. If you want finer granularity with success or failure you might want to use the base method:

$.ajax({
  type: 'POST',
  url: url,
  data: data,
  success: success
  dataType: dataType
});

So what is the net of this? I choose Dojo over the jQuery implementation in this case. The reason? The “form” variable. By just specifying the DOM element of the form the Dojo code under the covers does the serialization for me – dead simple. If I want to get fancy I can also optionally override the call with postData to be more like the jQuery call. I have done a couple of jQuery sites and to be honest I end up using the $.ajax() base call over the $.post because I need to handle the various error conditions and also pass more context to the calling function. So while the nice function to encapsulate “get” and “put” in jQuery its really not that more useful then just calling $.ajax().

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