浅析IE浏览器关于ajax的缓存机制

IE浏览器对于同一个URL只返回相同结果。因为，在默认情况下，IE会缓存ajax的请求结果。对于同一个URL地址，在缓存过期之前，只有第一次请求会真正发送到服务端。大多数情况下，我们使用ajax是希望实现局部刷新的，所以这就牵扯到一个改进的问题。

　　如果想每次都获取到最新数据，我们只需保证每次传入的URL不一样。最简单的方法就是通过给url拼接参数。利用math函数的random（）方法生成随机数。

　　比如访问百度www.baidu.com，我们就可以把地址写成www.baidu.com?t=Math.random();或者?t=new Date().getTime();

　　********************************分割线**********************************

　　说到这里，不妨复习一下ajax的基本用法。

*Ajax创建对象：　　　

　var xmlhttp;
　if (window.XMLHttpRequest){
  //IE7+, Firefox, Chrome, Opera, Safari
    xmlhttp = new XMLHttpRequest();
  } else{
  //IE6, IE5
    xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
  }

*Ajax请求：

//GET请求：
xmlhttp.open("GET","test1.txt",true);
xmlhttp.send();
//POST请求：
xmlhttp.open("POST","demo_post.asp",true);
xmlhttp.send();

GET 还是 POST？

与 POST 相比，GET 更简单也更快，并且在大部分情况下都能用。

然而，在以下情况中，请使用 POST 请求：

无法使用缓存文件（更新服务器上的文件或数据库）
向服务器发送大量数据（POST 没有数据量限制）
发送包含未知字符的用户输入时，POST 比 GET 更稳定也更可靠

*Ajax响应：

要获得服务器的响应，需要使用XMLHttpRequest 对象的 responseText 或 responseXML 属性。

ResponseText：获得字符串形式的响应数据。

document.getElementById("myDiv").innerHTML=xmlhttp.responseText;

ResponseXML：获得XML形式的响应数据。

如果来自服务器的响应是 XML，而且需要作为 XML 对象进行解析。

*Ajax - onreadystatechange ：　

当请求被发送到服务器时，我们需要执行一些基于响应的任务。

每当 readyState 改变时，就会触发 onreadystatechange 事件。

在 onreadystatechange 事件中，我们规定当服务器响应已做好被处理的准备时所执行的任务。

当 readyState 等于 4 且状态为 200 时，表示响应已就绪：

xmlhttp.onreadystatechange=function()
 {
 if (xmlhttp.readyState==4 && xmlhttp.status==200)
  {
  document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
  }
 }

补充：下面看下浅谈Ajax解决浏览器的缓存问题

Ajax能提高页面载入速度的主要原因是通过Ajax减少了重复数据的载入，也即在载入数据的同时将数据缓存到内存中，一旦数据被加载，只要没有刷新页面，这些数据就会一直被缓存在内存中，当提交的URL与历史的URL一致时，就不需要提交给服务器，也即不需要从服务器获取数据，虽然降低了服务器的负载，提高了用户体验，但不能获取最新的数据。为了保证读取的信息都是最新的，需要禁止其缓存功能。

解决方案有如下几种：

①　在Ajax发送请求前加上anyAjaxObj.setRequestHeader("If-Modified-Since", "0")。

②　在Ajax发送请求前加上anyAjaxObj.setRequestHeader("Cache-Control", "no-cache")。

③　在URL后加上一个随机数："fresh=" + Math.random();。

④　在URL后加上时间搓："nowtime=" + new Date().getTime();。

⑤　如果是使用jQuery，则用$.ajaxSetup({cache:false})。这样页面的所有Ajax都会执行该语句而不需要保存缓存记录。

总结

以上所述是小编给大家介绍的IE浏览器关于ajax的缓存机制，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对我们网站的支持！

赞 (0)

