这些天,一直在调试一个bug。想尽各种办法 ,最后发现了IE缓存的大坑。
问题描述:
用户注册时,服务器会分配给用户一组卡号(每个用户对应一组卡号)。注册超时后,系统会重新分配给用户一组卡号,请求/响应 过程都是通过 Ajax(KISSY)进行的。 然而在测试过程中,IE总是出错,而Chrome运行正常。
问题解决:
经过多次的代码修改,以及逻辑的分析。最后确定是IE缓存的原因。然后就各方查找,发现这个问题正是由于IE Ajax缓存机制导致的。Ajax 缓存就是,IE会自动缓存Ajax的请求结果,在缓存过期之前,针对相同地址重复发起Ajax请求,只有第一次会真正发送到服务端。这个确实有利于网页的加载速度。但是,有时候我们想实时的获取服务器更新信息,这种时候,IE Ajax缓存就是不利的。就比如我们所设计的用户选择卡号的这个功能,需要及时的去与服务器端交互。若服务器重新给用户分配了一组卡号,而IE 因为缓存的原因,没有及时更新,这就会导致“前后”不匹配的问题(这个坑 真是坑苦了我啊)。
具体解决方法:
- 设置IE浏览器:设置->Internet选项->浏览历史记录下的设置->Internet 临时文件的价差选项改为每次访问网页时也可以(这种方式也就只能测试时自己在本地更改,让每个用户都去更改是不可能的,该方法治标不治本)
- 添加URL后缀:在AJAX请求的页面地址后面加个随机函数,例如时间(简单实用)。
<span style="background-color: rgb(254, 254, 254);"> new IO({ type: "GET", </span><span style="background-color: rgb(255, 255, 102);"> url: '/amend.shtml?t='+new Date(),</span><span style="background-color: rgb(254, 254, 254);"> success: function (msg) { $("#amendInfo").html(msg); var onoff = $('#message').attr('message'); if(onoff){ new Airtip({ title: '温馨提示', text: onoff }); } AddWid.out(); } });</span>
- 改变JS组件的 ajax设置(实际上这个机制也是通过为请求地址添加不同的查询字符串后缀来实现的):
type: 'GET', data: { email: $(this).attr('number') }, url: '/phenix/emailSend.shtml', <span style="background-color: rgb(255, 255, 102);">cache:false,</span>
本文介绍了在使用 IE 浏览器时遇到的 Ajax 缓存问题,详细描述了问题现象及解决方法,包括更改浏览器设置、添加 URL 后缀和调整 JS 组件设置。
283

被折叠的 条评论
为什么被折叠?



