Comet Programming: Using Ajax to Simulate Server Push [con't]
|
The JavaScript Code
A JS framework can help with a lot more than Ajax calls. Another
area which they excel in is event handling. As any JavaScripter knows, adding
cross-browser event handling can be a chore. It's nice to be able to bind a
function to an event in one fell swoop and not have to worry about whether version
N of browser X will behave as intended. In Prototype, we can attach a function
to an event by using the Event.observe() function. We'll use it to attach some
code to the window's onload event:
We can use it a second time to attach an event handler to our button's
onclick event as well. The handler will be a function called purchaseCD(). This
is also a good time to connect to the server, as the number of remaining CDs
may change any time after the page's initial load.
The connectToServer() function creates a Prototype Ajax.Updater class
to perform the server call. The benefit of using Prototype's Ajax.Updater over
the standard Ajax.Request object is that the Updater will also handle the displaying
of both the refreshed data and error messages. To do that, it accepts an extra
container(s) argument which can be any one of the following:
- a single DOM element
- the ID of a single DOM element
- an object containing a success and failure property whose values can be either DOM elements or element IDs
The latter is used in cases where you don't want error messages appearing in the same container as the refreshed data.
You can still include event handlers for the onSuccess, onComplete, and onFailure
events if you want to do more than refresh displayed data. The connectToServer()
function includes handling for the onSuccess event because it sends a new server
request to await the next data event. The onSuccess code also includes a test
to make sure that the returned data - the number of CDs remaining - is greater
than zero. In real life, there's always the possibility that the store will
get a new shipment in that needs to be reflected in the page, but for our demo,
once there gone, they're gone! The test is accomplished using the native JavaScript
parseInt() function. Whereas a numeric 0 evaluates to false, a string containing
a zero ("0") does not. The parseInt() function also performs some rudimentary
error checking in that a non-numeric value will stop the function from attempting
another server call:
A similar function, called purchaseCD(), updates the CD inventory
by the number entered in the txtQty textbox. A word of caution: in order to
keep things simple, there is no validation on the txtQty field. Therefore, entering
anything but numeric values may blow up the app! The purchaseCD() call to the
Ajax.Updater contains the extra parameters attribute so that we can pass the
txtQty field's value to the server. Usually, the Element.serialize() function
is used to send a field's contents, but we are using getValue() instead to match
the longPolling.php's expected parameter name of num:
