使用Ajax解决浏览器缓存问题

HTTP缓存

浏览器第一次向服务器发起HTTP请求,服务器会返回请求的资源,并在响应头中添加一些有关缓存的字段,如cache-control expires等,之后浏览器再向服务器请求资源就可以视情况使用缓存

HTTP缓存分类

  • 强缓存:浏览器直接从本地缓存中获取数据,不与服务器打交道
  • 协商缓存:浏览器发送请求到服务器,服务器判断是否可使用本地缓存

使用Ajax解决浏览器缓存问题

在一些项目中,一般提交请求都会通过ajax来提交,测试时发现,每次提交后得到的数据都是一样的,经过调试,发现问题发现在前端,没有清理缓存,所以得到的还是原来的旧数据。而我们都知道ajax能提高页面载入的速度主要的原因是通过ajax减少了重复数据的载入,也就是说在载入数据的同时将数据缓存到内存中,一旦数据被加载其中,只要我们没有刷新页面,这些数据就会一直被缓存在内存中,当我们提交 的URL与历史的URL一致时,就不需要提交给服务器,也就是不需要从服务器上面去获取数据,虽然这样降低了服务器的负载提高了用户的体验,但是我们不能获取最新的数据。为了保证我们读取的信息都是最新的,我们就需要禁止他的缓存功能。

禁止浏览器缓存功能有如下几种方法:
  1. ajax发送请求前加上 anyAjaxObj.setRequestHeader("If-Modified-Since","0")
  2. ajax发送请求前加上anyAjaxObj.setRequestHeader("Cache-Control","no-cache")
  3. URL后面加上一个随机数:"fresh=" + Math.random();
  4. URL后面加上时间搓:"nowtime=" + new Date().getTime();
  5. 如果是使用jQuery,直接这样就可以了$.ajaxSetup({cache:false})。这样页面的所有ajax都会执行这条语句就是不需要保存缓存记录。

你可能感兴趣的:(使用Ajax解决浏览器缓存问题)