In a recent project, we have decided to incorporate and AJAX functionality to create a dynamic and interactive user experience in the browser. With information learned from Stuart Halloway's presentation at one of Platinum Solutions' training events, I decided to utilize Prototype (http://prototype.conio.net/) as a helper library for implementing AJAX functionality and making the Javascript cleaner.
AJAX
My primary goal for utilizing Prototype was to assist with AJAX. Although the creating AJAX requests in the browser is not complex, Prototype hides browser variations in the process and makes implementation extremely simple. To implement the loading of data upon click, I utilized Prototype’s Ajax.Request object.
new Ajax.Request(this.getDataUrl, {
method: 'post',
postBody: 'fromDate=' + fromDate + ‘&toDate=’ + toDate,
onSuccess: this.processDataJSON.bind(this),
onFailure: this.ajaxError.bind(this),
asynchronous: true
});
This simple AJAX call just requires the url and an associative array of self explanatory parameters. The only unintuitive part of this call to developers of other languages is the bind call. This is covered later in the discussion on classes. This AJAX call gets initiated in a ‘click’ event handler, and the processDataJSON and ajaxError callback functions were written to process the success or failure of the AJAX call.
This request calls a URL which could be implemented in any server-side language such as Java, PHP, or Perl. For this project, we implemented the server as a Java Servlet and chose JavaScript Object Notation (JSON) as the data protocol. JSON is a very simple, yet effective way to deliver data to the client in the form of JavaScript objects. This eliminates any conversion or translation on the client side. However, a small amount of work is performed on the server side to create the objects.
Once the client receives the AJAX response, the JSON is parsed to create a standard JavaScript object. You can use a standard JavaScript eval to create the objects, but it is recommended to use JSON.org’s JSON parser available at http://www.json.org/js.html. This parser will only process and create JavaScript objects from the JSON response as opposed to eval which will run any JavaScript code. Here is the processDataJSON callback function:
processDateJSON: function(response) {
// create collect array from JSON text returned
var newData = JSON.parse(response.responseText);
// process new data here...
}
There is no translation or conversion necessary. The JSON parse function simply returns a JavaScript object for use.
Classes
Another purpose for using Prototype was to use basic object oriented programming. Prototype offers a Class object for creating and defining classes. Use Class.create() to create a Class object, then define the class functions by assigning an associative array of functions to class_name.prototype. A special function called initialize is used to act as the object’s constructor.
var CalendarData = Class.create();
CalendarData.prototype = {
initialize: function(year, month, day) {
},
processDataJSON: function(request) {
...
}
};
To harness the power of inheritance, use Class.extend to create an object oriented hierarchy of objects. My primary complaint of JavaScript objects is the notion of context. Object oriented programmers are used to calling functions on objects with the assumption that the target object is executing its own function. In other words, car.explode() called from a class called Person might not cause the car object to explode. Instead, the car.explode function would be executed in the context of Person, thus causing the Person to explode. This is likely not the intended result. To solve this issue, Prototype offers the bind function. In the car example, the Person would call car.explode.bind(car)(). This notation is definitely less clean but necessary. Bind causes the function to be executed in the context of car. When the function uses the ‘this’ keyword, ‘this’ will refer to car and NOT the Person object calling the function. This issue of context may be simple to fix, however it can waste much time debugging function calls missing binds.
Iterators
