Ajax Auto Refresh

[Eddie]

Sorry if this is in wrong section, wasn't sure which the Ajax section is..

Basically .. I have a shoutcast statistics script .. i'm wanting to put it in a Div Container and have that auto refresh every 30 secs, i'm not really clued up on the Ajax but I'm asking for help if anyone knows a simple piece of Ajax coding to have this refreshed.

Thanks for your time..

Eddie

[jscheuer1]

There are various ways to make AJAX requests, well - only one set of ways - to be cross browser, but this one set of ways is done many different ways in different scripts and in different script libraries. What differs though is the surrounding code and the ease with which it may afford you options for the request and what happens before during and after it is made.

To reoccur, you would need either an interval (set it and forget it type of loop) or a recurring timeout (must be reinitialized at the end of each loop). This is separate from the request itself. But could (and should in my opinion) be integrated into it. Like setting the timeout for the next request upon completion of the current request. I think that would be ideal. An interval, though often preferred, could in a case like this result in concurrent requests if the server and/or bandwidth are lagging.

If I may ask though, why every 30 seconds? Sometimes that's barely enough time to satisfy a request. In some case, not even. What's so important that it has to be updated that often? How about every three minutes?

I'm assuming that this shoutcast script is server side, or at least partially so. Otherwise there would be no need to request it with AJAX. If I'm right about that, you would need to prevent the server and the browser from caching the request. That's fairly easily done. Do you want to pass information to the shoutcast script? If so, can it be GET, or does it have to be POST?

Anyways, jQuery has some good code for AJAX:

http://api.jquery.com/jQuery.ajax/

as do other libraries. And there are many AJAX only type scripts around, like my:

http://www.dynamicdrive.com/forums/s...3&postcount=23

which, with minor modification to either its code and/or its invocation, should suit your needs.

[Eddie]

Hi and thanks for your reply.

Basically its a small shoutcast stats script that I just need refreshing to update the listener count (which can fluctuate as and when new people tune in or tune out) hence the 30 seconds refresh time as new tuners are in and out all the time. So it keeps a live update of the amount of listeners tuned in and names the dj on at the time.

I've had a look at the links you've left, with your script on the 2nd link how would I implement that to use my php file which is simply called shoutcaststats.php (where would I put my file name), like I said above i'm not that clued up on the Ajax side of things so just need a lil understanding and direction on where to put the file etc.

Thanks John for your help

[jscheuer1]

From what you say, there is no GET or POST data that needs to be sent to shoutcaststats.php, so all you would need to know is the id of the division you want to put it's info in. Let's say that id is 'shoutstats'. That would mean that you would have somewhere on your page:

<div id="shoutstats"></div>

Then you could put my script in the head of your page, with a few alterations to the stateChanged function to allow for a custom callback:

function loadXmlHttp(url, id) {
 var f = this;
 if (loadXmlHttp.xmlHttp){
  f.xmlHttp = loadXmlHttp.xmlHttp();
  f.el = document.getElementById(id);
  f.xmlHttp.open("GET", url, true);
  f.xmlHttp.onreadystatechange = function(){f.stateChanged();};
  f.xmlHttp.send(null);
 }
 else alert('Your browser does not support AJAX!'); // substitute your desired request object unsupported code here
}

loadXmlHttp.xmlHttp = null; loadXmlHttp.re = /^http/.test(window.location.href);
/*@cc_on @*/ // used here and below, limits try/catch to those IE browsers that both benefit from and support it
/*@if(@_jscript_version >= 5) // prevents errors in old browsers that barf on try/catch & problems in IE if Active X disabled
try {loadXmlHttp.ie = window.ActiveXObject}catch(e){};
@end @*/
if (window.XMLHttpRequest && (!loadXmlHttp.ie || loadXmlHttp.re))
 loadXmlHttp.xmlHttp = function(){return new XMLHttpRequest();}; // Firefox, Opera 8.0+, Safari, others, IE 7+ when live - this is the standard method
else if (/(object)|(function)/.test(typeof createRequest))
 loadXmlHttp.xmlHttp = createRequest; // ICEBrowser, perhaps others
else {
 loadXmlHttp.xmlHttp = null;
// Internet Explorer 5 to 6, includes IE 7+ when local //
/*@if(@_jscript_version >= 5)
try{loadXmlHttp.xmlHttp = function(){return new ActiveXObject("Msxml2.XMLHTTP");};}
 catch(e){try{loadXmlHttp.xmlHttp = function(){return new ActiveXObject("Microsoft.XMLHTTP");};}catch(e){}}
@end @*/
}

loadXmlHttp.prototype.stateChanged = function(){
 if (this.xmlHttp.readyState == 4 && (this.xmlHttp.status == 200 || !loadXmlHttp.re)){
  this.el.innerHTML = this.xmlHttp.responseText;
  if(this.success){
   this.success();
  }
  }
}

Then after your division you could put:

