The Running List in pollArray
All the response times will go into an array that's stored in the pollArray property of the Monitor class. We keep this array updated with the intuitively named updatePollArray method. It's a very simple method that looks like this:
Example 3.21. appmonitor2.js (excerpt)
this.updatePollArray = function(pollResult) {
var self = Monitor;
self.pollArray.unshift(pollResult);
if (self.pollArray.length > self.maxPollEntries) {
self.pollArray.pop();
}
return true;
};
The code is very straightforward, although some of the functions we've used in it have slightly confusing names.
The unshift method of an Array object puts a new item in the very first element of the array, and shifts the rest of the array's contents over by one position, as shown in Figure 3.5.
Figure 3.5. Inserting fruit using unshift
When the array exceeds the user-defined maximum length, updatePollArray truncates it by "popping" an item off the end. This is achieved by the pop method, which simply deletes the last item of an array. (Note that the method name pop may seem quite odd, but it makes more sense once you understand a data structure called a stack, which stores a number of items that can be accessed only in the reverse of the order in which they were added to the stack. We "push" an item onto a stack to add it, and "pop" an item from a stack to retrieve it. The pop method was originally designed for developers who were using arrays [44] as stacks, but here we've repurposed it simply to delete the last item in an array.) The reason why we append items to the top and remove items from the bottom of the array is that, in our display, we want the most recent entries to appear at the top, and older entries to gradually move down to the bottom.
Displaying the Results
Once we've updated the results in pollArray, we can display them using the printResult method. This is actually the cool part: the user will experience first-hand the difference between our AJAX application and an older-style app that requires an entire page refresh to update content.
Rendering Page Partials
In AJAX jargon, the chunk of the page that holds the list of response times is called a page partial. This refers to an area of a web page that's updated separately from the rest of the page.
Updating a chunk of a web page in response to an asynchronous request to the server is called "rendering a page partial."
The printResult method iterates through pollArray, and uses DOM methods to draw the list of poll results inside a div with the ID pollResults. We'll start by adding that div to our markup:
Example 3.22. appmonitor2.html (excerpt)
<body>
<div id="statusMessage">App Status:
<span id="currentAppState"></span>
</div>
<div id="pollResults"></div>
<div id="buttonArea"></div>
</body>
Now we're ready for the printResult method:
Example 3.23. appmonitor2.js (excerpt)
this.printResult = function() {
var self = Monitor;
var polls = self.pollArray;
var pollDiv = document.getElementById('pollResults');
var entryDiv = null;
var messageDiv = null;
var barDiv = null;
var clearAll = null;
var msgStr = '';
var txtNode = null;
while (pollDiv.firstChild) {
pollDiv.removeChild(pollDiv.firstChild);
}
for (var i = 0; i < polls.length; i++) {
if (polls[i] == 0) {
msgStr = '(Timeout)';
}
else {
msgStr = polls[i] + ' sec.';
}
entryDiv = document.createElement('div');
messageDiv = document.createElement('div');
barDiv = document.createElement('div');
clearAll = document.createElement('br');
entryDiv.className = 'pollResult';
messageDiv.className = 'time';
barDiv.className = 'bar';
clearAll.className = 'clearAll';
if (polls[i] == 0) {
messageDiv.style.color = '#933';
}
else {
messageDiv.style.color = '#339';
}
barDiv.style.width = (parseInt(polls[i] * 20)) + 'px';
messageDiv.appendChild(document.createTextNode(msgStr));
barDiv.appendChild(document.createTextNode('\u00A0'));
entryDiv.appendChild(messageDiv);
entryDiv.appendChild(barDiv);
entryDiv.appendChild(clearAll);
pollDiv.appendChild(entryDiv);
}
};
Share and Enjoy:
