Results 1 to 8 of 8

Thread: Ajax Auto Refresh

  1. #1
    Join Date
    Jul 2009
    Posts
    14
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default Ajax Auto Refresh

    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

  2. #2
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    29,030
    Thanks
    44
    Thanked 3,211 Times in 3,173 Posts
    Blog Entries
    12

    Default

    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.
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  3. #3
    Join Date
    Jul 2009
    Posts
    14
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    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

  4. #4
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    29,030
    Thanks
    44
    Thanked 3,211 Times in 3,173 Posts
    Blog Entries
    12

    Default

    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:

    HTML Code:
    <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:

    Code:
    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:

    Code:
    <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>
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  5. #5
    Join Date
    Jul 2009
    Posts
    14
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    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:

    Code:
    <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

  6. #6
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    29,030
    Thanks
    44
    Thanked 3,211 Times in 3,173 Posts
    Blog Entries
    12

    Default

    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:

    Code:
    <!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.
    Last edited by jscheuer1; 08-07-2010 at 02:40 AM. Reason: add detail
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  7. #7
    Join Date
    Jul 2009
    Posts
    14
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    all working. . .many thanks for your help

  8. #8
    Join Date
    Aug 2010
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    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)

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •