防止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 相关文章推荐
document.open() 与 document.write()的区别
Aug 13 Javascript
jquery为页面增加快捷键示例
Jan 31 Javascript
jQuery-1.9.1源码分析系列(十)事件系统之事件包装
Nov 20 Javascript
javascript基础语法——全面理解变量和标识符
Jun 02 Javascript
Ajax 加载数据 练习代码
Jan 05 Javascript
JS 组件系列之BootstrapTable的treegrid功能
Jun 16 Javascript
Vue 2.0在IE11中打开项目页面空白的问题解决
Jul 16 Javascript
JavaScript获取用户所在城市及地理位置
Apr 21 Javascript
Jquery的Ajax技术使用方法
Jan 21 jQuery
javascript实现摄像头拍照预览
Sep 30 Javascript
vue-dplayer 视频播放器实例代码
Nov 08 Javascript
Vue中强制组件重新渲染的正确方法
Jan 03 Vue.js
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
ThinkPHP的Widget扩展实例
2014/06/19 PHP
PHP使用递归生成文章树
2015/04/21 PHP
PHP7正式版测试,性能惊艳!
2015/12/08 PHP
PHP商品秒杀问题解决方案实例详解【mysql与redis】
2019/07/22 PHP
Mootools 1.2教程 类(一)
2009/09/15 Javascript
javascript DOM编程实例(智播客学习)
2009/11/23 Javascript
js获取元素相对窗口位置的实现代码
2014/09/28 Javascript
一个检测表单数据的JavaScript实例
2014/10/31 Javascript
使用jQuery仿苹果官网焦点图特效
2014/12/23 Javascript
JavaScript中的标签语句用法分析
2015/02/10 Javascript
浅谈angularJS 作用域
2015/07/05 Javascript
探究JavaScript函数式编程的乐趣
2015/12/14 Javascript
原生js实现可爱糖果数字时间特效
2016/12/30 Javascript
微信小程序动态的加载数据实例代码
2017/04/14 Javascript
AngularJS表单验证功能分析
2017/05/26 Javascript
NodeJS 实现手机短信验证模块阿里大于功能
2017/06/19 NodeJs
解决低版本的浏览器不支持es6的import问题
2018/03/09 Javascript
jQuery+PHP+Ajax实现动态数字统计展示功能
2019/12/25 jQuery
node.JS路径解析之PATH模块使用方法详解
2020/02/06 Javascript
[05:42]DOTA2英雄梦之声_第10期_蝙蝠骑士
2014/06/21 DOTA
python 禁止函数修改列表的实现方法
2017/08/03 Python
python装饰器深入学习
2018/04/06 Python
Python查找两个有序列表中位数的方法【基于归并算法】
2018/04/20 Python
Selenium(Python web测试工具)基本用法详解
2018/08/10 Python
利用python实现周期财务统计可视化
2019/08/25 Python
Python中logging日志库实例详解
2020/02/19 Python
新手入门学习python Numpy基础操作
2020/03/02 Python
Python尾递归优化实现代码及原理详解
2020/10/09 Python
css3加js做一个简单的3D行星运转效果实例代码
2017/01/18 HTML / CSS
美国指甲油品牌:Deco Miami
2017/01/30 全球购物
阿迪达斯法国官方网站:adidas法国
2018/03/20 全球购物
J2EE的优越性主要表现在哪些方面
2016/03/28 面试题
两年的个人工作自我评价
2014/01/10 职场文书
领导班子个人对照检查剖析材料
2014/09/29 职场文书
欢迎家长标语
2014/10/08 职场文书
GPU服务器的多用户配置方法
2022/07/07 Servers