在客户端缓存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. 《Java基础知识》Java静态内部类、匿名内部类、成员式内部类和局部内部类

    内部类可以是静态(static)的,可以使用 public.protected 和 private 访问控制符,而外部类只能使用 public,或者默认. 成员式内部类 在外部类内部直接定义(不在方法 ...

  2. swoole运行模式加速laravel应用的详细介绍

    本篇文章给大家带来的内容是关于swoole运行模式加速laravel应用的详细介绍,有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助. 一.Swoole Swoole号称重新定义了PHP, ...

  3. HttpRunner学习8--使用debugtalk.py辅助函数

    前言 在HttpRunner中,我们的测试用例都是写在 YAML/JSON 文件中,有时候我们想借助代码来实现某些较复杂的功能,但在 YAML/JSON 中是无法直接写代码来处理的,这个时候,我们可以 ...

  4. 无法Google的解决方案

    献给新入开发行业的小伙伴. 本文不会事无巨细的讲解每一个细节,只是为读者提供一个路线图,并提供相应的参考资料. 为了更高效的解决各种技术问题,有时不得不到墙外去寻找解决方案.每个开发者效率高了,宏观来 ...

  5. 理解OAuth2

    目录 理解OAuth2 Oatuh2用来做什么 Oauth2具体做法 Oauth2的流程 授权码模式 第三方引导用户跳转至认证服务器的授权页面 用户选择是否给予授权 认证服务器生成code并且让用户重 ...

  6. TCP 连接与 HTTP 请求的相关问题

    1.现代浏览器在与服务器建立了一个 TCP 连接后是否会在一个 HTTP 请求完成后断开?什么情况下会断开? 默认情况下建立 TCP 连接不会断开,只有在请求报头中声明 Connection: clo ...

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

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

  8. (2018版)webstorm的安装和破解

    前言 相信使用HBuildX的各位都用过,所以这个webstorm就是用来代替的. 因为使用方式跟idea等软件差不多,如果习惯了idea的操作方式的可以试一试 安装webstorm 这是2018版的 ...

  9. UWP GridView切换数据时界面闪动

    在选择数据时,比如1-10集,和11-20集切换时,GridView需要切换对应的数据,但是会发生界面闪动. 这是默认的Item Transition导致的. 可以去掉默认的转换效果. <Gri ...

  10. 测试人员必备之 mysql 常用命令学习指南

    1.数据库连接 1.通过命令行连接数据库 [root@localhost ~]# mysql -u root -p Enter password: 输入以上命令,回车后输入密码,回车,出现 mysql ...