jquery and jsp - still saving in cache even cache:false and response.setHeader(“Cache-Control”, “no-cache”)

Question

I have a problem. I still can see that my cache is still increasing after I have placed this codes on my jsp.

<% response.setHeader("Cache-Control", "no-cache"); %>

and in my javascript/jquery which resides on the same jsp:

function waitForMsg() {
    $.ajax({
        type: "GET",
        url : contextPath + "/groupChat",
        async: true,
        cache: false,

        success: function (data) {
            $("#divChatMessageTable").load(contextPath + "/groupChat/message");
            setTimeout(waitForMsg, 1000);   
        },
        error: function(XMLHttpRequest, textStatus, errorThrown){
            setTimeout(waitForMsg, 15000);  
        }
    });
    if ($("#divChatMessageTable").height() > tableHeight) {
        scrollToBottomChat ();
        tableHeight = $("#divChatMessageTable").height();
    }
}

I have set the cache:false in the jquery.

Btw, Im using Firefox.

Please help.

Answer 1

You can likely get rid of the initial ajax call and just keep the load call ( which is also ajax). The one difference below is adding a success callback to load method so you aren't testing height of the new content before it has been inserted

function waitForMsg() {

    $("#divChatMessageTable").load(contextPath + "/groupChat/message", function({ 
        /* new content now exists*/
        if($("#divChatMessageTable").height() > tableHeight) {
            scrollToBottomChat();
            tableHeight = $("#divChatMessageTable").height();
        }
        setTimeout(waitForMsg, 1000);    
    });


}

API refrence for load http://api.jquery.com/load/

Answer 2

I have solved the issue by adding no-store, must-revalidate .

The code:

<% response.setHeader("Cache-Control", "no-cache, no-store, must-revalidate"); %>