jQuery ajax缓存响应

I am using jQuery's $.ajax() method in order to issue an XHR based HTTP GET to retrieve a partial of HTML from a Ruby on Rails site. In this particular case, whenever a use clicks on a tabbed navigation, I updated an HTML table with data that comes back from the server. The thing is, once the data is available on the server, it never changes. When a user clicks from one tab to the next, it needlessly makes more XHR requests to the server for data that it should already have and/or be cached. I tried using the cache: true attribute, but I don't think that works like I thought it would. Here's an example of my script:

 $.ajax({
      url: "/nba/value_charts/" + site_id + "/" + t_date,
      cache: true
    })
    .done(function( html ) {
      $("#vr").html(html)
      $(".value-charts").tablesorter(); 
 });

Is there something I could do so that when a tab is re-clicked it uses the HTML over it fetched previously at least until the user refreshes the page? It should only make the XHR request if the cache does not exist. Is this currently builtin to jQuery or do I have to write the logic myself for it to work?

What is t_date?

If you are appending a timestamp to the url (which is what cache: false does), then the browser will always send the new request, since it considers all unique url / query string parameters as unique GET requests.

Does the response to your request have a cache-control header? If that is set to no-cache, then the browser would also request the resource each time.

If you want to avoid sending the request, you'll have to do that yourself.

window.ajaxCache = {};

// later on:
if (!window.ajaxCache["/nba/value_charts/" + site_id + "/" + t_date]) {
    window.ajaxCache["/nba/value_charts/" + site_id + "/" + t_date] = $.get("/nba/value_charts/" + site_id + "/" + t_date);
}
window.ajaxCache["/nba/value_charts/" + site_id + "/" + t_date].done(function( html ) {
    $("#vr").html(html)
    $(".value-charts").tablesorter(); 
});

All cache: true does is avoid setting a _ parameter to prevent caching, allowing the browser to cache it just like it would an image, assuming the server is returning headers that tell the browser to cache it.

this is easy enough to abstract behind a function:

getCachableData = (function(){
    var ajaxCache = {};
    return {
        get: function(url) {}
            if (!ajaxCache[url]) {
                ajaxCache[url] = $.get(url);
            }
            return ajaxCache[url];
        },
        clear: function(url) {
            if (url) {
                ajaxCache[url] = false;
            }
            else {
                ajaxCache = {};
            }
        }
    };
})();

// later on...
getCachableData.get("/nba/value_charts/" + site_id + "/" + t_date).done(function(html){
    $("#vr").html(html)
    $(".value-charts").tablesorter(); 
});