The Lab Book Pages

An online collection of electronics information

http://www.labbookpages.co.uk

Dr. Andrew Greensted
Last modified: 15th April 2010

Hide Menu


Contact Details

Site Map

Valid XHTML Valid CSS
Valid RSS VIM Powered
RSS Feed Icon

This site uses Google Analytics to track visits. Privacy Statement

Page Icon

Real-time Updating

If you want your web page to reflect dynamic content, such as live graphs or data, the methods here might be helpful.

Page Refresh

A full page refresh is the simplest method for updating a page to reflect changes in live data. This can be easily achieved using a meta element in the page's head section. Including the line shown below requests that the browser will reload the page every 60 seconds.

<meta http-equiv="refresh" content="60" />

To make use of this technique, you need to update the page held on the server with the dynamic data. A example page is shown below.

File: refreshTest.html
<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>
   <title>Refresh Example</title>
   <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
   <meta http-equiv="refresh" content="60" />
</head>

<body>
   <p>Content</p>
</body>

</html>

The big disadvantage of this technique is the whole page is reloaded. It is likely that only a small portion of the page will actually change. Your clients will end up having to download more and the web server will be sending data it doesn't have to. A more elegant approach is shown in the AJAX example.

Dynamic Images

Image updating is useful if you have dynamic graphs or perhaps a webcam. A simple bit of javascript can be used to request the browser to reload a new image at regular intervals.

The files give an example of this technique. The image plot.png is reloaded every 10 seconds. The main trick is appending a date string after the image file name to make sure the browser does not use a cached version of the image. As the date string is appended as a query string (the bit after the question mark), so the image file stored on the server is always just plot.png.

File: imgTest.html
<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>
   <title>Refresh Example</title>
   <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
   <script type="text/javascript" src="reloader.js"></script>
</head>

<body onload="reloadGraph()">
   <img id="graph" src="plot.png" alt="My updating graph" />
</body>

</html>
File: reloader.js
function reloadGraph() {
   var now = new Date();

   document.images['graph'].src = 'plot.png?' + now.getTime();

   // Start new timer (1 min)
   timeoutID = setTimeout('reloadGraph()', 60000);
}

Dynamic Text

The following files provide a simple demonstration of AJAX. The result is a page that regularly updates to reflect changes made to a server side file. What makes it special is that only a portion of the page is reloaded, so you cut down on the amount of data downloaded by the client and the load on the web server.

There are three files. The main HTML page, ajaxTest.html that contains a div to hold the dynamically loaded data. Next, the javascript file, reloader.js that performs the reload at fixed intervals, in this case 60000ms, or once per minute. The last file, liveData is the actual data file that is placed in the div.

All you need to do now is regularly update the liveData file with the new content.

File: ajaxTest.html
<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>
   <title>AJAX Example</title>
   <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
   <script type="text/javascript" src="reloader.js"></script>
</head>

<body onload="reloadData()">
   <div id="currentData" align="center">
      <p>Loading Data...</p>
   </div>
</body>

</html>
File: reloader.js
var req;

function reloadData()
{
   var now = new Date();
   url = 'liveData?' + now.getTime();

   try {
      req = new XMLHttpRequest();
   } catch (e) {
      try {
         req = new ActiveXObject("Msxml2.XMLHTTP");
      } catch (e) {
         try {
            req = new ActiveXObject("Microsoft.XMLHTTP");
         } catch (oc) {
            alert("No AJAX Support");
            return;
         }
      }
   }

   req.onreadystatechange = processReqChange;
   req.open("GET", url, true);
   req.send(null);
}

function processReqChange()
{
   // If req shows "complete"
   if (req.readyState == 4)
   {
      dataDiv = document.getElementById('currentData');

      // If "OK"
      if (req.status == 200)
      {
         // Set current data text
         dataDiv.innerHTML = req.responseText;

         // Start new timer (1 min)
         timeoutID = setTimeout('reloadData()', 60000);
      }
      else
      {
         // Flag error
         dataDiv.innerHTML = '<p>There was a problem retrieving data: ' + req.statusText + '</p>';
      }
   }
}

Creating Live Data

When you have lots of browsers requesting pages that depends on live data, you need to be careful about how you update that data. For example, if you are regularly dynamically creating a new graph image, you need to make sure a half saved version of the image file is not served to a browser. If this happens, the browser will display a corrupt image, or nothing at all.

The trick is to first create your live file (an image, or text) to a temporary file. Next, when everything is saved, rename the file to the live file name.

Book Logo