cache:true funktioniert nur mit GET- und HEAD-Anfrage.
Sie könnten Ihre eigene Lösung, wie Sie sagten, mit etwas in diese Richtung rollen:
var localCache = {
data: {},
remove: function (url) {
delete localCache.data[url];
},
exist: function (url) {
return localCache.data.hasOwnProperty(url) && localCache.data[url] !== null;
},
get: function (url) {
console.log('Getting in cache for url' + url);
return localCache.data[url];
},
set: function (url, cachedData, callback) {
localCache.remove(url);
localCache.data[url] = cachedData;
if ($.isFunction(callback)) callback(cachedData);
}
};
$(function () {
var url = '/echo/jsonp/';
$('#ajaxButton').click(function (e) {
$.ajax({
url: url,
data: {
test: 'value'
},
cache: true,
beforeSend: function () {
if (localCache.exist(url)) {
doSomething(localCache.get(url));
return false;
}
return true;
},
complete: function (jqXHR, textStatus) {
localCache.set(url, jqXHR, doSomething);
}
});
});
});
function doSomething(data) {
console.log(data);
}
Hier Geige arbeiten
BEARBEITEN: Da dieser Beitrag immer beliebter wird, ist hier eine noch bessere Antwort für diejenigen, die den Timeout-Cache verwalten möchten, und Sie müssen sich auch nicht um das ganze Durcheinander in $ .ajax () kümmern, da ich $ .ajaxPrefilter () verwende. . Jetzt {cache: true}reicht es aus, nur den Cache richtig zu behandeln:
var localCache = {
/**
* timeout for cache in millis
* @type {number}
*/
timeout: 30000,
/**
* @type {{_: number, data: {}}}
**/
data: {},
remove: function (url) {
delete localCache.data[url];
},
exist: function (url) {
return !!localCache.data[url] && ((new Date().getTime() - localCache.data[url]._) < localCache.timeout);
},
get: function (url) {
console.log('Getting in cache for url' + url);
return localCache.data[url].data;
},
set: function (url, cachedData, callback) {
localCache.remove(url);
localCache.data[url] = {
_: new Date().getTime(),
data: cachedData
};
if ($.isFunction(callback)) callback(cachedData);
}
};
$.ajaxPrefilter(function (options, originalOptions, jqXHR) {
if (options.cache) {
var complete = originalOptions.complete || $.noop,
url = originalOptions.url;
//remove jQuery cache as we have our own localCache
options.cache = false;
options.beforeSend = function () {
if (localCache.exist(url)) {
complete(localCache.get(url));
return false;
}
return true;
};
options.complete = function (data, textStatus) {
localCache.set(url, data, complete);
};
}
});
$(function () {
var url = '/echo/jsonp/';
$('#ajaxButton').click(function (e) {
$.ajax({
url: url,
data: {
test: 'value'
},
cache: true,
complete: doSomething
});
});
});
function doSomething(data) {
console.log(data);
}
Und die Geige hier SORGFÄLTIG, nicht mit $ .Deferred arbeiten
Hier ist eine funktionierende, aber fehlerhafte Implementierung, die mit verzögert arbeitet:
var localCache = {
/**
* timeout for cache in millis
* @type {number}
*/
timeout: 30000,
/**
* @type {{_: number, data: {}}}
**/
data: {},
remove: function (url) {
delete localCache.data[url];
},
exist: function (url) {
return !!localCache.data[url] && ((new Date().getTime() - localCache.data[url]._) < localCache.timeout);
},
get: function (url) {
console.log('Getting in cache for url' + url);
return localCache.data[url].data;
},
set: function (url, cachedData, callback) {
localCache.remove(url);
localCache.data[url] = {
_: new Date().getTime(),
data: cachedData
};
if ($.isFunction(callback)) callback(cachedData);
}
};
$.ajaxPrefilter(function (options, originalOptions, jqXHR) {
if (options.cache) {
//Here is our identifier for the cache. Maybe have a better, safer ID (it depends on the object string representation here) ?
// on $.ajax call we could also set an ID in originalOptions
var id = originalOptions.url+ JSON.stringify(originalOptions.data);
options.cache = false;
options.beforeSend = function () {
if (!localCache.exist(id)) {
jqXHR.promise().done(function (data, textStatus) {
localCache.set(id, data);
});
}
return true;
};
}
});
$.ajaxTransport("+*", function (options, originalOptions, jqXHR, headers, completeCallback) {
//same here, careful because options.url has already been through jQuery processing
var id = originalOptions.url+ JSON.stringify(originalOptions.data);
options.cache = false;
if (localCache.exist(id)) {
return {
send: function (headers, completeCallback) {
completeCallback(200, "OK", localCache.get(id));
},
abort: function () {
/* abort code, nothing needed here I guess... */
}
};
}
});
$(function () {
var url = '/echo/jsonp/';
$('#ajaxButton').click(function (e) {
$.ajax({
url: url,
data: {
test: 'value'
},
cache: true
}).done(function (data, status, jq) {
console.debug({
data: data,
status: status,
jqXHR: jq
});
});
});
});
Geige HIER Bei
einigen Problemen hängt unsere Cache-ID von der JSON-Objektdarstellung von json2 lib ab.
Verwenden Sie die Konsolenansicht (F12) oder FireBug, um einige vom Cache generierte Protokolle anzuzeigen.