防止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 相关文章推荐
js加载之使用DOM方法动态加载Javascript文件
Nov 08 Javascript
Angularjs 动态改变title标题(兼容ios)
Dec 29 Javascript
ajax实现动态下拉框示例
Jan 10 Javascript
对比分析Django的Q查询及AngularJS的Datatables分页插件
Feb 07 Javascript
js中删除数组中的某一元素实例(无下标时)
Feb 28 Javascript
jQuery插件FusionCharts绘制的2D双柱状图效果示例【附demo源码】
May 13 jQuery
Vue 2.5.2下axios + express 本地请求404的解决方法
Feb 21 Javascript
详解VueJs中的V-bind指令
May 03 Javascript
vuex2中使用mapGetters/mapActions报错的解决方法
Oct 20 Javascript
JQuery事件委托原理与用法实例分析
May 13 jQuery
微信小程序tab切换可滑动切换导航栏跟随滚动实现代码
Sep 04 Javascript
JavaScript中window和document用法详解
Jul 28 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版本不同可能诱发的问题
2015/12/22 PHP
ThinkPHP中create()方法自动验证实例
2017/04/26 PHP
PHP设计模式之状态模式定义与用法详解
2018/04/02 PHP
Nigma vs Alliance BO5 第四场2.14
2021/03/10 DOTA
js实现ASP分页函数 HTML分页函数
2006/09/22 Javascript
利用jQuery操作对象数组的实现代码
2011/04/27 Javascript
JavaScript?Apple设备检测示例代码
2013/11/15 Javascript
js继承call()和apply()方法总结
2014/12/08 Javascript
yui3的AOP(面向切面编程)和OOP(面向对象编程)
2015/05/01 Javascript
JavaScript必知必会(三) String .的方法来自何方
2016/06/08 Javascript
JS获取随机数和时间转换的简单实例
2016/07/10 Javascript
JavaScript实现页面无操作倒计时退出
2016/10/22 Javascript
jquery animate动画持续运动的实例
2017/11/29 jQuery
基于JavaScript实现抽奖系统
2018/01/16 Javascript
解决Vue打包之后文件路径出错的问题
2018/03/06 Javascript
使用vue中的v-for遍历二维数组的方法
2018/03/07 Javascript
基于Vue2-Calendar改进的日历组件(含中文使用说明)
2019/04/14 Javascript
vue实现移动端省市区选择
2019/09/27 Javascript
详解Python的collections模块中的deque双端队列结构
2016/07/07 Python
python实现微信自动回复及批量添加好友功能
2019/07/03 Python
python分别打包出32位和64位应用程序
2020/02/18 Python
Python可变对象与不可变对象原理解析
2020/02/25 Python
新手入门学习python Numpy基础操作
2020/03/02 Python
Python中过滤字符串列表的方法
2020/12/22 Python
使用CSS3制作倾斜导航条和毛玻璃效果
2017/09/12 HTML / CSS
解决margin 外边距合并问题
2019/07/03 HTML / CSS
amaze ui 的使用详细教程
2020/08/19 HTML / CSS
公证委托书模板
2014/04/03 职场文书
十佳护士先进事迹
2014/05/08 职场文书
建设投标担保书
2014/05/13 职场文书
组织鉴定材料
2014/06/02 职场文书
报表员工作失误检讨书范文
2014/09/19 职场文书
优秀共青团员事迹材料
2014/12/25 职场文书
项目安全员岗位职责
2015/02/15 职场文书
2016入党心得体会范文
2016/01/06 职场文书
Python实现为PDF去除水印的示例代码
2022/04/03 Python