防止jQuery ajax Load使用缓存的方法小结


Posted in Javascript onFebruary 22, 2014

一、用法
jquery的load函数是请求另一个文件并加载到当前DOM里的调用,load方法的完整格式是:load( url, [data], [callback] )(注意没有参数是GET方式请求,有参数则是 POST方法)。

* url:是指要导入文件的地址。
* data:可选参数;因为Load不仅仅可以导入静态的html文件,还可以导入动态脚本,例如PHP文件,所以要导入的是动态文件时,我们可以把要传递的参数放在这里。
* callback:可选参数;是指调用load方法并得到服务器响应后,再执行的另外一个函数。

缓存这东西,在一定程度上加快了页面的装载,但是也常常给我们带来麻烦。我在上篇文章里简单介绍了jQuery中Load方法的使用。在实际运用中,我们可能会碰到浏览器缓存的问题。比如我就在IE7里碰到这个问题。

jQuery Load样本代码:

$(document).ready(function(){ 
  $("#labels").load("/blog/categories/labels.html"); 
  //在页面装载时,在ID为#labels的DOM元素里插入labels.html的内容。 
});

当我更新了labels.html以后,在IE7里load方法仍旧在使用旧的labels.html,就算我按刷新键也不管用。好在jQuery提供一个防止ajax使用缓存的方法,把下面的语句加在head的javascript文件里,就可以解决问题。
$.ajaxSetup ({ 
    cache: false //关闭AJAX相应的缓存 
});

此外我再介绍几种方法解决缓存的方法。注意:我没有在jQuery load的问题上测试过,这些方法仅供参考!

1.更改文件名,比如把labels.html改成lables_new.html,但是这是没有办法的办法,一般没有人这么做。

2.在labels.html后加上特定时间,比如lables.html?20081116。在实际工作中,在我更新css/javascript文件后,我都是用这种办法来防止文件被缓存。

3.在labels.html文件的顶部加入以下声明:

<META HTTP-EQUIV="Pragma" CONTENT="no-cache">
<META HTTP-EQUIV="Expires" CONTENT="-1">

4.load函数不仅可以调用HTML,也可以调用script,比如labels.php,可以在php文件里使用header函数:

<?php 
header("Cache-Control: no-cache, must-revalidate"); 
?>

另外两种解决方案:
在请求路径中添加一个时间参数值为当前的时间或者在表单中添加一个隐藏的字段将该字段的值设置为当前时间。
Javascript 相关文章推荐
JQuery boxy插件在IE中边角图片不显示问题的解决
May 20 Javascript
JavaScript精炼之构造函数 Constructor及Constructor属性详解
Nov 05 Javascript
JavaScript模版引擎的基本实现方法浅析
Feb 15 Javascript
终于实现了!精彩的jquery弹幕效果
Jul 18 Javascript
详解jQuery插件开发方式
Nov 22 Javascript
dropload.js插件下拉刷新和上拉加载使用详解
Oct 20 Javascript
vue.js与element-ui实现菜单树形结构的解决方法
Apr 21 Javascript
vue+jquery+lodash实现滑动时顶部悬浮固定效果
Apr 28 jQuery
JS实现select选中option触发事件操作示例
Jul 13 Javascript
解决vue js IOS H5focus无法自动弹出键盘的问题
Aug 30 Javascript
vuex(vue状态管理)的特殊应用案例分享
Mar 03 Javascript
如何使用CocosCreator对象池
Apr 14 Javascript
jquery中load方法的用法及注意事项说明
Feb 22 #Javascript
页面加载完成后再执行JS的jquery写法以及区别说明
Feb 22 #Javascript
解决用jquery load加载页面到div时,不执行页面js的问题
Feb 22 #Javascript
文本框水印提示效果的简单实现代码
Feb 22 #Javascript
jquery实现省市select下拉框的替换(示例代码)
Feb 22 #Javascript
jQuery实现下拉框左右选择的简单实例
Feb 22 #Javascript
jquery取消选择select下拉框示例代码
Feb 22 #Javascript
You might like
自动生成文章摘要的代码[PHP 版本]
2007/03/20 PHP
php之对抗Web扫描器的脚本技巧
2008/10/01 PHP
php设计模式 Proxy (代理模式)
2011/06/26 PHP
给ECShop添加最新评论
2015/01/07 PHP
PHP设计模式之模板方法模式实例浅析
2018/12/20 PHP
PHP扩展类型及安装方式解析
2020/04/27 PHP
phpstorm激活码2020附使用详细教程
2020/09/25 PHP
jquery上传插件fineuploader上传文件使用方法(jquery图片上传插件)
2013/12/05 Javascript
利用函数的惰性载入提高javascript代码执行效率
2014/05/05 Javascript
avascript中的自执行匿名函数应用示例
2014/09/15 Javascript
jquery表单验证需要做些什么
2015/11/17 Javascript
JS如何判断是否为ie浏览器的方法(包括IE10、IE11在内)
2015/12/13 Javascript
JS中Json数据的处理和解析JSON数据的方法详解
2016/06/29 Javascript
a标签跳转到指定div,jquery添加和移除class属性的实现方法
2016/10/10 Javascript
JS添加或修改控件的样式(Class)实现方法
2016/10/15 Javascript
JavaScript仿微博发布信息案例
2016/11/16 Javascript
jquery实现弹窗功能(窗口居中显示)
2017/02/27 Javascript
Vue多种方法实现表头和首列固定的示例代码
2018/02/02 Javascript
axios 封装上传文件的请求方法
2018/09/26 Javascript
JavaScript eval()函数定义及使用方法详解
2020/07/07 Javascript
js实现网页随机验证码
2020/10/19 Javascript
Python基于正则表达式实现检查文件内容的方法【文件检索】
2017/08/30 Python
python安装twisted的问题解析
2018/08/21 Python
Python实现的在特定目录下导入模块功能分析
2019/02/11 Python
python使用Plotly绘图工具绘制散点图、线形图
2019/04/02 Python
检测tensorflow是否使用gpu进行计算的方式
2020/02/03 Python
解决使用python print打印函数返回值多一个None的问题
2020/04/09 Python
英国最大的老式糖果店:A Quarter Of
2017/04/08 全球购物
德国香水、化妆品和护理产品网上商店:Parfumdreams
2018/09/26 全球购物
中东奢侈品市场:Coveti
2019/05/12 全球购物
意大利在线药房:Saninforma
2021/02/11 全球购物
如何清空Session
2015/02/23 面试题
医生学习党的群众路线教育实践活动心得体会
2014/11/03 职场文书
工程技术负责人岗位职责
2015/04/13 职场文书
2015年女工委工作总结
2015/07/27 职场文书
创作书写之导游词实用技巧分享(干货)
2019/12/20 职场文书