Creating an Ajax Updater

In order to keep our Ajax object in the background and add a layer of abstraction to our engine, we will create an object called AjaxUpdater. This object is another that follows the Singleton pattern to keep it accessible from all scopes of the application for easy XHR management and control. The object is very simple and consists of only a few methodsone of which could be the only one that is ever used. The other is optional, or a backup for handling optional functionality. Let's start by constructing the object.

Constructing the Object

We will construct this object as we did with the Ajax object. The difference with this object is that we will be initializing the property we used in the Ajax object that we briefly discussed in the last section. This Boolean property is called isUpdating and is set to false by default (see Listing 6.5). This is due to the fact that we are not currently updating any Ajax requests because this property will be used to decipher if a request is in progress at any point in our application.

Listing 6.5. Constructing the AjaxUpdater and Initializing Properties (AjaxUpdater.js)

AjaxUpdater = {}; AjaxUpdater.initialize = function() {     AjaxUpdater.isUpdating = false; } AjaxUpdater.initialize();

After we construct the object, we immediately initialize its properties for use by the rest of the methods in the object.

Updating the Request Object

In an Ajax application, the most widely used method will most likely be the one that handles XHRs. This is the method that will handle all these requests and interact directly with the Ajax object. This method takes three parameters: a method in which we will be making the request, such as a POST or a GET; what I am calling the "service parameter," which is essentially the URL with optional key/value pairs for sending data to the server through the request; and last, an optional callback method. The callback method is optional in this method because we will have a default or catch-all method, called onResponse, to handle any response if a callback method is not passed to this method. After the callback method has been deciphered, we make the request through the Ajax object and set the isUpdating property to true (see Listing 6.6).

Listing 6.6. Handling XHRs (AjaxUpdater.js)

AjaxUpdater.Update = function(method , service, callback) {     if(callback == undefined || callback == "") { callback = AjaxUpdater.onResponse; }     Ajax.makeRequest(method, service, callback);     AjaxUpdater.isUpdating = true; }

This method is a fairly simple way to manage all the XHRs made through our application. The power of using this abstraction layer is that we could add more custom code to control other aspects of the request before the request is made and without affecting the actual Ajax engine in the future. This keeps our Ajax engine intact so that we never have to worry about any of the logic changing in the future.

The Response

The last method in the AjaxUpdater object is the catch-all method called getresponse I mentioned in the last section. This method simply gets all responses for the XHRs that do not set a callback method when they make a request (see Listing 6.7).

Listing 6.7. Handling Responses (AjaxUpdater.js)

AjaxUpdater.onResponse = function() {     if(Ajax.checkReadyState('loading') == 200)     {         AjaxUpdater.isUpdating = false;     } }

The method first checks the ready state as we covered in the Ajax object and sends the loading message to an HTML element with an id value of 'loading'. After the readyState is complete and successful, it simply sets its isUpdating property to a value of false as a precaution, just in case the Ajax object has not done so already.

Now that we have a reusable engine for our Ajax requests, we can move forward with building the fun stuff, like Ajax components, database-enabled requests and, best of all, an entire Ajax-enabled application. But first, let's move on to the next chapter, where we will find out how to put this engine to use.