zoukankan      html  css  js  c++  java
  • 解决Ajax中的缓存问题

    当我们向服务器发送Ajax请求时,在W3C浏览器下,数据可以及时更新,但是如果使用的是IE浏览器且发送的是GET请求,系统会自动缓存请求结果,当下次访问时,系统自动会调用缓存信息,这会造成数据更新不及时。

    一、Ajax缓存起源

    IE缓存设计初衷:

    在实际项目开发中,如果我们向同一url地址发送请求时,系统在第一次访问,会将请求的资源缓存到浏览器的客户端的缓存文件中,当下次继续向同一url地址发送请求时,如果请求资源没有变化,则直接调用缓存文件,这样可以加快网站的访问速度。

    二、缓存解决的4中方案

    1. 通过随机数的形式解决缓存问题

    var url = 'test.php?id='+id+'&_='+Math.random();

    缺点:随机数会让我们每次请求的url地址都是不同的,但是由于缓存机制,其每次请求都会进行缓存,所以会在客户端会生成大量的缓存文件。随机数也会重复的可能

    2. 通过时间戳的形式来解决缓存问题

    var url = 'test.php?id='+id+'&_='+new Date().getTime();

    缺点:由于每次请求的url地址都是不同的,所以其也会在客户端生成大量的缓存文件。

    3. 通过资源文件的最后修改时间来解决缓存

    发送请求时,系统在第一次请求时会生成缓存文件,第二次请求时,会在请求头信息中追加如下参数:

    If-Modified-Since:缓存资源文件的最后修改时间

    当我们第一次访问服务器时,系统会自动生成请求的资源文件,每个文件在生成时都有三个时间(创建时间、访问时间、最后修改时间),生成完成后,系统会将资源内容+文件的最后修改时间一起返回给客户端IE浏览器,当第二次向同一url发送请求时,系统会自动在请求头信息中携带资源文件的最后修改时间,如果一致,则认为资源文件没有任何改变,将告诉浏览器,不需要重新请求,调用自身缓存即可。

    实际项目开发中,我们可以通过设置请求头来解决以上问题

    // 设置请求头信息解决缓存问题
    Ajax对象.setRequestHeader('If-Modified-Sinece','0');

    以上方法可以解决缓存问题,同时只会在客户端生成一个缓存文件。

     4. 在服务端禁止客户端进行缓存

    header("Cache-Control: no-cache, must-revalidate");

    真正含义:告诉浏览器不要对当前请求资源进行缓存

    以上方法不会生成任何缓存。

  • 相关阅读:
    Asp.Net Web API 2第八课——Web API 2中的属性路由
    Asp.Net Web API 2第七课——Web API异常处理
    Asp.Net Web API 2第六课——Web API路由和动作选择
    Asp.Net Web API 2第五课——Web API路由
    开始学习python
    BMI 小程序 购物车
    深浅copy 文件操作
    字典 dict 集合set
    基本数据类型 (str,int,bool,tuple,)
    python 运算符
  • 原文地址:https://www.cnblogs.com/chenjiacheng/p/6522260.html
Copyright © 2011-2022 走看看