Easy way of automatically updating web page

Posted by:

Alex on November 22, 2013

The web has a wonderful ability to be dynamic, this is the way it should be.
We don’t need to rely on the user to manually update/refresh to see the latest changes, we should hand it to them, that’s what computers are for after all!

With the following Code Byte, I’ve constructed the most basic entry-level point to help turn your static web pages into dynamic and self-updating ones!

The idea:
We have a webpage that shows you the visitors your favourite number, that for some reason you decide to change every few minutes, the user doesn’t have to refresh their browser, it’s just automatically shown to them!

Here’s how we do it:

You will need to create 2 files:
index.php
reload.txt (or name it whatever you like, just be sure to change the file name in the JavaScript section also).

The HTML:

<body onload="init()"> // Set up the initial JavaScript function, as shown in the JavaScript code.
  <div id="main">
    <div id="updateMe">
      <h2>guwii's Favourite Number is:</h2>
      <h1 id="guwiiFavouriteNumber"></h1>
    </div>
  </div>
</body>

The heart of it, the Java Script:

<script type="text/javascript">
function refresh() {
  var req = new XMLHttpRequest();
  console.log("Grabbing Value");
  req.onreadystatechange = function () {
    if (req.readyState == 4 && req.status == 200) {
      document.getElementById('guwiiFavouriteNumber').innerText = req.responseText;
    }
  }
  req.open("GET", 'reload.txt', true); // Grabs whatever you've written in this file
  req.send(null);
}

function init() // This is the function the browser first runs when it's loaded.
{
  refresh() // Then runs the refresh function for the first time.
  var int = self.setInterval(function () {
    refresh()
  }, 10000); // Set the refresh() function to run every 10 seconds. [1 second would be 1000, and 1/10th of a second would be 100 etc.
}
</script>

Just place the HTML anywhere on your page, and the Javascript in the <head> of your HTML document.

How it works:

The init() function is run as soon as the page/browser is loaded, this initial function then sets up the required JavaScript.

It sets, via the self.setInterval() function, the refresh() function to run every 10 seconds.

The refresh() function then uses the built in JavaScript and web standard XMLHttpRequest(); to run the update.

It does this by using a GET (a computers way of grabbing a file/value) to the “reload.txt” file. The value within this file is then updated to the HTML element with an ID of “guwiiFavouriteNumber”.

To test it, just save something different (or in keeping with our example, your ever-changing favourite number) in reload.txt and wait 10 seconds to see it change (or just change 10000 in the setInterval to 1000 to make it update every second!)

Note: To make this work you have to run it in a web environment. Eg, either on an actual website/server, or using a programme like WAMP/MAMP to set up a local web environment.

Feeling lazy? Here’s the whole sh-bang:

<!DOCTYPE html>
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf8" />
  <script type="text/javascript">
    function refresh() {
      var req = new XMLHttpRequest();
      console.log("Grabbing Value");
      req.onreadystatechange = function () {
        if (req.readyState == 4 && req.status == 200) {
          document.getElementById('guwiiFavouriteNumber').innerText = req.responseText;
        }
      }
      req.open("GET", 'reload.txt', true);
      req.send(null);
    }

    function init() {
      refresh()
      var int = self.setInterval(function () {
        refresh()
      }, 10000);
    }
  </script>
</head>

<body onload="init()">
  <div id="main">
    <div id="updateMe">
      <h2>guwii's Favourite Number is:</h2>
      <h1 id="guwiiFavouriteNumber"></h1>
    </div>
  </div>
</body>
</html>

From here…

Obviously, at the moment it’s still grabbing a static number from a text document, this can, of course, be changed to a simple PHP file that calculates any kind of function that outputs a value. (Eg, a random number via PHP, your sales stats, your DOB, etc, wherever your imagination takes you!)