Continuously refreshing ajax

[Gafaddict]

Hi,

 

At the moment I'm trying to make a page using the AJAX component, and I've run into a bit of a snag. What I'm trying to do is have the page is to load a seperate page which displays the current time (down to seconds). The only problem is, I can't seem to make AJAX refresh the page to keep the page up-to-date. It simply displays the time at which the page was first loaded, then stops.

 

Is there any way to make AJAX continuously refresh? I've seen it before on sites like www.last.fm (their most recent journal list), but how they do it isn't apparent to me.

 

Thanks!

[RichardRotterdam]

Are you trying to make a serverside script return the time and continuously refresh??  :-\. That doesn't sound like the right approach if you want to display time why not use javascript only?

[Gafaddict]

Well no, there are less basic implementations of it on the site, I just used this as an example rather than the more descriptive ones, to avoid any confusion.

 

I guess a more sensical implementation of it would be a shoutbox somewhere on the page. Is there any way to make that page continuously refresh so when a message is posted you don't need to manually refresh it?

[RichardRotterdam]

I think i got your point.

check out the mootools frameworks with periodical function that can be handy i think

http://docs.mootools.net/Native/Function.js#Function.periodical

[Gafaddict]

Hi,

 

Thanks. I've got a question for you, though... how exactly would you implement that function? I've looked over the documentation and it doesn't seem to go into much detail about exactly how to do that. Say I wanted to periodically refresh a file called test.php -- how do I specify that file in the function?

[RichardRotterdam]

ok here is how to do it I made a little example for you. You need the mootools js file download it on the site

place this in head section

<script src="mootools.v1.11.js"></script>
<script>
var counter=0;

function refreshContent(){
//adds on to counter variable
counter++;
//this referes to the div with the id "content"
$('content').setText(counter);	
}
</script>

 

and place this in your body

<div id="content"></div>
<script>
//the function refreshContent is now periodical executed every 1000ms or every second
refreshContent.periodical(1000); 
</script>

 

try out my example and read the comment. now its just to place some ajax code in the function refresh content. I recommend you use mootools too since its a lot easier to write an ajax function with it

 

here is a mootools ajax example

var url = "http://demos.mootools.net/demos/Ajax/lipsum.html";

/**
 * The simple way for an Ajax request, use onRequest/onComplete/onFailure
 * to do add your own Ajax depended code.
 */
new Ajax(url, {
	method: 'get',
	update: $('log')
}).request();

[roopurt18]

I just wanted to chime in with an alternate approach that you might want to look into after you get the basics working.

 

Your example is you want to continuously update part of the page with the most recent contents from the server, which I assume are changing from input elsewhere.

 

Let's say that on average the part that is being updated consists of 2KB of text.  If you are refreshing this every 1 second that is 120KB of text every minute.  If you're site has a mere 10 users they will consume 1MB of bandwidth every minute, where each minute could be inactivity on their part.  This could be seem as extremely wasteful.

 

Let's say the file you want to refresh is stats.php.  The best approach is to store a timestamp on the server, possibly in your database, of the last time the stats were changed.  When you initially feed the page to your clients, they'll have the most up to date version of stats.php.  In addition to what you're already sending them, send them the server's timestamp as well.

 

Then you set up Javascript on the client to continuously poll the server using the timestamp it received as an argument.  The server will check the timestamp passed by the client and if it is older than the timestamp of the last change to stats.php, you can send the new stats page; otherwise you send a value indicating to the client that no change has been made.

 

Essentially, the conversation looks like this:

client: Server, I'd like to view home.php, which has embedded within it stats.php

 

server: Here is home.phpp along with stats.php; the last time stats.php was updated was 3PM today.

 

[LOOP]

client: Server, have the stats changed since 3PM today?

 

server: Yes, here are the new stats.

<Client updates that portion of the page>

 

~OR~

server: No

<Client does nothing>

[/LOOP]

 

The goal in this type of application is to cut down computation and response time as well as bandwidth.