下载安卓APP箭头
箭头给我发消息

客服QQ:3315713922

web前端:前端不缓存,ajax不缓存,js操作cookie

作者:TenFly     来源: https://www.cnblogs.com/tenfly/p/11462339.html点击数:1341发布时间: 2020-03-03 10:59:35

标签: web应用服务器ajax

Web开发

  Ajax的核心是Javascript对象XmlHttpRequest。该对象在InternetExplorer5中首次引入,它是一种支持异步请求的技术。简而言之,XmlHttpRequest使您可以使用JavaScript向服务器提出请求并处理响应,而不阻塞用户。

  今天实现网站注销功能时,需要清除cookie缓存,开始在网上搜索的是“js清除缓存”,发现很多都是预先防患缓存存储的内容,千篇一律,不过也学习到了;后来换成"js清除cookie"才找到自己想要的结果。

  先学习一下预先防治缓存存储的方式吧

  在http中,控制缓存开关的字段有两个:Pragma和Cache-Control,后者拥有最高优先级,只要与其他设置相抵触,一律覆盖之。

  Pragma有两个字段Pragma和Expires。Pragma是http1.0字段,值为no-cache时,表示禁用缓存,当一个no-cache请求发送给一个不遵循HTTP/1.1的服务器时,客户端应该包含pragma指令;Expires的值是一个GMT时间,表示该缓存的有效时间,优先级低于Cache-Control:max-age,两者同时出现,expires被覆盖;如果都没有出现。也没有其他缓存,则浏览器默认采用启发式算法,取Date_value-Last-Modified_value(请求资源最后一次修改时间)值的10%作为缓存时间

  Pragma是旧产物,已经逐步抛弃,有些网站为了向下兼容还保留了这两个字段。如果一个报文中同时出现Pragma和Cache-Control时,以Pragma为准。同时出现Cache-Control和Expires时,以Cache-Control为准。即优先级从高到低是Pragma->Cache-Control->Expires

  以两个常用值举例no-cache:不管本地副本是否过期,浏览器、缓存服务器在使用资源副本前都要到源服务器进行副本有效性校验。

  must-revalidate:本地副本过期前,浏览器、缓存服务器可以使用本地副本;本地副本一旦过期,必须去源服务器进行有效性校验。

  头部设置

  <!--在头部加上此三句即可禁用缓存-->

  <metahttp-equiv="pragma"content="no-cache"/>

  <metahttp-equiv="content-type"content="no-cache,must-revalidate"/>

  <metahttp-equiv="expires"content="Wed,26Feb199708:21:57GMT"/>

  reset清除表单的临时缓存

  <bodyonLoad="javascript:document.表单名.reset()">

  ajax获取情书数据加上请求头

  $.ajax({

  ......

  beforeSend:function(xmlHttp){

  //缓存校验字段,值为资源最后一次的修改时间,即上次收到的Last-Modified值

  xmlHttp.setRequestHeader("If-Modified-Since","0");

  //相当于max-age:0,must-revalidate即资源被缓存,但是缓存立刻过期,同时下次访问时强制验证资源有效性

  xmlHttp.setRequestHeader("Cache-Control","no-cache");},

  success:function(response){

  //操作

  }

  async:false

  });

  ajax请求数据直接不缓存

  $.ajax({

  ......

  cache:false,//不进行缓存

  success:function(response){

  //操作

  }

  async:false

  });

  利用随机数与时间戳让每次请求不相同,不仅是页面,js、css等资源也可以使用这样的方式

  URL参数后加上"?ran="+Math.random();或"?ran="+newDate().getTime();//当然这里参数ran可以任意取了

  用当前页面覆盖原页面防止回退

  window.location.replace("你要覆盖的页面");

  然后是js对cookie的操作

  设置cookie

  document.cookie="key="+value;//cookie一般以键值对的方式存在,也可以自定义储存方式

  获取cookie

  cookieArray=document.cookie.split(';');

  for(vari=0;i<cookieArray.length;i++){

  //操作;key:cookieArray[i].split('=')[0];value:cookieArray[i].split('=')[1]

  }

  删除cookie只需要设置时间过期即可

  document.cookie=key+"="+你想操作的cookie+":expire="+newDate(0).toGMTString();

  web应用的交互如Flickr,Backpack和Google在这方面已经有质的飞跃。这个术语源自描述从基于Web的应用到基于数据的应用的转换。在基于数据的应用中,用户需求的数据如联系人列表,可以从独立于实际网页的服务端取得并且可以被动态地写入网页中,给缓慢的Web应用体验着色使之像桌面应用一样。

赞(11)
踩(0)
分享到:
华为认证网络工程师 HCIE直播课视频教程