防止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 相关文章推荐
dwr spring的集成实现代码
Mar 22 Javascript
JavaScript关于select的相关操作说明
Jan 13 Javascript
可兼容IE的获取及设置cookie的jquery.cookie函数方法
Sep 02 Javascript
jQuery插件Skippr实现焦点图幻灯片特效
Apr 12 Javascript
jquery常用函数与方法汇总
Sep 01 Javascript
JS中生成随机数的用法及相关函数
Jan 09 Javascript
Three.js快速入门教程
Sep 09 Javascript
JS数组操作中的经典算法实例讲解
Jul 26 Javascript
jQuery操作attr、prop、val()/text()/html()、class属性
May 23 jQuery
解决layer 动态加载select 失效的问题
Sep 18 Javascript
Node.js API详解之 net模块实例分析
May 18 Javascript
详细分析vue响应式原理
Jun 22 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/02/02 PHP
javascript parseInt与Number函数的区别
2010/01/21 Javascript
jQuery阻止同类型事件小结
2013/04/19 Javascript
Javascript 实现的数独解题算法网页实例
2013/10/15 Javascript
jquery获取当前元素索引值用法实例
2015/06/10 Javascript
基于Javascript实现二级联动菜单效果
2016/03/04 Javascript
浅析BootStrap模态框的使用(经典)
2016/04/29 Javascript
javascript 解决浏览器不支持的问题
2016/09/24 Javascript
Webpack打包css后z-index被重新计算的解决方法
2017/06/18 Javascript
原生js+cookie实现购物车功能的方法分析
2017/12/21 Javascript
javascript实现计算指定范围内的质数示例
2018/12/29 Javascript
js+html5 canvas实现ps钢笔抠图
2019/04/28 Javascript
Node.js学习教程之Module模块
2019/09/03 Javascript
vue 表单输入框不支持focus及blur事件的解决方案
2020/11/17 Vue.js
[50:27]OG vs LGD 2018国际邀请赛淘汰赛BO3 第一场 8.26
2018/08/30 DOTA
在Python中操作列表之list.extend()方法的使用
2015/05/20 Python
Python如何为图片添加水印
2016/11/25 Python
用Python shell简化开发
2018/08/08 Python
Python3.0 实现决策树算法的流程
2019/08/08 Python
Pytorch转tflite方式
2020/05/25 Python
python db类用法说明
2020/07/07 Python
python获取时间戳的实现示例(10位和13位)
2020/09/23 Python
OpenCV实现机器人对物体进行移动跟随的方法实例
2020/11/09 Python
SAZAC的动物连体衣和动物睡衣:Kigurumi Shop
2020/03/14 全球购物
医学专业毕业生个人的求职信
2013/12/04 职场文书
企业内控岗位的职责
2014/02/07 职场文书
就业推荐表自我鉴定
2014/03/21 职场文书
求职自我推荐信
2014/06/25 职场文书
教师作风建设剖析材料
2014/10/11 职场文书
消防宣传语大全
2015/07/13 职场文书
2016年社区国庆节活动总结
2016/04/01 职场文书
关于保护环境的建议书
2019/06/24 职场文书
优秀大学生申请书
2019/06/24 职场文书
MySQL 查询速度慢的原因
2021/05/25 MySQL
Python多线程 Queue 模块常见用法
2021/07/04 Python
Windows 11要来了?微软文档揭示Win11太阳谷 / Win10有两个不同版本
2021/11/21 数码科技