AJAX and PHP

Chapter 7• All HTTP requests go through a single XMLHttpRequest instance, rather thanautomatically creating new XMLHttpRequest objects for each call, as implemented inother patterns. This way we are guaranteed to receive responses in the same order asthey were requested, which is important for our charting application (and for anyother application where the responses must come in order). If the connection is busyprocessing a previous request, our code waits for one second, and then retries. Thistechnique is also friendly in its use of the web server resources.• The ajaxRequest() method receives as parameter the URL to connect to, and areference to the callback function to be called when the server response is received.This is a good technique to implement when you need the flexibility to access thesame functionality from several sources.• The handleGettingResults() method is defined inside the ajaxRequest method.This is one of JavaScript's features that enable emulating OOP functionality. So farwe haven't used these features because we think they bring real benefits only whenwriting large applications and they require a longer learning curve for programmersinexperienced in OOP techniques. If you like this technique, you'll find it easy toimplement it in your applications.realTimeChart.js contains all the functionality that generates the SVG chart. The code containsdetailed comments about the specific techniques. Here is a short description of each of the methods:• init() is called when the page loads to perform the chart initialization. This methodgenerates the SVG code for the chart axis and builds the initial structure for thewhole chart. Initially, the numbers for the axis units are drawn with white font tomake them invisible. We need this because of a problem in the Firefox SVGimplementation that doesn't allow calculating the text size and positioning itcorrectly before it is rendered on the screen. Using pre-calculated values isn't anoption because the grid is configurable and its axis can be populated with differentvalues. To overcome this problem, init() uses setTimeout() to executerefreshXYIndexes() after half a second.• refreshXYIndexes() is able to calculate the correct positions for the text on the axisunits, even with Firefox 1.5. After it sets the new coordinates, it changes the color ofthe text from white to black, making it visible.• createPointInfo() is called from the onmouseover function of the chart nodes todisplay the node coordinates.• removePointInfo() is called from the onmouseout event to remove the displayednode coordinates.• updateChart() is the function that initiates the asynchronous request. The getURLmethod is used if available (this method is supported by Adobe SVG and ApacheBatik). Otherwise, the ajaxRequest method (from ajaxRequest.js) is used to makethe request. When calling the server, the pair of previously generated coordinates issent via GET, which the server uses to calculate the new values.201