// script for "An Ajax Weather Widget" demo:
/* code for creating the XMLHttpRequest object in a browser-portable way (thanks to David Flanagan's
"Javascript The Definitive Guide" for this code): */
// array of XMLHttpRequest creation "factories" to try:
var _factories =
[
function () { return new XMLHttpRequest (); },
function () { return new ActiveXObject ("Msxml2.XMLHTTP"); },
function () { return new ActiveXObject ("Microsoft.XMLHTTP"); }
];
var _factory = null; // stores the working "factory" for later reuse
// get a new XMLHttpRequest object:
function newRequestObj ()
{
if (_factory != null)
return _factory ();
for (var i = 0; i < _factories.length; ++i)
{
try
{
var factory = _factories[i];
var request = factory ();
if (request != null)
{
_factory = factory;
return request;
}
}
catch (e)
{
continue;
}
}
/* if we reach this point, none of the factory candidates succeeded, so throw an exception now and
for all future calls to newRequestObj: */
_factory = function ()
{
throw new Error ("XMLHttpRequest not supported");
}
_factory (); // throw an exception now
}
// uses an XMLHttpRequest object to obtain updated weather information from server PHP script:
function updateWeather ()
{
var requestObj = newRequestObj ();
requestObj.onreadystatechange = function ()
{
if (requestObj.readyState == 4) // document has been fully received
{
// check that a valid XML document object has been obtained:
if (requestObj.status != 200 ||
!requestObj.responseXML ||
!requestObj.responseXML.documentElement)
{
var weatherheaderTD = document.getElementById ("weatherheader");
weatherheaderTD.firstChild.data =
"Error: Could not access weather script (WeatherAjax.php)."
return;
}
// get xml document object from request object:
var xmlDoc = requestObj.responseXML;
// test for presence of XML element indicating an error:
var errorElements = xmlDoc.getElementsByTagName ("error");
if (errorElements && errorElements.length)
{
var weatherheaderTD = document.getElementById ("weatherheader");
weatherheaderTD.firstChild.data = errorElements[0].firstChild.data;
return;
}
// set date/time:
var d = new Date ();
var timeTD = document.getElementById ("time");
timeTD.firstChild.data = d.toLocaleDateString () + " at " + d.toLocaleTimeString ();
// set temperature:
var tempTD = document.getElementById ("temp");
tempTD.firstChild.data = xmlDoc.getElementsByTagName ("temp")[0].firstChild.data;
// set sky conditions:
var skyTD = document.getElementById ("sky");
skyTD.firstChild.data = xmlDoc.getElementsByTagName ("sky")[0].firstChild.data;
// set wind:
var windTD = document.getElementById ("wind");
windTD.firstChild.data = xmlDoc.getElementsByTagName ("wind")[0].firstChild.data;
/* debugging element: if the value of this element changes on each XMLHttpRequest request,
then the browser is actually obtaining new data rather than simply displaying old cached
data: */
var randP = document.getElementById ("rand");
randP.firstChild.data = xmlDoc.getElementsByTagName ("rand")[0].firstChild.data;
}
}
/* the Math.random() is a funky workaround to get IE to reload the document on each 'send' rather
than using a cached version (which otherwise persists throughout the browser session) --
a better solution is to just use POST, which doesn't have this problem: */
// requestObj.open ("GET", "http://mjyonline.com/Demos/WeatherAjax.php?" + Math.random(), true);
requestObj.open ("POST", "Demos/WeatherAjax.php", true);
requestObj.send (null);
}