Ajax demonstration - a dynamically updating status page.

Web2 and caching example from a Well House Consultants training course
More on Web2 and caching [link]

This example is described in the following article(s):
• Javascript/HTML example, dynamic server monitor - [link]

If you're searching for a page where you can view this page, select here

This example references the following resources:
http://www.wellho.net/course/ptfull.html
http://www.wellho.net/mouth/1812_Starting-Ajax-easy-example-

Source code: ajaxstatus.html Module: H307

<html>
<head>
<title>Updating status page using Ajax</title>
<style>
* {   font-family: Arial, Helvetica, sans-serif;
        font-size: 10px; }
h1 {   font-size: 20px; }
#result { background-color: #DDDDFF;}
</style>
<script type=text/javascript language=javascript>
<!-- Hide Javascript on old browsers

var cycles = 0;
var histo = [];
histo[0] = "Server Status - www.wellho.net<br />";

function aboutlang() {

/* Get back the server status */

        var thistime;
        var rqo = new XMLHttpRequest();
        rqo.open('GET',"rs.php",false);
        rqo.send(null);

/* Schedule another status request unless the demo is complete */

        cycles++;
        if (cycles <= 20)
                {
                setTimeout('aboutlang()',10000);
                thistime = cycles.toString()+" &bull; "+rqo.responseText+"<br />";
                }
        else
                {
                thistime = "Demonstration completed";
                }

/* Push the new report onto the queue and remove an old one if
necessary.   Also join up the array to make the HTML to display */

        histo.push(thistime);
        var report = histo.join("");
        if (histo.length > 8) {
                histo.splice(1,1);
                }

/* Display the modified HTML */

        document.getElementById("result").innerHTML = report;
        return false;
}

-->
</script>
</head>
<body onload="aboutlang()">
<h1>Keeping tabs on our server ...</h1>
<table width=100%><tr><td valign=top width=50%
style='background-color: #DDDDFF;'>
<p id="result">Rolling Server Status</p>
</td><td valign=top width=50%>
<b>What does the data mean?</b> ...  Here is a sample:<br />
5 &bull; 11:08:59 &bull; 4 5 6 8 8 4 5 6 8 6 &bull; 26 d
7:48 &bull; 1 user &bull; 0.17, 0.22, 0.19 <br><br>
&bull; <b>5</b> - 5th record in the current run / sequence<br>
&bull; <b>11:08:59</b> - report time hours, minutes, seconds on the server<br>
&bull; <b>4 5 6 ... 6</b> - 4 logged URLs requested in last 10
seconds, 5 in previous 10s ...<br>
&bull; <b>26 d 7:48</b> - the time the server has been running (d=days)<br>
&bull; <b>1 user</b> - there is one person logged in to maintain the server<br>
&bull; <b>0.17, 0.22, 0.19</b> - server load averages for last 1 5 &amp; 15
mins (per uptime)
</td></tr></table>
<hr />
A fresh line is added to the server status above every 10 seconds.
For the purpose of this demonstration, we have limited the updates
to 20 times, and we are displaying just the last eight reports at any time.
There's no reason in principle while you could not run this as a
continual monitor.<br /><br />

This example uses Ajax technology (client side Javascript interacting
with PHP on the server via an XMLHttpRequest object) to allow the
page to be dynamically updated - prior to this use of JavaScript
and the XMLHttpdRequest object, such interaction was impractical and
you had to use HTML frames, or reload the whole page. These techniques
are taught on our <a href=http://www.wellho.net/course/ptfull.html>PHP
Techniques Workshop</a>. We also offer some early Javascript / Ajax
tutorials on line, starting <a
href=http://www.wellho.net/mouth/1812_Starting-Ajax-easy-example-
of-browser-calling-up-server-data.html>here</a>
</body>
</html>

Learn about this subject

This module and example are covered on our public PHP Techniques course. If you have a group of three or more trainees who need to learn the subject, we can also arrange a private or on site course for you.

Books covering this topic

Yes. We have over 700 books in our library. Books covering PHP are listed here and when you've selected a relevant book we'll link you on to Amazon to order.

Other Examples

This example comes from our "Web2 and caching" training module. You'll find a description of the topic and some other closely related examples on the "Web2 and caching" module index page.

Full description of the source code

You can learn more about this example on the training courses listed on this page, on which you'll be given a full set of training notes.

Many other training modules are available for download (for limited use) from our download centre under an Open Training Notes License.

Other resources

• Our Solutions centre provides a number of longer technical articles.
• Our Opentalk forum archive provides a question and answer centre.
• The Horse's mouth provides a daily tip or thought.
• Further resources are available via the resources centre.
• All of these resources can be searched through through our search engine
• And there's a global index here.

Web site author

This web site is written and maintained by Well House Consultants.

Purpose of this website

This is a sample program, class demonstration or answer from a training course. It's main purpose is to provide an after-course service to customers who have attended our public private or on site courses, but the examples are made generally available under conditions described below.

Conditions of use

Past attendees on our training courses are welcome to use individual examples in the course of their programming, but must check the examples they use to ensure that they are suitable for their job. Remember that some of our examples show you how not to do things - check in your notes. Well House Consultants take no responsibility for the suitability of these example programs to customer's needs.

This program is copyright Well House Consultants Ltd. You are forbidden from using it for running your own training courses without our prior written permission. See our page on courseware provision for more details.

Any of our images within this code may NOT be reused on a public URL without our prior permission. For Bona Fide personal use, we will often grant you permission provided that you provide a link back. Commercial use on a website will incur a license fee for each image used - details on request.