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

Web Page Template

Most Automated Weather Station (AWS) software allows you to create web page templates into which you insert tags that the AWS replaces with actual weather data. For example I use Virtual Weather Station (VWS) from Ambient Weather. If I want VWS to insert the current temperature into a table cell then I'd put this into my HTML template:

<td>^vxv007^</td> 
 
To prepare the HTML template to receive data we need to replace the AWS tag (^vxv007^) with an HTML span tag that has a unique ID. So my current temperature cell becomes:
 
<td><span id="curtemp"></span></td>
 
Note that:
 
  • The span tag is empty for now, it'll be populated by our Javascript when the page is loaded.
  • The ID I've used is "curtemp"; but it could have been anything at all. For example I could have used id="currenttemperature" which is more readable; but takes longer to type!
 
Eventually I've a whole HTML table full of span tags, each of which has a unique ID. If you don't use uniqueIDs then the HTML will be invalid and this may yield unpredictable results.
 
Finally we need some means of triggering the page to load in the data and this is done by using the onLoad event on the web page's body tag:
 
<body onload="getData();">
 
Don't worry about where the getData(); comes from for now, we'll cover that in the Javascript section.
 
As a further example here's the HTML for the first row of my current conditions table:
 
<tr>
<td>Temperature °C</td>
<td><span id="curtemp"></span>°C</td>
<td><span id="maxtemp"></span>°C at <span id="maxtempt"></span></td>
<td><span id="mintemp"></span>°C at <span id="mintempt"></span></td>
<td><span id="avgtemp"></span>°C</td>
</tr> 
 

All the other rows are similar, each table cell having span tags with unique IDs. 

Next we'll look at the XML file that drives the transfer of data to the web browser.


<< Start < Prev 1 2 3 4 5 Next > End >>
Last Updated ( Thursday, 19 July 2007 )
 
[ Back ]