Question

我有两个JSON源：getCachedJSON.php和getNotCachedJSON.php。正如名称所示，客户端应该缓存第一个而不是第二个的结果。这两个文件都会发出相应的标题，告诉客户端缓存或不缓存数据。

这是如何最好地完成的？

我想出了以下内容，但不知道这是不是应该怎么做。如果它是正确的方式，是应首先请求缓存的JSON，然后是非缓存的JSON，还是相反？

$.ajax({
    //cache: true,
    url: "getCachedJSON.php",
    dataType: "json",
    success: function(cachedJSON) {
        $.ajax({
            //cache: false,
            url: "getNotCachedJSON.php",
            dataType: "json",
            success: function(notCachedJSON) {
                var allJSON = $.extend({}, cachedJSON, notCachedJSON);
                console.log(allJSON);
            }
        });
    }
});

Answer 1

浏览器为您管理缓存。每当您进行GET请求时，浏览器都会检查其缓存中是否包含此资源。如果有，那么请求不会。要告诉浏览器如何控制缓存，您必须使用缓存控制和max-age等http标头（尝试谷歌了解详细信息）。当浏览器访问您的服务器时，您必须设置这些标头。您可以使用chrome的开发工具（网络）来检查是否有任何请求。在那里，您将看到是从缓存还是从请求获取资源。

如果您希望事件更好的缓存控制，我建议您使用服务工作者或浏览器SQL数据库。

希望我理解你的问题。

Answer 2

如果您想要在客户端发出服务器请求并将其缓存，您可以使用浏览器的本地存储。

你可以做一些事情：

var allData = cached(nonCached);

function cached(callback){
    var cachedData = localStorage.getItem('cached');
    // if locally stored data is found, pass it to the callback
    if(cachedData){
        callback(JSON.parse(cachedData));
    } else {
        // Else get it from php script, store it, and pass to callback
        $.ajax({
            url: "getNotCachedJSON.php",
            dataType: "json",
            success: function(cachedData) {
                var key = 'cached';
                localStorage.setItem(key, JSON.stringify(cachedData));  
                callback(cachedData);
            }
        });
    }
}


function nonCached(cachedData){
    $.ajax({
        url: "getNotCachedJSON.php",
        dataType: "json",
        success: function(nonCachedData) {
            return $.extend({}, cachedData, nonCachedData);
        }
     });
}

使用Ajax请求中的缓存和非缓存JSON

2 个答案: