首页 > 网络编程 > AJAX相关 > 正文

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

2018-12-02 11:33:33

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的缓存机制,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持!

  • 相关标签:AJAX相关
  • 本文发布HTML5中文学习网 ,转载请注明出处,感谢您!
  • 相关文章


  • 曝网友假装外国人写投诉信 ofo秒退押金并回函致歉
  • 苹果市值缩水逾2000亿美元 遭多家投行下调目标价
  • Asp.net Core与类库读取配置文件信息的方法_实用技巧
  • asp.net在Repeater嵌套的Repeater中使用复选框详解_实用技巧
  • 利用IIS调试ASP.NET网站程序的完整步骤_实用技巧
  • Asp.Net Core轻松学习系列之配置文件_实用技巧
  • ASP.NET 页生命周期概述(小结)_实用技巧
  • 详解ASP.NET Core WebApi 返回统一格式参数_实用技巧
  • 2018年网络流行语有哪些?2018年十大网络流行语盘点
  • 华为首席财务官孟晚舟被暂扣 深圳市政府要求加方立即放人!
  • 独孤九贱(4)_PHP视频教程

    江湖传言:PHP是世界上最好的编程语言。真的是这样吗?这个梗究竟是从哪来的?学会本课程,你就会明白了。 PHP中文网出品的PHP入门系统教学视频,完全从初学者的角度出发,绝不玩虚的,一切以实用、有用...

    独孤九贱(5)_ThinkPHP5视频教程

    ThinkPHP是国内最流行的中文PHP开发框架,也是您Web项目的最佳选择。《php.cn独孤九贱(5)-ThinkPHP5视频教程》课程以ThinkPHP5最新版本为例,从最基本的框架常识开始,将...

    独孤九贱(1)_HTML5视频教程

    《php.cn原创html5视频教程》课程特色:php中文网原创幽默段子系列课程,以恶搞,段子为主题风格的php视频教程!轻松的教学风格,简短的教学模式,让同学们在不知不觉中,学会了HTML知识。 ...

    ThinkPHP5实战之[教学管理系统]

    本套教程,以一个真实的学校教学管理系统为案例,手把手教会您如何在一张白纸上,从零开始,一步一步的用ThinkPHP5框架快速开发出一个商业项目。

    PHP入门视频教程之一周学会PHP

    所有计算机语言的学习都要从基础开始,《PHP入门视频教程之一周学会PHP》不仅是PHP的基础部分更主要的是PHP语言的核心技术,是学习PHP必须掌握的内容,任何PHP项目的实现都离不开这部分的内容,通...

    作者信息

    kevin

    永远在学习的路上!

    相关教程

  • javascript初级视频教程 javascript初级视频教程
  • jquery 基础视频教程 jquery 基础视频教程
  • javascript三级联动视频教程 javascript三级联动视频教程
  • 独孤九贱(3)_JavaScript视频教程 独孤九贱(3)_JavaScript视频教程
  • 独孤九贱(6)_jQuery视频教程 独孤九贱(6)_jQuery视频教程
  • 热门教程