Comet Programming: Using Ajax to Simulate Server Push | 2 | WebReference

Comet Programming: Using Ajax to Simulate Server Push | 2


[previous] [next]

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:

[previous] [next]