防止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获取提交的字符串的字节数
Feb 09 Javascript
jQuery开发者都需要知道的5个小技巧
Jan 08 Javascript
jQuery实现可用于博客的动态滑动菜单
Mar 09 Javascript
js创建jsonArray传输至后台及后台全面解析
Apr 11 Javascript
js 实现数值的千分位及保存小数方法(推荐)
Aug 01 Javascript
值得分享的JavaScript实现图片轮播组件
Nov 21 Javascript
JS遍历对象属性的方法示例
Jan 10 Javascript
利用原生JS与jQuery实现数字线性变化的动画
Feb 24 Javascript
浅谈js的解析顺序 作用域 严格模式
Oct 23 Javascript
jQuery实现带右侧索引功能的通讯录示例【附源码下载】
Apr 17 jQuery
详解如何用typescript开发koa2的二三事
Nov 13 Javascript
用Javascript实现发送短信验证码间隔功能
Feb 08 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批量缩放图片的代码[ini参数控制]
2011/02/11 PHP
PHP用GD库生成高质量的缩略图片
2011/03/09 PHP
强制PHP命令行脚本单进程运行的方法
2014/04/15 PHP
YII模块实现绑定二级域名的方法
2014/07/09 PHP
apache中为php 设置虚拟目录
2014/12/17 PHP
PHP如何将XML转成数组
2016/04/04 PHP
Laravel核心解读之异常处理的实践过程
2019/02/24 PHP
用于自动添加Digg This!按钮的JavaScript
2006/12/23 Javascript
msn上的tab功能Firefox对childNodes处理的一个BUG
2008/01/21 Javascript
原生js实现移动端瀑布流式代码示例
2015/12/18 Javascript
网站发布后Bootstrap框架引用woff字体无法正常显示的解决方法
2016/11/24 Javascript
js判断用户是输入的地址请求的路径(实例讲解)
2017/07/18 Javascript
基于vue实现分页效果
2017/11/06 Javascript
JavaScript实现快速排序的方法分析
2018/01/10 Javascript
Webpack path与publicPath的区别详解
2018/05/03 Javascript
vue实现搜索功能
2019/05/28 Javascript
浅谈目前可以使用ES10的5个新特性
2019/06/25 Javascript
微信小程序引入模块中wxml、wxss、js的方法示例
2019/08/09 Javascript
vue el-table实现行内编辑功能
2019/12/11 Javascript
jquery实现简易验证插件封装
2020/09/13 jQuery
微信小程序之高德地图多点路线规划过程示例详解
2021/01/18 Javascript
[01:28:56]2014 DOTA2华西杯精英邀请赛 5 24 CIS VS DK
2014/05/26 DOTA
[04:03]2014DOTA2西雅图国际邀请赛 LGD战队巡礼
2014/07/07 DOTA
[56:45]DOTA2上海特级锦标赛D组小组赛#1 EG VS COL第一局
2016/02/28 DOTA
Python获取脚本所在目录的正确方法
2014/04/15 Python
Python实现国外赌场热门游戏Craps(双骰子)
2015/03/31 Python
基于随机梯度下降的矩阵分解推荐算法(python)
2018/08/31 Python
Python爬取知乎图片代码实现解析
2019/09/17 Python
Python第三方包之DingDingBot钉钉机器人
2020/04/09 Python
python 利用openpyxl读取Excel表格中指定的行或列教程
2021/02/06 Python
医院学雷锋活动策划方案
2014/02/15 职场文书
《我为你骄傲》教学反思
2014/02/20 职场文书
离婚被告答辩状
2015/05/22 职场文书
交通处罚决定书
2015/06/24 职场文书
车辆安全隐患排查制度
2015/08/05 职场文书
关于antd tree 和父子组件之间的传值问题(react 总结)
2021/06/02 Javascript