相关推荐

  • bootstrap3 兼容IE8浏览器！

    近期在使用bootstrap这个优秀的前端框架,这个框架非常强大,框架里面有下拉菜单.按钮组.按钮下拉菜单.导航.导航条.面包屑.分页.排版.缩略图.警告对话框.进度条.媒体对象等,bootstrap都已经预先定义好了,当我们制作网页上,只需直接调用里面的css即可 bootstrap是一个响应式的布局,你可以在宽屏电脑.普通电脑,平板电脑,手机上都得到非常优秀的布局体验.这种响应式的布局正是通过CSS3的媒体查询(Media Query)功能实现的,根据不同的分辨率来匹配不同的样式.IE8浏览

  • Javascript在IE和Firefox浏览器常见兼容性问题总结

    本文总结分析了Javascript在IE和Firefox浏览器常见兼容性问题.分享给大家供大家参考,具体如下: 表单 document.formName.item("itemName") IE:可以使用document.formName.item("itemName")或document.formName.elements["elementName"] Firefox:只能使用document.formName.elements["el

  • python3实现读取chrome浏览器cookie

    好几年前我在做一些自动化的脚本时,脑子里也闪过这样的想法:能不能直接把浏览器的cookies取出来用呢? 直到昨天看到代码<python模拟发送动弹>,想起来当年我也曾经有类似的想法没能完成,那就优先拿这个练手,之后的代码也会用这个功能. 直接从浏览器中取出cookies,有以下好处和用途: 1.不需要配置用户密码,直接读出浏览器中cookies就得到一样的身份,用来完成各种自动化操作. 2.部分网站登录会更新Session,会导致之前成功登录的Session失效,与浏览器使用相同的Sessi

  • 完美解决IE9浏览器出现的对象未定义问题

    目前Window7的机器上,使用IE9浏览器的用户很多,但是IE9在兼容性上做了较严格的控制,导致很多程序在chrome,firefox,ie6,ie7,ie8上可以正常运行,在ie9上确出现了各种问题,这里要说的其中一个问题,就是对象为定义,特别是单一个页面上嵌套了多层iframe/frame的时候,往往会出现: Array对象未定义 $对象未定义 jQuery对象未定义 Json对象未定义 undefined对象未定义 *对象未定义... 这种情况,我们一开始, 1,首先当然先检查是否JS文

  • 浅谈Ajax的缓存机制

    Ajax的缓存机制和浏览器处理资源时的缓存机制是一样的. 三条简单规则: 只要是URL相同的GET请求,浏览器会使用缓存(当然还要看服务器的Cache-Control/Expires/Last-Modified/ETag头的设置). 只要是POST请求,浏览器都不会缓存. Https的请求,浏览器不会缓存(绝大数情况如此,但是也有例外,据说FF浏览器是例外). 补充: 在URL中拼入随机的查询字符串可以使浏览器认为这是一个新的请求,从而不使用缓存. 在Ajax的请求中设置Http头: If-Mo

  • JavaScript自定义浏览器滚动条兼容IE、 火狐和chrome

    JavaScript自定义浏览器滚动条兼容IE、 火狐和chrome

    今天为大家分享一下我自己制作的浏览器滚动条,我们知道用css来自定义滚动条也是挺好的方式,css虽然能够改变chrome浏览器的滚动条样式可以自定义,css也能够改变IE浏览器滚动条的颜色.但是css只能是改变IE浏览器的颜色,而且CSS不能做到改变火狐浏览器的样式和颜色.所以只能是通过JavaScript来实现了.也有插件可以做到.我分享一下我自己使用原生JavaScript实现的思路.先上个图看下效果: JavaScript实现的思路就是模拟浏览器自身滚动条.我制作的思路是先将整个文档放在一

  • 获取IE浏览器Cookie信息的方法

    很多人不知道如何去获取IE浏览器中的Cookie信息,其实获取Cookie的方式很简单,只需要调用InternetGetCookie这个API就可以获得了. InternetGetCookie的声明方式如下: Private Declare Function InternetGetCookie Lib "wininet.dll" Alias "InternetGetCookieA" (ByVal lpszUrlName As String, ByVal lpszCo

  • 解析浏览器端的AJAX缓存机制

    解析浏览器端的AJAX缓存机制

    AJAX的缓存是由浏览器维持的,对于发向服务器的某个url,ajax仅在第一次请求时与服务器交互信息,之后的请求中,ajax不再向服务器提交请求,而是直接从缓存中提取数据. 有些情况下,我们需要每一次都从服务器得到更新后数据.思路是让每次请求的url都不同,而又不影响正常应用:在url之后加入随机内容. e.g. url=url+"&"+Math.random(); Key points: 1.每次请求的url都不一样(ajax的缓存便不起作用) 2.不影响正常应用(最基本的)

  • 浅析IE浏览器关于ajax的缓存机制

    IE浏览器对于同一个URL只返回相同结果.因为,在默认情况下,IE会缓存ajax的请求结果.对于同一个URL地址,在缓存过期之前,只有第一次请求会真正发送到服务端.大多数情况下,我们使用ajax是希望实现局部刷新的,所以这就牵扯到一个改进的问题. 如果想每次都获取到最新数据,我们只需保证每次传入的URL不一样.最简单的方法就是通过给url拼接参数.利用math函数的random()方法生成随机数. 比如访问百度www.baidu.com,我们就可以把地址写成www.baidu.com?t=Mat

  • 基于HTTP浏览器缓存机制全面解析

    基于HTTP浏览器缓存机制全面解析

    目录 什么是浏览器缓存 非HTTP协议定义的缓存机制 缓存流程图 HTTP缓存机制 服务端如何判断缓存已失效 Last-Modified/If-Modified-Since Etag/If-None-Match 为什么有了Last-Modified还要Etag? 200 OK(from cache)与304 Not Modified的区别 200 OK( from cache ) 出现操作: 304 Not Modified 出现操作: 缓存的不同来源 不能被缓存的请求 什么是浏览器缓存 Web

  • 详解浏览器的缓存机制

    详解浏览器的缓存机制

    目录 前言 1 浏览器缓存 1.1 浏览器缓存 1.2 浏览器缓存的意义 2 缓存类型 2.1 第一次请求数据 2.2 强制缓存 2.3 协商缓存 2.4 强制缓存和协商缓存的关系 3 缓存相关header 3.1 强制缓存 3.2 协商缓存 3.3 缓存请求 4 实例分析 4.1 官网首页: 4.2 社区 4.3 云市场 4.4 个人中心 4.5 论坛 4.6 App 总结 前言 浏览器缓存是前端性能优化的重要一环,对于前端效率提升的重要性,不言而喻. 之前对于浏览器缓存也是一知半解,这次借着

  • SpringBoot浅析缓存机制之Redis单机缓存应用

    目录 Redis单机缓存 1. 创建项目添加缓存依赖 2. 缓存配置 3. 开启缓存 4. 创建 BookDao 5. 创建测试类 Redis单机缓存 和 Ehcache 一样,如果在 classpath 下存在 Redis 并且 Redis 已经配置好了,此时默认就会使用 RedisCacheManager 作为缓存提供者,Redis 单机缓存使用步骤如下: 1. 创建项目添加缓存依赖 创建 Spring Boot 项目,添加 spring-boot-starter-cache 和 Redis

  • SpringBoot浅析缓存机制之Ehcache 2.x应用

    目录 介绍 Ehcache 2.x 缓存 1. 创建项目添加缓存依赖 2. 添加缓存配置文件 3. 开启缓存 4. 创建 BookDao 5 .创建测试类 介绍 Spring 3.1 中开始对缓存提供支持,核心思路是对方法的缓存,当开发者调用一个方法时,将方法的参数和返回值作为 key/value 缓存起来,当再次调用改方法时,如果缓存中有数据,就直接从缓存中获取,否则再去执行该方法.但是,Spring 中并未提供缓存的实现,而是提供了一套缓存 API ,开发者可以自由选择缓存的实现,目前 Sp

  • localStorage的黑科技-js和css缓存机制

    localStorage的黑科技-js和css缓存机制

    一.发现黑科技的起因 今天在微信公众号看到一篇技术博文,想用印象笔记收藏,所以发送了文章链接到pc上.然后习惯性地打开控制台,看看源码,想了解下最近微信用了什么新技术. 呵呵,以下勾起了我侦探的欲望.页面加载后的异常点就是只加载了一个js,如下图所示: 我很诧异,为什么已经开启了Disable cache,js只加载了一个,而且体积这么小.接着,我按住Ctrl+O进行资源文件查找,发现我被"忽悠"了.其实根本就不止一个js文件. 脑袋里灵光一闪,不会是用localStorage做了缓存

  • Ajax对缓存的处理方法实例分析

    本文实例讲述了Ajax对缓存的处理方法.分享给大家供大家参考,具体如下: 缓存 浏览器的一次请求需要从服务器获得许多的css.img.js等相关文件,如果每次请求都把相关的资源文件加载一次,对带宽.服务器资源.用户等待时间都有严重的损耗,浏览器有做优化处理,其把css.img.js等文件在第一次请求成功后就在本地保留一个缓存备份,后续的每次请求就在本身获得相关的缓存资源文件,可以明显的加快用户的访问速度. css.img.js等静态文件可以缓存,但是动态程序文件如php文件就不能缓存,即使缓存我

  • IE浏览器与FF浏览器关于Ajax传递参数值为中文时的区别实例分析

    本文实例讲述了IE浏览器与FF浏览器关于Ajax传递参数值为中文时的区别.分享给大家供大家参考,具体如下: 前面介绍了<Javascript基于AJAX回调函数传递参数>,这里主要来分析一下ajax传递中文参数过程中针对不同浏览器的乱码处理方法. Ajax传递参数为中文时出现乱码,我遇到的情况是: 1.我的数据库连接 编码为 GB2312,latin1_swedish_ci 2.php 文件编码格式为 UTF-8,浏览器显示编码为 : UTF-8 3.我的页面显示方式为两种: 一)页面加载时自

随机推荐