在客户端缓存Ajax请求

浏览器可以缓存图片、js文件、css文件,同样浏览器也可以缓存XML Http调用(当然这需要XML Http以get方式发送调用),这种缓存基于URL,当我们发送一个请求时,如果和以前请求的URL相同,那么浏览器就会从缓存中响应,而不是从重新请求服务器,这可以节省一些时间。通常来说,浏览器会缓存所有的Http get请求的结果,所以如果我们让XML Http以get方式发送请求,并且服务器返回特定的header告诉浏览器缓存结果,那么在以后的请求中,我们就可以直接从缓存中得到响应,从而节约了大量的时间。

在PageFlakes网站中,作者缓存了用户状态,所以如果用户重新登录网站,用户将会从浏览器缓存中得到一个缓存的页面而不是重新请求服务器,所以第二次访问是快很多,另外作者还缓存了许多用户的操作结果,所以当用户重新做相同的动作时,被缓存的结果会迅速的出现,这就使用户得到了更好的体验。

所以如果以http get方式调用Ajax请求时,我们应该返回特定的http header以告诉浏览器缓存请求的结果。下面是两种不同的方式,我们可以采取其中之一:

HTTP/1.1 200 OK 
Expires: Fri, 1 Jan 2030 
Cache-Control: public

上面的header告诉浏览器将请求结果缓存到2030年,所以如果我们在2030年之前发出同样的xml http请求,浏览器都会直接从缓存中读取结果,而不用重新请求服务器。另外还有一种更高级的header用来控件请求结果的缓存,下面的header指示浏览器也将请求结果缓存60分钟,并在60分钟后重新请求结果,

HTTP/1.1 200 OK 
Cache-Control: private, must-revalidate, proxy-revalidate, max-age=60

 

好的应用浏览器缓存

使用一致的URL

浏览器缓存的基础是URL,当一个URL改变时,浏览器就会从服务器重新请求页面。我们可以通过不同的查询参数来改变URL,例如我们在缓存中缓存了default.aspx页面,如果我们再请求default.aspx/?1页面,这时虽然是相同的操作,但浏览器仍会重新请求服务器,另外如果在Header中做了设置,新的请求结果也会被缓存。因此我们要确保使用一致的URL。一个常见的错误是在是URL中省略www,例如https://www.cnblogs.com/yijieyufu/和和cnblogs.com/yijieyufu/会被分别缓存会被分别缓存

将静态内容的缓存周期设的长些

静态文件可以设置一个长的缓存周期,比如一个月。如果你认为你应该缓存两天,这样当你改变了文件后,用户就可以很快的得到新的文件,这就你错了,当你更新了一个被expires缓存的文件后,新用户会立即得到更改后的文件,而老用户只有在缓存到期后才能得到更改后的文件。所以只要你应用了Expires去缓存静态文件,就应该将过期周期设的尽可能地大。

例如如果你将一个静态文件的缓存周期设为三天,一个用户A在今天访问页面并将其缓存三天,另一个用户B在明天访问页面并同样缓存页面。所以如果你在后天改变了文件,那么用户A将会在第四天看到新文件,用户B将会在第五天看到新文件,这就会导致不同的用户看到不同的文件,这不是我们想要的结果,所以如果我们更改了文件并将想让用户立即看到更改后的文件,我们应该通过不同的URL来访问文件。

