防止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对表单操作2
Apr 06 Javascript
jquery 延迟执行实例介绍
Aug 20 Javascript
jquery form 隐藏的input 选择
Apr 29 Javascript
jQuery添加和删除指定标签的方法
Dec 16 Javascript
BootStrap 附加导航组件
Jul 22 Javascript
概述如何实现一个简单的浏览器端js模块加载器
Dec 07 Javascript
Bootstrap面板(Panels)的简单实现代码
Mar 17 Javascript
fetch 使用及如何接收JS传值
Nov 11 Javascript
vue 根据数组中某一项的值进行排序的方法
Aug 30 Javascript
解决angularJS中input标签的ng-change事件无效问题
Sep 13 Javascript
如何使用JavaScript实现栈与队列
Jun 24 Javascript
ES10的13个新特性示例(小结)
Sep 23 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实现登录tplink WR882N获取IP和重启的方法
2016/07/20 PHP
onpropertypchange
2006/07/01 Javascript
查看源码的工具 学习jQuery源码不错的工具
2011/12/26 Javascript
jQuery输入城市查看地图使用介绍
2013/05/08 Javascript
javascript如何创建表格(javascript绘制表格的二种方法)
2013/12/10 Javascript
javascript实现在某个元素上阻止鼠标右键事件的方法和实例
2014/08/12 Javascript
Node.js中的缓冲与流模块详细介绍
2015/02/11 Javascript
JavaScript实现把rgb颜色转换成16进制颜色的方法
2015/06/01 Javascript
windows下安装nodejs及框架express
2015/08/07 NodeJs
js密码强度校验
2015/11/10 Javascript
再谈JavaScript异步编程
2016/01/27 Javascript
Node.js服务器环境下使用Mock.js拦截AJAX请求的教程
2016/05/23 Javascript
javascript实现抽奖程序的简单实例
2016/06/07 Javascript
BootStrap智能表单实战系列(六)表单编辑页面的数据绑定
2016/06/13 Javascript
canvas绘制万花筒效果(代码分享)
2017/01/20 Javascript
基于JavaScript实现瀑布流效果
2017/03/29 Javascript
使用vue实现grid-layout功能实例代码
2018/01/05 Javascript
jQuery实现仿京东防抖动菜单效果示例
2018/07/06 jQuery
js/jquery遍历对象和数组的方法分析【forEach,map与each方法】
2019/02/27 jQuery
Layui Form 自定义验证的实例代码
2019/09/14 Javascript
[43:24]完美世界DOTA2联赛PWL S3 INK ICE vs DLG 第二场 12.12
2020/12/17 DOTA
python创建列表并给列表赋初始值的方法
2015/07/28 Python
pandas对dataFrame中某一个列的数据进行处理的方法
2019/07/08 Python
Python unittest如何生成HTMLTestRunner模块
2020/09/08 Python
css3 box-shadow阴影(外阴影与外发光)图示讲解
2017/08/11 HTML / CSS
10种CSS3实现的loading动画,挑一个走吧?
2020/11/16 HTML / CSS
加拿大城市本地限时优惠:Buytopia.ca
2018/09/19 全球购物
TOWER London官网:鞋子、靴子、运动鞋等
2019/07/14 全球购物
英语师范专业毕业生自荐信
2013/09/21 职场文书
有关打架的检讨书
2014/01/25 职场文书
2015年安全生产工作总结范文
2015/04/02 职场文书
消防安全月活动总结
2015/05/08 职场文书
2015年车间安全管理工作总结
2015/05/13 职场文书
2016大一新生军训感言
2015/12/08 职场文书
z-index不起作用
2021/03/31 HTML / CSS
PYTHON 使用 Pandas 删除某列指定值所在的行
2022/04/28 Python