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 on the link, the content is set to div innerHTML, I set the cache:true attribute in jquery ajax, but if I click on the link again, the cache will not be displayed, the ajax function still remains going to the server side and reaching the same content, I got confused, cache:true really turned on the cache and what should I do to make it work?

Answer 1

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

• Response headers are returned from the source web server. If the headers indicate that the content should not be cached, then it will not.

• The response must include a validator, such as an ETag or Last-Modified header.

From this link

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

This indicates: the cache ability is determined by the server, and cache:true or cache:false for $.ajax is just to determine whether to search for a cached answer or not.