Progress
1. Design for Ajax-based client side (updated)
To do it step by step, we first design the client side for one user who can register/monitor one variable/sensor.
The basic idea is that fetch an XML file when it is available one the server side, parse its contents, and generate markup to display the content details in the Web page.
2. Implementation
In the previous implementation, we set up the communication between client and server by calling the basic functions provided by JavaScript.
(1) Creating a new instance of an XMLHttpRequest object (xhr = new XMLHttpRequest()) is used to make a Http request from client to server. In most browsers, it is very straight-forward, but in IE, we need to create a new instance of an ActiveX object. If xhr equals to false, it means that the browser executing the script does not have Ajax Capabilities. Otherwise, you will get an instance of XMLHttpRequest or ActiveXObject.
In addition, in the callback function which is an attched function to the onreadystatchange event handler, we need to check the status properly to make sure that the response was successfully returned from the server before we process the data from the server.
In a word, we have to take care of a lot of details if we do it from sctatch. So there are a few of open source toolkits that can make our lives a bit easier.
In Ajax.Request class provided by Prototype, all we have to provide is a URL, the HTTP method, and a call back function. Internally, Ajax.Request works out how to create the XHR object and fills in the blanks when shaping the request. It also simplifies the callback semantics considerably, allowing us to supply a funtion that would only be called once on completion of the response, and that therefore only have to deal with the application logic.
(2) In this application, we wish to obtain and display data from the server when they are available, so we need to keep the data constantly up-to-date. The Prototype Ajax.PeriodicalUpdater class can automatically keep the display of the server-provided data up-to-date at a frequency that best suits our page. So it is easy for us to schedule the automatic updates without having to code any scheduling logic or write timeout handlers.
(3) For simplicity, currently on the server side we just write the new data to a file while the client side keeps polling the request to read the file and process it.
Discussion
In using Prototype Ajax.PeriodicalUpdater class, we have to take the following factors into account :
- Choosing what to automatically update and at what interval
- The expected number of simultaneous visitors
- The size of the update response
- The process required to generate that response
- The load-handling capability of the server configuration
Reference
- Bulletproof
- JSP : the complete reference, Hanna, Phil
- JavaScript bible, Goodman, Danny
