AJX and setInterval()

[chris davies]

Hello folks,
I new to AJAX and have been working on a script that rotates a banner asynchonosly, or at leat trying to work on it. My problem is that when I use setInterval() the banner should rotate the ads. If someone could look at my script and tell me where I'm goin wrong please? her is my AJAX

// holds an instance of XMLHttpRequest
var timerID = 5;
var xmlHttp = createXmlHttpRequestObject();
// holds the remote server address and parameters
var serverAddress = "rotate.php";


// creates an XMLHttpRequest instance
function createXmlHttpRequestObject()
{
  // will store the reference to the XMLHttpRequest object
  var xmlHttp;
  // this should work for all browsers except IE6 and older
  try
  {
    // try to create XMLHttpRequest object
    xmlHttp = new XMLHttpRequest();
  }
  catch(e)
  {
    // assume IE6 or older
    var XmlHttpVersions = new Array("MSXML2.XMLHTTP.6.0",
                                    "MSXML2.XMLHTTP.5.0",
                                    "MSXML2.XMLHTTP.4.0",
                                    "MSXML2.XMLHTTP.3.0",
                                    "MSXML2.XMLHTTP",
                                    "Microsoft.XMLHTTP");
    // try every prog id until one works
    for (var i=0; i<XmlHttpVersions.length && !xmlHttp; i++)
    {
      try
      {
        // try to create XMLHttpRequest object
        xmlHttp = new ActiveXObject(XmlHttpVersions[i]);
      }
      catch (e) {}
    }
  }
  // return the created object or display an error message
  if (!xmlHttp)
    alert("Error creating the XMLHttpRequest object.");
  else
    return xmlHttp;
}

// call server asynchronously
function process()
{
  // only continue if xmlHttp isn't void
  if (xmlHttp)
  {
    // try to connect to the server
    try
    {
      // initiate server access
      xmlHttp.open("GET", serverAddress, true);
      xmlHttp.onreadystatechange = handleRequestStateChange;
      xmlHttp.send(null);
    }
    // display the error in case of failure
    catch (e)
    {
      alert("Can't connect to server:\n" + e.toString());
    }
  }
}

// function called when the state of the HTTP request changes
function handleRequestStateChange()
{
  // when readyState is 4, we are ready to read the server response
  if (xmlHttp.readyState == 4)
  {
    // continue only if HTTP status is "OK"
    if (xmlHttp.status == 200)
    {
      try
      {
        // do something with the response from the server
        handleServerResponse();
      }
      catch(e)
      {
        // display error message
        alert("Error reading the response: " + e.toString());
      }
    }
    else

    {
      // display status message
      alert("There was a problem retrieving the data:\n" +
            xmlHttp.statusText);
    }
  }
}

// handles the response received from the server
function handleServerResponse()
{

  // obtain a reference to the <div> element on the page
  myDiv = document.getElementById("ajax_banner");

  //timerID = window.setTimeout("process()",3000);
  //window.clearTimeout(timerID);
  timerID = window.setInterval("process()",2000);
  window.clearInterval(timerID);

}

and here is the file I am calling:

<?php
// an array of banners
$banners = array (
    '<div class="padding"><a href="http://www.cineworld.co.uk/" alt=""><img src="images/cineworldcinema.jpg" alt=" cine world cinema " style="width:90px;height:90px; border:0px"/></a></div>',
    '<div class="padding"><a href="http://www.myvue.com/cinemas/index.asp?SessionID=56E9A7AE9EA748ACB6F559130635307E&cn=1&ln=1&ci=59" alt=""><img src="images/vuecinema.gif" alt=" vue cinema " style="width:90px;height:90px; border:0px"/></a></div>',
    '<div class="padding"><a href="http://www.newtheatrecardiff.co.uk/" alt=""><img src="images/newtheatre.jpg" alt=" new theatre " style="width:90px;height:90px; border:0px"/></a></div>',
    '<div class="padding"><a href="http://www.odeon.co.uk/fanatic/film_times/s3/Cardiff_formerly_UCI/" alt=""><img src="images/logo_odeon.gif" alt=" odeon cinema " style="width:90px;height:90px; border:0px"/></a></div>',
    '<div class="padding"><a href="http://www.acidcasuals.com/" alt=""><img src="images/acidcasuals.gif" alt=" acid casuals " style="width:90px;height:90px; border:0px"/></a></div>');
// pick a random one
$html = $banners[array_rand($banners)];

?>
<banner>
    <content><?php echo ($html); ?></content>
</banner>

the banner does work, and does rotate if I press the refresh button on the browser, What I woul dlike, is for the AJAX to re-poll the server asynchronously. Have I missed something out, or am I calling setIntetval in the wrong place or way please.
Any help greatly appreciated.

Chris

[chris davies]

just thought I'd post a note to say I solved my problem and it was an Internet Explorer problem in the way IE caches all results. If anyone would like to see the code contact me.

[eshcse]

hi chris... great tat u have solved tat. I am also having the same problem. i don't know the exact location where i have to put the setInterval() method. So pls give me the correct soln... thanks

[chris davies]

Hi there,
Actually, I wasn't using set interval in the wrong place at all. It was all to do with Internet Explorer caching the results, also what I have found since then is that IE prefers to use the POST method while the Mozilla type browsers like to use the GET method.

To cure the caching problem you need to set a timestamped value and concatenate it to the procedure call, something like the following:

var date = new Date();
var timestamp = date.getTime();
var url = 'yourfilenamehere?' + 'time='+ timestamp;

Remembering to add the '?' for then concatenation

I then had to set up two functions, one each for IE and Mozilla, using:

xmlHttp.open('post', url, true);

for IE and

xmlHttp.open('get', url, true)

for Mozilla

Then all you have to do is create and IF clause and test for the browser version, thus selecting the different functions for each browser version.

Hope this helps

Chris

[eshcse]

thank you chris for ur timely help... now my web page s working fine. it is getting updated correctly after specific interval of time..

regards
esh