原文链接

AJAX-Cache是什么

Ajax是前端开发必不可少的数据获取手段,在频繁的异步请求业务中,我们往往需要利用“缓存”提升界面响应速度,减少网络资源占用。AJAX-Cache是一款jQuery缓存插件,可以为$.ajax()方法扩展缓存功能。

AJAX-Cache提供什么

1. 定时缓存

大多数的缓存场景是,希望将某个接口数据在一定时间段内缓存起来,缓存期内不再发起请求直接返回本地数据,过了这段时间再重新获取并更新缓存。

这就是“定时缓存”的典型使用场景,我们可以为$.ajax()方法传入localCache: Number开启定时缓存,Number是缓存秒毫秒数。定时缓存实际上是牺牲了数据实时性换取响应速度,使用中通过设置不同的缓存时长,可以匹配不同的业务场景,比如对于相对稳定的数据可以设置较长的缓存时间,而设置较短的缓存时间则可以起到请求“防抖”作用。

2. 快照缓存

更多的时候我们希望接口能兼具实时性和响应速度,比如应用首屏的异步数据块,既要快又要新,虽然这种需求听起来很“不科学”,但我们确实可以通过“快照缓存”满足这个需求。

$.ajax()方法传入localCache: "snapshot"可以开启快照缓存,此时每当接口成功请求后都会为数据建立一份“快照”,下次请求时接口会首先将最近的快照数据作为结果返回,供前端渲染界面,同时发送请求获取最新数据,新数据到达后会与快照做对比,如果与快照相同则缓存命中,如果与快照不同会更新快照,并将新数据返回,供前端更新界面。也就是说启用快照缓存的接口前端有可能得到两次返回结果,为了让前端能够区分出快照,对象格式的快照数据会自动增加一个snapshot=true的属性。

3. 缓存清理

插件本身会自动清理过期缓存;

对于不想继续使用缓存的接口可以为$.ajax()方法传入localCache: false清理当前接口的缓存并返回最新数据;

也可以调用$.ajaxCache.clear()清理所有AJAX-Cache插件产生的缓存。

4. 并发管理

除了上述基本功能,AJAX-Cache还考虑到了极端情况下的请求并发问题,当某个接口在本地没有缓存或者缓存过期时发生了并发,AJAX-Cache会拦截并发请求,暂存请求回调,只向服务端发送一次请求,待拿到数据后再依次执行暂存的请求回调,从而真正起到减少网络资源占用的作用。

5. 约定优于配置

最后,Ajax-Cache奉行“约定优于配置”的理念,将主要功能都集中到一个localCache配置上,使用简单,将对业务代码的侵入性降到最低,如果没有使用$.ajaxCache全局方法的话,从页面中直接将Ajax-Cache插件移除业务代码也不会报错。

使用简单不代表功能简单,如果需要修改Ajax-Cache的全局配置,也可以通过$.ajaxCache.set(config[Object])方法实现,目前有两个配置项:

扩展信息

官网:http://refined-x.com/AJAX-Cache/
Github:https://github.com/tower1229/AJAX-Cache

前端路上原创技术文章,转载请注明出处:http://refined-x.com/2018/03/07/AJAX-Cache/

对文章内容有任何疑问欢迎留言讨论,或者扫描下方二维码加入“前端路上-知识星球”付费提问。

