Prevent caching after page refreshes every x seconds

Question

I'm building a news app. I refresh a div with the class of .new_feed every 10 seconds, to check for new updates, and when there is it shows up. Now the problem is, when there is a new feed in it, and the 10 seconds is up, and you don't click to see, and wait for 40 seconds before you click,it brings up 4 records instead of 1. I think the problem has to do with caching.

Refresh script that gets the headline of the news

$(document).ready(function() {
    $.ajaxSetup({ cache: false }); 
    setInterval(function() {
    $('.new_feed').load('headline.asp');
    }, 10000); 
});

Getting the feeds

$(function() {
    //More Button
    $('.more2').live("click",function() {
        var u_pic_id = $(this).attr("id");
        if (u_pic_id) {
            $("#more2"+u_pic_id).html('<img src="moreajax.gif" />');
            $.ajax({
                type: "POST",
                url: "show_more.asp",
                data: "lastmsg="+ id, 
                cache: false,
                success: function(html) {
                    $("ol#updates2").append(html);
                    $("#more2"+id).remove();
                }
            });
        }
        return false;
    });
});

</script>

HTML

<div id="more2<%=(rs_ncount_id.Fields.Item("id").Value)+1%>" class="morebox2">
    <a href="#" class="more2" id="<%=(rs_ncount_id.Fields.Item("id").Value)+1%>">
        Load New Feeds
    </a>
</div>

Answer 1

Using HTTP header

You have to set the Cache-Control HTTP/1.1 header at the server side. This is the recommended approach.

Using a nonce in the request

However you can also use a hacky solution, if you can't change the server settings. Use a nonce in the request:

$('.new_feed').load('headline.asp?' + nonce);

Because it will look like a different request to the browser, it will ignore the cached value.

The simplest solution for a nonce is using the current time:

var date = new Date();
var nonce = date.getMilliseconds(); 

Answer 2

I had an answer written up that pointed out the cache:false option for $.ajax but upon reviewing your OP I realized you were already using it. The documentation indicates the cache:false option will only append a timestamp on GET requests (and POST requests for IE8).

Since you're using a POST its unlikely the cache:false option is actually going to help (unless you're using IE8?). Instead, like @meskobalazs states you'll need to create and append a nonce .

One way to implement this might be like:

function getValues(id) {
  var url = 'myUrl?id=' + id;

  $.ajax({
    type: "POST",
    url: url + '&_=' + (new Date()).getTime()
  }).done(function(response) {
    // do stuff
  })
}

Of course if you have access to the server the appropriate way to handle this would be to correctly set the response headers. You may also consider using a more RESTful approach where the GET verb and route is used to request data.