防止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 相关文章推荐
JavaScript 题型问答有答案参考
Feb 17 Javascript
jquery改变tr背景色的示例代码
Dec 28 Javascript
用jquery修复在iframe下的页面锚点失效问题
Aug 22 Javascript
JavaScript中Cookie操作实例
Jan 09 Javascript
JS模拟键盘打字效果的方法
Aug 05 Javascript
Jquery全屏相册插件zoomvisualizer具有调节放大与缩小功能
Nov 02 Javascript
Jquery-1.9.1源码分析系列(十一)之DOM操作
Nov 25 Javascript
Jquery Easyui表单组件Form使用详解(30)
Dec 19 Javascript
xmlplus组件设计系列之下拉刷新(PullRefresh)(6)
May 03 Javascript
JS基于贪心算法解决背包问题示例
Nov 27 Javascript
Vue 中使用 typescript的方法详解
Feb 17 Javascript
jQuery实现视频展示效果
May 30 jQuery
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设计模式 php实现命令模式(command)
2015/12/08 PHP
PHP递归实现层级树状展开
2016/04/01 PHP
PHP的中使用非缓冲模式查询数据库的方法
2017/02/05 PHP
php中时间函数date及常用的时间计算
2017/05/12 PHP
PHP排序算法之基数排序(Radix Sort)实例详解
2018/04/21 PHP
laravel-admin自动生成模块,及相关基础配置方法
2019/10/08 PHP
学习JavaScript的最佳方法分享
2011/10/21 Javascript
javascript生成随机数的方法
2014/05/16 Javascript
js取得html iframe中的元素和变量值
2014/06/30 Javascript
jQuery学习笔记之2个小技巧
2015/01/19 Javascript
详解Bootstrap四种图片样式
2016/01/04 Javascript
JavaScript数据操作_浅谈原始值和引用值的操作本质
2016/08/23 Javascript
gulp-uglify 与gulp.watch()配合使用时报错(重复压缩问题)
2016/08/24 Javascript
jQuery flip插件实现的翻牌效果示例【附demo源码下载】
2016/09/20 Javascript
JavaScript实现的数字与字符串转换功能示例
2017/08/23 Javascript
在小程序中使用canvas的方法示例
2018/09/17 Javascript
js 实现ajax发送步骤过程详解
2019/07/25 Javascript
Vue + Element-ui的下拉框el-select获取额外参数详解
2020/08/14 Javascript
在Python中调用ggplot的三种方法
2015/04/08 Python
简单理解Python中基于生成器的状态机
2015/04/13 Python
Python2.x版本中cmp()方法的使用教程
2015/05/14 Python
django数据库migrate失败的解决方法解析
2018/02/08 Python
详解django的serializer序列化model几种方法
2018/10/16 Python
python导入坐标点的具体操作
2019/05/10 Python
Django实现web端tailf日志文件功能及实例详解
2019/07/28 Python
redis数据库及与python交互用法简单示例
2019/11/01 Python
Python语言异常处理测试过程解析
2020/01/08 Python
Python 执行矩阵与线性代数运算
2020/08/01 Python
详解Python中string模块除去Str还剩下什么
2020/11/30 Python
python 利用openpyxl读取Excel表格中指定的行或列教程
2021/02/06 Python
HTML5的语法变化介绍
2013/08/13 HTML / CSS
马来西亚综合购物网站:Lazada马来西亚
2018/06/05 全球购物
车辆工程专业求职信
2014/04/28 职场文书
学校社团活动总结
2015/05/07 职场文书
高中历史教学反思
2016/02/19 职场文书
根德5570型九灯四波段立体声收音机是电子管收音机的楷模 ? 再论5570
2022/04/05 无线电