jquery ajax使用代理缓存避免重复请求

在jquery的1.5版本中加了一个Deferred对象，jq的代码也做了大规模重写。如果想要了解该对象，推荐阅读：jQuery Deferred对象详细源码分析（-）

jq的ajax方法也用Deferred对象加入了新特性，现在我们来使用ajax新特性来实现xhr的代理缓存，主要目的：避免重复请求。

注意：代理缓存主要用来cache从server拉取的数据，对于client发数据到server处理的情况不要使用

对同一url二次请求分为两种情况

• 情况一：第一次请求还未完成，发出了第二次请求；
• 情况二：第一次请求已完成，再发出了第二次请求。

所以我们需要用到两个对象，一个__xhrCache__保存jqXhr，一个__dataCache__保存请求的结果

var jqXhrCache = {
            __xhrCache__: {}, 
            __dataCache__: {},
            request: function(op, doneCallback, failCallback) {
                var url = typeof op === 'string' ? op : op.url,
                    enUrl = encodeURIComponent(url), 
                    xca = this.__xhrCache__,
                    dca = this.__dataCache__;
                if(!xca[enUrl]) {
                    xca[enUrl] = $.ajax(op).done(function(data) {
                        dca[enUrl] = data;
                    });
                }
                if(dca[enUrl] === undefined) {
　　　　　　　　　　　 /*情况一：将第二次请求的回调事件追加给缓存的jqXhr对象*/
                    xca[enUrl].done(doneCallback).fail(failCallback);
                } else {
　　　　　　　　　　　 /*情况二：代入缓存结果执行第二次请求的回调事件*/
                    doneCallback.call(null, dca[enUrl], xca[enUrl]);
                }
                return xca[enUrl];
            }
        };

上面版本的不足之处是__xhrCache__和__dataCache__可能会被意外修改，虽然从命名上看起来像私有成员，但还是有被外界篡改的风险，那么下面使用闭包使它们真正私有化

var jqXhrCache = (function() {
            var __xhrCache__ = {}, __dataCache__ = {};
            return {
                request: function(op, doneCallback, failCallback) {
                    var url = typeof op === 'string' ? op : op.url,
                        enUrl = encodeURIComponent(url), 
                        xca = __xhrCache__,
                        dca = __dataCache__;
                    if(!xca[enUrl]) {
                        xca[enUrl] = $.ajax(op).done(function(data) {
                            dca[enUrl] = data;
                        });
                    }
                    if(dca[enUrl] === undefined) {
                        xca[enUrl].done(doneCallback).fail(failCallback);
                    } else {
                        doneCallback.call(null, dca[enUrl], xca[enUrl]);
                    }
                    return xca[enUrl];
                }
            };
        })();

 

到这里已经可以避免同一url的二次请求了，但这里cache对象在浏览器刷新或重新打开后又会被重置；如果需要长久保存请求的结果（如县市资料等不经常变动的数据），可以考虑使用html5中的localStorage。

使用方法：jqXhrCache.request('/testDefer.html', function(data) { console.log(data) }, function() { console.log('request fail') });

转载于:https://www.cnblogs.com/mapping/archive/2012/10/29/2745435.html