Prototype: Easing AJAX's Pain
by Bruce Perry |

Delegator

Our own CO2Levels object uses the concept of delegation, wherein calls to its own keys(), values(), and add() methods delegate the real work of these operations to the internal Hash object. This object is stored as a local variable: levelsHash.

Let's look at the getYear() method.

getYear: function(year){

    if (! isNaN(year)) {

        return this.levelsHash[year];

    }   else {

        return 377;

    }

}

The built-in JavaScript method isNaN() returns false if its parameter can be evaluated as a number (such as "2000"), and true otherwise (as in isNaN("hello")). If the getYear() parameter passes this test, then the code uses a common JavaScript expression to return the value of a key or property: this.levelsHash[year] (for example, this.levelsHash["2004"] evaluates to 377.38). The browser then displays this numerical value inside the HTML div element.

Add Stuff to an Existing Hash

The CO2Levels object has an add() method, which can add new keys and values (additional years and CO2 levels) to the existing data.

add: function(year,level){

    var tmp = new Object();

    tmp[year] = level;

    this.levelsHash=this.levelsHash.merge(tmp);

}

This method creates a new Object from its two parameters (representing the year and CO2 level), which might look like: {"2005":381}

The code then passes this object to the Prototype Hash object's merge() method. This method combines the new object with the Hash's existing data, essentially merging them into one group of data or associative array.

The merge() method returns the existing data with the new property/value pair(s) appended to the end.

With some refactoring, the code could use XMLHttpRequest to fetch any new levels from the Mauna Loa Observatory, then add them to our existing client-side data.

Inspect

Finally, Prototype's Hash object also has an inspect() method. This method creates a readable display of the Hash's contents, as in Figure 1-3.

Figure 1-3. Looking inside a Hash

The CO2Levels object delegates the task of its own inspect() method to its internal Prototype Hash object.

inspect: function(){

    alert( this.levelsHash.inspect());

}

This is a useful debugging tool for viewing the current contents of a Hash object.

An upcoming article discusses an AJAX caching strategy used with the same application. It introduces Prototype's Ajax.Request object, which reduces the amount of code that has to be devoted to using the XMLHttpRequest object. This is the important top-level JavaScript object used in AJAX applications for making HTTP connections with a server behind the scenes.

Prev  [1] [2] [3] [4]