缓存AJAX的请求的更多相关文章

  1. 唯独ie浏览器缓存ajax请求

    用fiddler调试http请求,在ie浏览器下,如果请求命中缓存,fiddler不会包含该请求.但是在chrome下会包含缓存的请求,Result显示为304. ie浏览器还会缓存通过ajax请求的 ...

  2. 学习AJAX必知必会(3)~自动重启工具nodemon、缓存问题、请求超时和网络异常、取消重复请求

    1.nodemon 自动重启工具(自动重启基于nodejs开发的服务端应用) ■ nodemon 是一个工具,通过在检测到目录中的文件更改时自动重新启动node应用程序来帮助开发node.js. // ...

  3. Ajax异步请求-简单模版

    <script type="text/javascript"> window.onload = function () { document.getElementByI ...

  4. ajax异步请求不能刷新数据的问题

    搞了两三天的问题,今天解决了.总结下: function reportGrpChange(cuid, title){ document.getElementById('reportFrameDiv') ...

  5. ajax数据请求5(php格式)

    ajax数据请求5(php格式): <!DOCTYPE html> <html> <head> <meta charset="UTF-8" ...

  6. ajax数据请求4(xml格式)

    ajax数据请求4(xml格式): <!doctype html> <html> <head> <meta charset="utf-8" ...

  7. ajax数据请求3(数组json格式)

    ajax数据请求3(数组json格式) <!doctype html> <html> <head> <meta charset="utf-8&quo ...

  8. Ajax的请求规范(二)

    第一种方式:send()不带参数 function doAjax(url,fnSucc,fnFaild) { //1.创建Ajax对象 if (window.XMLHttpRequest) {//判断 ...

  9. AJAX 创建对象 请求 响应 readyState

    AJAX 创建对象 请求 响应 readyState AjAX = Asynchronous JavaScript and XML (异步的JavaScrip和 XML). 不是新的编程语言, 而是一 ...

随机推荐

  1. springboot 使用阿里云短信服务发送验证码

    一.申请阿里云短信服务 1.申请签名 2.申请模板 3.创建accesskey(鼠标悬停在右上角头像) 二.代码实现 1.springboot引入maven依赖 <dependency> ...

  2. return之为什么能够终止函数,代码演练

    ''' return 有终止函数的作用,下面通过执行到return x 以后, 就结束了程序的下一步执行,所以就没有往下面走,所以终端上也就只能 看到打印结果100,看不到打印呢 ''' def se ...

  3. flink time and watermark

    流处理中时间本质上就是一个普通的递增字段(long型,自1970年算起的微秒数),不一定真的表示时间. watermark只是应对乱序的办法之一,大多是启发式的,在延迟和完整性之间抉择.(如果没有延迟 ...

  4. 用Python抢到回家的车票,so easy!

    “ 盼望着,盼望着,春节的脚步近了,然而,每年到这个时候,最难的,莫过于一张回家的火车票. ​ 据悉,今年春运期间,全国铁路发送旅客人次同比将增长 8.0%.达到 4.4 亿人次. ​ 2020 年铁 ...

  5. 12-Factor与云原生

    12-Factor与云原生 云原生应用 今天先到这儿,希望对技术领导力, 企业管理,系统架构设计与评估,团队管理, 项目管理, 产品管理,团队建设 有参考作用 , 您可能感兴趣的文章: 精益IT组织与 ...

  6. JS---案例:点击按钮设置div背景色渐变

    案例:点击按钮设置div背景色渐变 背景色渐变:设置透明度 <div id="dv"></div> <input type="button& ...

  7. 视频分享慕课网----Angular 打造企业级协作平台

    慕课网是一个非常不错的视频学习网站,搭建搭建企业协作平台,导师由深到浅,讲解的特别好. 本课程主要学习 Angular 进阶知识点和技巧(Material.动画.依赖注入.表单控件.RxJS,Redu ...

  8. 传统js和jsx与ts和tsx的区别

    一.从定义文件格式方面说 1.传统的开发模式可以定义js文件或者jsx文件2.利用ts开发定义的文件格式tsx二.定义state的状态来说 1.传统的方式直接在构造函数中使用 constructor( ...

  9. VMware_Player_nat网络的端口映射_手工设置

    VMware_Player_nat网络的端口映射_手工设置 转载注明来源: 本文链接 来自osnosn的博客,写于 2019-12-21. vmware nat的配置文件在 C:\ProgramDat ...

  10. 原创 Hive count 多个度量指标,带有 distinct

    Hive  count 多个度量指标,带有  distinct ,注意点!!! 比如  select  organid, ppi, count(id1) as num1, count(distinct ...