Lightweight JQuery ajax request for seamless page refresh

I have a web application that sends a get request to a local server every 5 seconds (once the user is inactive) to reload the data on the current page.

I'm using the JQuery load() method in a very simple way like this:

$('#outer').load('index.php #inner');

Firebug is telling me each request is completing in ~ 14-50ms so I don't think the requ开发者_JS百科ests are stacking.

My problem is after about 20-30 requests the pulled data gets a bit 'choppy' such that it disappears then reappears a few milliseconds later.

This 'choppiness' also cycles in and out every few minutes or so.

Since I am using the load method purely to page refresh in a seemless manner, are there any optins I can use to reduce the stress on the browser? Could I optimize the $.ajax() method in some way?

The best way to achieve your desired effect is going to take you more work unfortunately.

You'll need to get the data from index.php with an $.ajax jQuery call, and send the data through XML/JSON and then display it every 20-30 seconds. The data will be retrieved the the AJAX call and replace the current HTML with the new HTML (if the HTML differs - you'll need to stick this checking in there) and thus will be more effecient / less choppy.

You can also use slow polling to achieve the effect even more-so, if you want to get fancy with it. Take a look here for this: http://www.ape-project.org/