how to enable caching in jquery ajax

Question

jQuery("#divProviders img").click(function (e) {
    //alert(jQuery(this)[0].nameProp);
    document.getElementById("TxtProvPic").value = jQuery(this)[0].getAttribute("src"); //jQuery(this)[0].nameProp;


    $.ajax({
        type: "GET",
        url: "Services/TeleCom/EVoucher.aspx",
        data: "ExtFlag=GetProducts&AjaxFalg=SpecialRequest&prov=" + jQuery(this)[0].id.replace("img_", "") + "&pcat=" + document.getElementById("Txhhc").value,
        beforeSend: function () {
            document.getElementById("DivProducts").innerHTML = "";
            document.getElementById("DivLoad").innerHTML = "<img alt='' style='margin-left:300px;margin-top:80px;position:absolute;'  src='App_Themes/VivaTheme/images/bigloading2.gif'/>";
        },
        cache: true,
        success: function (data) {

            var StrResponse;
            StrResponse = data.split('@@@');

            EvoucherFillProductsRes(StrResponse[0]);

        },
        error: function (xhr) {
            alert("responseText: " + xhr.responseText);
        }
    });

    function EvoucherFillProductsRes(res) {
        var slices = res.split("*******");
        document.getElementById("DivProducts").innerHTML = slices[0];
        document.getElementById("DivMenu").innerHTML = slices[1];
        document.getElementById("DivLoad").innerHTML = "";
        jQuery("#BrowsableTwo").scrollable({
            prev: 'a.prodprev',
            next: 'a.prodnext'
        }).navigator();

    }

I have this function when i click to the link a content is set to a div innerHTML i set cache:true attribute in the jquery ajax but if i click again to the link no cache is displayed the ajax function is still going to the server side and reach for the same content i am confused is cache:true really enable cache and what should i do to make it work ?

Answer 1

cache:true is the default and does not always get the content from the cache. The cache-ability of an item on the browser is determined by:

• The response headers returned from the origin web server. If the headers indicate that content should not be cached then it won’t be.

• A validator such as an ETag or Last-Modified header must be present in the response.

From this link

cache:false has another use case to always load the content from server regardless of whether that content is cached or not.

The point here is: the cache-ability is determined by the server and cache:true or cache:false of the $.ajax is just to determine whether to look for the cached response or not.