栏目分类:
子分类:
返回
名师互学网用户登录
快速导航关闭
当前搜索
当前分类
子分类
实用工具
热门搜索
名师互学网 > IT > 面试经验 > 面试问答

在javascript /浏览器中缓存jquery ajax响应

面试问答 更新时间: 发布时间: IT归档 最新发布 模块sitemap 名妆网 法律咨询 聚返吧 英语巴士网 伯小乐 网商动力

在javascript /浏览器中缓存jquery ajax响应

cache:true
仅适用于GET和HEAD请求。

您可以按照以下方式推出自己的解决方案:

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);}

在这里工作

编辑:随着这篇文章的流行,对于那些想要管理超时缓存的人来说,这是一个更好的答案,而且当我使用$
.ajaxPrefilter()时
,您也不必费心$
.ajax()中的所有混乱。。现在只需进行设置就足以正确处理缓存:

{cache:true}

var localCache = {        timeout: 30000,        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);}

而且这里的小提琴要 小心,不能与$一起使用。

这是一个可行但有缺陷的实现,与deferd一起使用:

var localCache = {        timeout: 30000,        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 () {      }        };    }});$(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 });        });    });});

在这里 有些问题,我们的缓存ID取决于json2 lib JSON对象表示形式。

使用控制台视图(F12)或FireBug查看由缓存生成的一些日志。



转载请注明:文章转载自 www.mshxw.com
本文地址:https://www.mshxw.com/it/427324.html
我们一直用心在做
关于我们 文章归档 网站地图 联系我们

版权所有 (c)2021-2022 MSHXW.COM

ICP备案号:晋ICP备2021003244-6号