用生命谱写代码的赞歌

0%

浏览器缓存 url 请求

Posted on Edited on In
当我们多次访问同一个页面或资源，如果url没变（参数也不变），并且浏览器允许缓存，那么我们读取的可能就是浏览器缓存。此时，当我们修改某些CSS，页面不会立即产生效果，显示的还是之前的页面。

ajax 请求

若每次请求的地址是相同的，浏览器会去读取缓存，不去访问服务器，这样对于很多应用来说是非常好的，可以降低服务器的压力或者减少带宽的使用，但是对于ajax应用，很多都是必须保持实时的连接与服务器进行交互，所以需要使用时间戳来使每次的请求地址都不同，从而跳过浏览器的缓存机制实现每次去请求服务器，这样的功能在图片验证码的时候也是比较常用的一种方法。

1
2
3
4
5
6
7
// 处理 url
function(url) {
    if (url.indexOf('v=') > 0) {
        return url
    }
    return url + (url.indexOf('?') > 0 ? '&v=' : '?v=') + new Date().getTime()
}

防止 url 被浏览器缓存

根据 HTTP 规范，GET 用于信息获取，而且应该是幂等的。也就是说，当使用相同的 URL 重复 GET 请求会返回预期的相同结果时，GET 方法才是适用的。当对一个请求有副作用的时候（例如，提交数据注册新用户时），应该使用 POST 请求而不是 GET。 所以浏览器会对 GET 请求做缓存处理。

解决办法：

  1. GET请求URL后加随机数，让服务器认为不是相同的请求
    例"http://www.example.com/index.php?class=aitcle&page=5&_t=" + new Date().getTime()
  2. 在ajax发送请求前加上xmlHttpRequest.setRequestHeader("If-Modified-Since", "0")
  3. 在ajax发送请求前加上xmlHttpRequest.setRequestHeader("Cache-Control", "no-cache")
  4. 服务端响应请求时加header("Cache-Control: no-cache, must-revalidate") (PHP)
  5. 使用 POST 代替 GET，浏览器不会对 POST 做缓存