<div id="shoutstats"></div>
<script type="text/javascript">
(function(){
	var statsrequest = new loadXmlHttp('shoutcaststats.php', 'shoutstats'), repeat = arguments.callee;
	statsrequest.success = function(){setTimeout(repeat, 30000);};
})();
</script>

[Eddie]

Hi,

I've tried to add this into my template/php file to make it work with no luck.

Basically I run a vbulletin website site forum.. the shoutcast code is in its own php file with an iframe, linking to the php file, placed inside the forumhome template on vbulletin.

I tried adding your code above in both places, the php file and the template on vbulletin, one after another as the first time it didn't work.

Do you have any suggestions?

The code i'm using for the shoutcast stats (in the php file called: radiostats) are:

<body bgcolor=transparent>
<script type="text/javascript" src="http://******/*******/misc/scripts/streaminformation.js.php?id=82"></script>
<table border="0" bgcolor=#2F2C2C width="338">
	<tr>
		<th bgcolor=#000000><font color=#9FF8FF font size="3" font family="arial"><b><center><script>document.write(StreamInformation.SERVERTITLE())</script></center></b></font></th>
	</tr>

	<tr>
		<td align="center"><font color="yellow" font family="arial" font size="3"><b>
			<script>document.write(StreamInformation.CURRENTLISTENERS() +"/"+ StreamInformation.MAXLISTENERS() +" Listeners @ "+ StreamInformation.BITRATE() +"Kbps")</script></b></font>
</td>
</tr>
</table>
</body>

i've stared out the link to the server it gets the js file from as its not my server to leave in a public forum.

Thanks for your help

Eddie

[jscheuer1]

I don't really care what's in the PHP file. If it shows the information that you want, fine. If not, that's a matter for the PHP forum or perhaps for shoutcast support.

If you are using an iframe, you don't need AJAX. Are you trying to replace the iframe with a division, or just refresh the iframe? If the latter, all you need is a cache busting query string in an interval or recurring timeout that resets the src attribute of the iframe. If that's the case, let me know, it can easily be worked out.

Also, my code works if used as explained in my post. The only thing you might want to add is a cache busting query string. Here's a full working demo with the cache busting query string added:

<!DOCTYPE html>
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script type="text/javascript">
function loadXmlHttp(url, id) {
 var f = this;
 if (loadXmlHttp.xmlHttp){
  f.xmlHttp = loadXmlHttp.xmlHttp();
  f.el = document.getElementById(id);
  f.xmlHttp.open("GET", url, true);
  f.xmlHttp.onreadystatechange = function(){f.stateChanged();};
  f.xmlHttp.send(null);
 }
 else alert('Your browser does not support AJAX!'); // substitute your desired request object unsupported code here
}

loadXmlHttp.xmlHttp = null; loadXmlHttp.re = /^http/.test(window.location.href);
/*@cc_on @*/ // used here and below, limits try/catch to those IE browsers that both benefit from and support it
/*@if(@_jscript_version >= 5) // prevents errors in old browsers that barf on try/catch & problems in IE if Active X disabled
try {loadXmlHttp.ie = window.ActiveXObject}catch(e){};
@end @*/
if (window.XMLHttpRequest && (!loadXmlHttp.ie || loadXmlHttp.re))
 loadXmlHttp.xmlHttp = function(){return new XMLHttpRequest();}; // Firefox, Opera 8.0+, Safari, others, IE 7+ when live - this is the standard method
else if (/(object)|(function)/.test(typeof createRequest))
 loadXmlHttp.xmlHttp = createRequest; // ICEBrowser, perhaps others
else {
 loadXmlHttp.xmlHttp = null;
// Internet Explorer 5 to 6, includes IE 7+ when local //
/*@if(@_jscript_version >= 5)
try{loadXmlHttp.xmlHttp = function(){return new ActiveXObject("Msxml2.XMLHTTP");};}
 catch(e){try{loadXmlHttp.xmlHttp = function(){return new ActiveXObject("Microsoft.XMLHTTP");};}catch(e){}}
@end @*/
}

loadXmlHttp.prototype.stateChanged = function(){
 if (this.xmlHttp.readyState == 4 && (this.xmlHttp.status == 200 || !loadXmlHttp.re)){
  this.el.innerHTML = this.xmlHttp.responseText;
  if(this.success){
   this.success();
  }
  }
}
</script>
</head>
<body>
<div id="shoutstats"></div>
<script type="text/javascript">
(function(){
	var statsrequest = new loadXmlHttp('shoutcaststats.php?bust=' + new Date().getTime(), 'shoutstats'), repeat = arguments.callee;
	statsrequest.success = function(){setTimeout(repeat, 30000);};
})();
</script>
</body>
</html>

Just make sure the path to shoutcaststats.php is correct in the the last script near the bottom.

[Eddie]

all working. . .many thanks for your help

[marc001]

hello, I have no knowledge of this thing.. I recently built a website and i have added a chat box to it, I am wondering if it is possible to have the section where the chat box is to refresh only (not the entire page)