AJAX-Cache:一款好用的Ajax缓存插件的更多相关文章

  1. 详解使用双缓存解决Canvas clearRect引起的闪屏问题

    这篇文章主要介绍了详解使用双缓存解决Canvas clearRect引起的闪屏问题的相关资料,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧

  2. 利用Node实现HTML5离线存储的方法

    这篇文章主要介绍了利用Node实现HTML5离线存储的方法,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下

  3. HTML5 Web缓存和运用程序缓存(cookie,session)

    这篇文章主要介绍了HTML5 Web缓存和运用程序缓存(cookie,session),小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧

  4. 前端实现背景虚化但内容清晰且自适应 的实例代码

    这篇文章主要介绍了前端实现背景虚化但内容清晰且自适应 的实例代码,需要的朋友可以参考下

  5. 详解前端HTML5几种存储方式的总结

    本篇文章主要介绍了前端HTML5几种存储方式的总结 ,主要包括本地存储localstorage,本地存储sessionstorage,离线缓存(application cache),Web SQL,IndexedDB。有兴趣的可以了解一下。

  6. 在iOS上,缓存绘制的屏幕图像并显示它的最快方法是什么?

    我没有让drawRect每次重绘数千个点,我认为有几种方法可以“在屏幕上缓存图像”和任何其他绘图,我们将添加到该图像,并在drawRect时显示该图像:>使用BitmapContext并绘制到位图,并在drawRect中绘制此位图.>使用CGLayer并在drawRect中绘制CGLayer,这可能比方法1快,因为此图像缓存在图形卡中(并且它不会计入iOS上“内存警告”的RAM使用情况?

  7. ios – NSURLCache和数据保护

    我正在尝试保护存储在NSURLCache中的敏感数据.我的应用程序文件和CoreDatasqlite文件设置为NSFileProtectionComplete.但是,我无法将NSURLCache文件数据保护级别更改为NSFileProtectionCompleteUntilFirstUserAuthentication以外的任何其他级别.这会在设备锁定时暴露缓存中的任何敏感数据.我需要缓存响应,以

  8. iOS Safari多久会清除一次缓存?

    我使用移动Safari缓存来存储我想要持久化的一些数据,所以我希望它们能够在Safari重启和iOS重启后继续存在.但是我已经阅读了somenew和someold报告,Safari在Safari重新启动时清除了它的缓存.但我对Safari8.3的非科学测试表明,有时这个缓存实际上不仅可以在应用程序重启后生存,而且甚至可以重启iOS(!).所以我在这一点上有点困惑.iOSSafari缓存清除的规则是否记录在某处?你们中有谁知道他们并且可以向我解释他们吗?解决方法希望有人发现我错了但是……

  9. ios – 如何获取缓存图像SDWebImage的数据

    我正在使用SDWebImage库来缓存我的UICollectionView中的Web图像:但我想将缓存的图像本地保存在文件中,而不是再次下载它们有没有办法获取缓存图像的数据解决方法SDWebImage默认自动缓存下载的图像.您可以使用SDImageCache从缓存中检索图像.当前应用会话有一个内存缓存,它会更快,并且有磁盘缓存.用法示例:还要确保在文件中导入SDWebImage.(如果您使用的是Swift/Carthage,它将导入WebImage

  10. 缓存 – NSURLCache在iOS5上提供不一致的结果,似乎是随机的

    我刚刚花了很长时间在NSURLCache尖叫我,所以我提供了一些建议,希望别人能够避免我的不幸.这一切都足够合理.我的新应用程序项目只针对iOS5及更高版本,所以我认为我可以利用新的NSURLCache实现我所有的Web缓存需求.我需要一个NSURLCache的自定义子类来处理一些特殊的任务,但是这似乎都被API的有力支持.快速阅读文档,我会参加比赛:我认为一个8MB缓存启动是很好的,我会用更大的

随机推荐

  1. xe-ajax-mock 前端虚拟服务

    最新版本见Github,点击查看历史版本基于XEAjax扩展的Mock虚拟服务插件;对于前后端分离的开发模式,ajax+mock使前端不再依赖后端接口开发效率更高。CDN使用script方式安装,XEAjaxMock会定义为全局变量生产环境请使用xe-ajax-mock.min.js,更小的压缩版本,可以带来更快的速度体验。

  2. vue 使用 xe-ajax

    安装完成后自动挂载在vue实例this.$ajaxCDN安装使用script方式安装,VXEAjax会定义为全局变量生产环境请使用vxe-ajax.min.js,更小的压缩版本,可以带来更快的速度体验。cdnjs获取最新版本点击浏览已发布的所有npm包源码unpkg获取最新版本点击浏览已发布的所有npm包源码AMD安装require.js安装示例ES6Module安装通过Vue.use()来全局安装示例./Home.vue

  3. AJAX POST数据中文乱码解决

    前端使用encodeURI进行编码后台java.net.URLDecoder进行解码编解码工具

  4. Koa2框架利用CORS完成跨域ajax请求

    实现跨域ajax请求的方式有很多,其中一个是利用CORS,而这个方法关键是在服务器端进行配置。本文仅对能够完成正常跨域ajax响应的,最基本的配置进行说明。这样OPTIONS请求就能够通过了。至此为止,相当于仅仅完成了预检,还没发送真正的请求呢。

  5. form提交时,ajax上传文件并更新到<input>中的value字段

  6. ajax的cache作用

    filePath="+escape;},error:{alert;}});解决方案:1.加cache:false2.url加随机数正常代码:网上高人解读:cache的作用就是第一次请求完毕之后,如果再次去请求,可以直接从缓存里面读取而不是再到服务器端读取。

  7. 浅谈ajax上传文件属性contentType = false

    默认值为contentType="application/x-www-form-urlencoded".在默认情况下,内容编码类型满足大多数情况。在这里,我们主要谈谈contentType=false.在使用ajax上传文件时:在其中先封装了一个formData对象,然后使用post方法将文件传给服务器。说到这,我们发现在JQueryajax()方法中我们使contentType=false,这不是冲突了吗?这就是因为当我们在form标签中设置了enctype=“multipart/form-data”,

  8. 909422229_ajaxFileUpload上传文件

    ajaxFileUpload.js很多同名的,因为做出来一个很容易。我上github搜AjaxFileUpload出来很多类似js。ajaxFileUpload是一个异步上传文件的jQuery插件传一个不知道什么版本的上来,以后不用到处找了。语法:$.ajaxFileUploadoptions参数说明:1、url上传处理程序地址。2,fileElementId需要上传的文件域的ID,即的ID。3,secureuri是否启用安全提交,默认为false。4,dataType服务器返回的数据类型。6,error

  9. AJAX-Cache:一款好用的Ajax缓存插件

    原文链接AJAX-Cache是什么Ajax是前端开发必不可少的数据获取手段,在频繁的异步请求业务中,我们往往需要利用“缓存”提升界面响应速度,减少网络资源占用。AJAX-Cache是一款jQuery缓存插件,可以为$.ajax()方法扩展缓存功能。

  10. jsf – Ajax update/render在已渲染属性的组件上不起作用

    我试图ajax更新一个有条件渲染的组件。我可以确保#{user}实际上是可用的。这是怎么引起的,我该如何解决呢?必须始终在ajax可以重新呈现之前呈现组件。Ajax正在使用JavaScriptdocument.getElementById()来查找需要更新的组件。但是如果JSF没有将组件放在第一位,那么JavaScript找不到要更新的内容。解决方案是简单地引用总是渲染的父组件。

返回
顶部