防止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/Css 文件的代码
Jul 03 Javascript
jquery实现弹出层完美居中效果
Mar 03 Javascript
Javascript基础教程之数据类型 (布尔型 Boolean)
Jan 18 Javascript
Javascript URI 解析介绍
Mar 15 Javascript
jQuery中 attr() 方法使用小结
May 03 Javascript
JS实现简单路由器功能的方法
May 27 Javascript
javascript实现根据时间段显示问候语的方法
Jun 18 Javascript
js格式化时间的简单实例
Nov 27 Javascript
Bootstrap基本样式学习笔记之图片(6)
Dec 07 Javascript
使用Bootstrap + Vue.js实现添加删除数据示例
Feb 27 Javascript
JQuery中Ajax的操作完整例子
Mar 07 Javascript
详解操作虚拟dom模拟react视图渲染
Jul 25 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 UTF8编码内的繁简转换类
2009/07/20 PHP
php设计模式 State (状态模式)
2011/06/26 PHP
PHP获取文件的MD5值并判断是否被修改的例子
2014/06/19 PHP
PHP实现指定字段的多维数组排序函数分享
2015/03/09 PHP
关于laravel-admin ueditor 集成并解决刷新的问题
2019/10/21 PHP
web页面数据展示新想法(json)
2010/06/08 Javascript
奉献给JavaScript初学者的编写开发的七个细节
2011/01/11 Javascript
getElementByIdx_x js自定义getElementById函数
2012/01/24 Javascript
JavaScript高级程序设计 读书笔记之十一 内置对象Global
2012/03/07 Javascript
JavaScript高级程序设计 阅读笔记(十二) js内置对象Math
2012/08/14 Javascript
javascript 获取图片尺寸及放大图片
2013/09/04 Javascript
js中传递特殊字符(+,&amp;)的方法
2014/01/16 Javascript
jquery 实现返回顶部功能
2014/11/17 Javascript
JavaScript的Polymer框架中dom-repeat与VM的相关操作
2015/07/29 Javascript
JavaScript中日期的相关操作方法总结
2015/10/24 Javascript
JavaScript获取各大浏览器信息图示
2015/11/20 Javascript
JavaScript中使用sencha gridpanel 编辑单元格、改变单元格颜色
2015/11/26 Javascript
js实现(全选)多选按钮的方法【附实例】
2016/03/30 Javascript
JS 拦截全局ajax请求实例解析
2016/11/29 Javascript
js实现一个可以兼容PC端和移动端的div拖动效果实例
2016/12/09 Javascript
JS中的BOM应用
2018/02/02 Javascript
浅谈Node.js 中间件模式
2018/06/12 Javascript
Vue.js中使用iView日期选择器并设置开始时间结束时间校验功能
2018/08/12 Javascript
JS面试题大坑之隐式类型转换实例代码
2018/10/14 Javascript
使用node搭建自动发图文微博机器人的方法
2019/03/22 Javascript
vue3.0 的 Composition API 的使用示例
2020/10/26 Javascript
[01:50]WODOTA制作 DOTA2中文宣传片《HERO》
2013/04/28 DOTA
python进阶_浅谈面向对象进阶
2017/08/17 Python
python excel转换csv代码实例
2019/08/26 Python
CSS3 :default伪类选择器使用简介
2018/03/15 HTML / CSS
Parfumdreams英国:香水和化妆品
2019/05/10 全球购物
幼儿园教师考核制度
2014/02/01 职场文书
信访维稳工作汇报
2014/10/27 职场文书
小兵张嘎观后感300字
2015/06/03 职场文书
健康证明
2015/06/19 职场文书
python实现简单反弹球游戏
2021/04/12 Python