Refresh a Section of a Page at Specific Intervals Using AJAX

Refreshing only a section of a page instead of reloading the entire page can be a nice touch for the user experience.

Beyond reloading a Div when the user does something (say, clicks a button), you can also use this technique to automatically reload a Div based on time intervals.

So if you want to refresh content in your sidebar every 40 seconds, you can combine our AJAX call with a jQuery setInterval and have a nice little effect for your user.

If you’re looking to load a Div based on the user’s actions, check out:

Using AJAX to reload only a Div

Statistics & Load Time

There are two things to think about when using AJAX to reload a Div.

First, Google Statistics. If you’re reloading an entire page, Google can easily see that as a page reload. Your bounce rate goes down (see: What is a Bounce Rate and Why Do You Care), your time on your site goes up. It’s puppies and rainbows.

But if you’re using AJAX to reload other pages’ information into your initial page, tracking Google statistics gets a little complicated. You’ll want to double-check that you have it implemented in such a way that each page you’re loading actually gets a hit, not just the initial page they visited.

Second, Load Time. There are a few good reasons to use AJAX to reload a portion of the page – load time is definitely one of them. If you’re loading additional information with AJAX, that doesn’t factor into your initial website load time. And a lower load time is always better.

In the example in the introduction, where you’re loading more information into a sidebar at specific intervals, using AJAX can get more information in front of the user which can result in more time on your site as they explore other links. But be careful how you apply this technique! It can easily backfire if your user can’t find the article link they were looking at earlier because it’s been replaced.

Using the SetInterval Function

The jQuery setInterval() function is a fairly simple function to use:

1
2
3
setInterval(function(){ 

        alert("Hello"); 

}, 3000);

Essentially, we’re using a pre-built function (setInterval) to call another function that alerts “Hello” every 3 seconds.

Time. The time for a setInterval function is done in milliseconds (hence the 3000 instead of 3 in the doing above)

Function. You can also call the function separately using the coding below:

Easy enough. So when you use the coding from the post Using AJAX to Reload Only a Div, we’ll add to it:

You can find the explanation for this code in the article above the code. In the example above, we’re adding lines 3, and changing, slightly, lines 4 and 8. Now, every 3 seconds, the “main” Div from the page property-detailed.php will be loaded into the “main” Div on this page.

That’s all there is to it!