Javascript实现带缓存的AJAX请求

JavaScript 可以实现带缓存的AJAX请求。

具体实现方法可以参照下面Demo

//单例模式AJAX请求
//可对AJAX请求进行缓存处理
function DataContext(){
    var m_data = null;
    this.getData = function(option){
        var opt = $.extend({
            cached: true,            //缓存参数，默认为试用缓存
            success: function(){},    //成功回调
            error: function(){}        //失败回调
        }, option);
        var self = this;
        if(opt.cached && m_data != null){    //满足读取缓存条件直接从缓存读取
            opt.success(m_data);
            return;
        }
        //否则执行AJAX请求读取
        $.ajax({
            url: "http://www.####.com/test.php",
            type: "POST",
            success: function(data){
                m_data = data;
                opt.success(m_data);
            },
            error: function(){
                opt.error("Network Error");
            }
        });
    };
}



//Demo:
var ctx = new DataContext();

//设置缓存参数，第一次没加载则自动ajax请求加载
ctx.getData({
    cached: true,
    success: function(data){
        alert(data);
    },
    error: function(msg){
        alert(msg);
    }
});

//省略缓存参数，默认为使用缓存
ctx.getData({
    success: function(data){
        alert(data);
    }
});

//禁用缓存，则强制新的ajax请求刷新
ctx.getData({
    cached: false,
    success: function(data){
        alert(data);
    }
});

//省略成功回调并禁用缓存则强制执行AJAX拉取数据。
//此方式可用于空闲时在浏览器端缓存数据，下次请求可直接从缓存读取
ctx.getData({cached: false});