首页 > PHP > Ajax+PHP缓存遇到的坑

Ajax+PHP缓存遇到的坑

之前设计了一个ajax跨域请求json数据的功能,最近由于访问量增大需要在php程序中对前端返回的json信息进行缓存,于是写了一个缓存层,将如下信息进行缓存:

<?php
// 获取缓存文件路径
$cache_path = get_json_filepath();
// 检查缓存文件是否存在或过期
if(!file_exists($cache_path) || (filemtime($cache_path) + $cache_time < time()))
{
    // 从数据库中获取$json
    $json = get_json_from_database();
    // 写缓存
    file_put_contents($cache_path, jsonp_callback($json));
    echo jsonp_callback($json);
}else{
    // 直接从缓存中读取并返回给前端
    echo file_get_contents($cache_path);
}

// 跨域json解决方案
function jsonp_callback($json)
{
    if(isset($_GET['callback']))
    {
        return $_GET['callback']."($json)";
    }else{
        return "jsonp_callback($json)";
    }
}

由于之前的设计是通过jquery的$.getJSON()跨域获取的数据,所以在json上包装了一层callback函数名。添加完简单的缓存层之后就遇到问题了。

第一次请求(无任何缓存时)前端js可以正常工作,通过Chrome——Network——Response可以得到正常的字符串jsonp1451045842617({json数据}),执行了$.getJSON()的回调函数。

当然,此时php已经写好了缓存文件,第二次请求时直接从缓存中读取数据并返回给前端,可是并没有执行$.getJSON()的回调函数。

关键问题:此时浏览器没有任何报错,而且通过Chrome——Network——Response同样可以得到正常的字符串jsonp1451045842617({json数据})。


然后我删除了服务器上的缓存并重新测试,并将两次请求的字符串复制到两份文件并逐一比较,发现两次请求的Response完全相同,然后就纳闷了,为何两次ajax请求的结果完全相同的Response情况下却只有第一次生效?


问题就出在这两份完全相同的Response上,php文件中每一次$_GET['callback']的值都不一样(毫秒数不停的增长),而php返回给前端的函数名(始终为某个时刻的毫秒数)已经过期了,当然无法触发$.getJSON()回调了。


解决方案很简单,在写php缓存的时候不要带上毫秒数函数名,只对json字符串进行缓存:

<?php
// 获取缓存文件路径
$cache_path = get_json_filepath();
// 检查缓存文件是否存在或过期
if(!file_exists($cache_path) || (filemtime($cache_path) + $cache_time < time()))
{
    // 从数据库中获取$json
    $json = get_json_from_database();
    // 写缓存, 不包括函数名
    file_put_contents($cache_path, $json);
    
}else{
    // 直接从缓存中读取json数据
    $json = file_get_contents($cache_path);
}
echo jsonp_callback($json);

// 跨域json解决方案
function jsonp_callback($json)
{
    if(isset($_GET['callback']))
    {
        return $_GET['callback']."($json)";
    }else{
        return "jsonp_callback($json)";
    }
}


另外,如果没有jquery库的情况下我们仍然可以自行实现jsonp跨域,js代码还可以这样写:

<script>
var JSONP = {
    // 获取当前时间戳
    now: function() {
        return (new Date()).getTime();
    },
    
    // 获取16位随机数
    rand: function() {
        return Math.random().toString().substr(2);
    },
    
    // 删除节点元素
    removeElem: function(elem) {
        var parent = elem.parentNode;
        if(parent && parent.nodeType !== 11) {
            parent.removeChild(elem);
        }
    },
    
    // url组装
    parseData: function(data) {
        var ret = "";
        if(typeof data === "string") {
            ret = data;
        }
        else if(typeof data === "object") {
            for(var key in data) {
                ret += "&" + key + "=" + encodeURIComponent(data[key]);
            }
        }
        // 加个时间戳,防止缓存
        ret += "&_time=" + this.now();
        ret = ret.substr(1);
        return ret;
    },
    
    getJSON: function(url, data, func) {
        // 函数名称
        var name;
        
        // 拼装url
        url = url + (url.indexOf("?") === -1 ? "?" : "&") + this.parseData(data);
        
        // 检测callback的函数名是否已经定义
        var match = /callback=(\w+)/.exec(url);
        if(match && match[1]) {
            name = match[1];
        } else {
            // 如果未定义函数名的话随机成一个函数名
            // 随机生成的函数名通过时间戳拼16位随机数的方式,重名的概率基本为0
            // 如:jsonp_1355750852040_8260732076596469
            name = "jsonp_" + this.now() + '_' + this.rand();
            // 把callback中的?替换成函数名
            url = url.replace("callback=?", "callback="+name);
            // 处理?被encode的情况
            url = url.replace("callback=%3F", "callback="+name);
        }
        
        // 创建一个script元素
        var script = document.createElement("script");
        script.type = "text/javascript";
        // 设置要远程的url
        script.src = url;
        // 设置id,为了后面可以删除这个元素
        script.id = "id_" + name;
        
        // 把传进来的函数重新组装,并把它设置为全局函数,远程就是调用这个函数
        window[name] = function(json) {
            // 执行这个函数后,要销毁这个函数
            window[name] = undefined;
            // 获取这个script的元素
            var elem = document.getElementById("id_" + name);
            // 删除head里面插入的script,这三步都是为了不影响污染整个DOM啊
            JSONP.removeElem(elem);
            // 执行传入的的函数
            func(json);
        };
        
        // 在head里面插入script元素
        var head = document.getElementsByTagName("head");
        if(head && head[0]) {
            head[0].appendChild(script);
        }
    }
};
JSONP.getJSON("http://127.0.0.1/table.php?callback=?", "a=b&c=d", function(json) {
    console.log(json)
});

相应的php后端代码如下:

<?php
$json = json_encode(array(
    "html" => "Happy Christmas"
));
echo jsonp_callback($json);

// 跨域json解决方案
function jsonp_callback($json)
{
    if(isset($_GET['callback']))
    {
        return $_GET['callback']."($json)";
    }else{
        return "jsonp_callback($json)";
    }
}

原理上和jquery基本相同,只不过在这里在毫秒数之后又添加了2位随机数,这样出现同一毫秒请求2次的几率更小了。

仔细读一下上面的js代码,你会对jsonp的原理有一个比较深刻的认识。



本文地址:http://blog.zhengshuiguang.com/php/ajax-cache.html

转载随意,但请附上文章地址:-)

标签:jsonp跨域 php缓存

评论已关闭