TulligWeather.Net: Home arrow Reference arrow Using AJAX To Update Data On A Web Page
Using AJAX To Update Data On A Web Page PDF Print E-mail
Written by David Hollingworth   
Thursday, 19 July 2007

Introduction

Regular visitors to tullig.net wil know that one of my passions is the weather and that I run a weather station at home.  The data is updated on the TulligWeather section of this site with the current conditions being updated every two minutes by regenerating the entire page on the server at home and ftping it up to the tullig.net site every two minutes.

 

The disadvantages of this approach are:

  1. The entire page must be ftped up to the server each time

  2. The page doesn't refresh unless the user manualy clicks the refresh button on the browser

  3. I could get round the previous point by using a refresh directive in the web page head section; but this would still refresh the entire page, which isn't very elegant and is what I want to avoid.

 

Instead of these techniques I decided to use Asynchronous Javascript And XML (AJAX) to automatically perform the data refreshes on the page without the need  to either upload or refresh the entire page. The version of the current conditions you'll see on the site now is using these techniques and will update the data in the table every minute without having to reload the entire web page. Don't forget that in calm conditions the data doesn't change much in which case you might not see the page change much. However keep looking at the time in the top left hand corner of the table to see when updates occur.

In order to implement these techniques on your site you'll need 4 components:

  1. A web page template laid out ready to take the data.

  2. An XML file, generated by your weather station software and  transfered to your web site.

  3. A small script to serve up the XML file on request.

  4. Some Javascript that requests the XML and updates the web page.

Whilst the examples I've used here all revolve around the display of weather data the same techniques can be used to display any sort of data once you can format it into an XML file.

If you're already displaying weather data on your web site then you're a good way down the road already. So let's make a start by looking at the web page template.



Last Updated ( Thursday, 19 July 2007 )