防止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基本语法分析说明
Jun 15 Javascript
基于jquery的回到页面顶部按钮
Jun 27 Javascript
jquery的clone方法应用于textarea和select的bug修复
Jun 26 Javascript
JavaScript极简入门教程(三):数组
Oct 25 Javascript
js判断浏览器版本以及浏览器内核的方法
Jan 20 Javascript
谈谈JSON对象和字符串之间的相互转换JSON.stringify(obj)和JSON.parse(string)
Oct 01 Javascript
vue-cli配置文件——config篇
Jan 04 Javascript
Servlet3.0与纯javascript通过Ajax交互的实例详解
Mar 18 Javascript
vue动态改变背景图片demo分享
Sep 13 Javascript
React 实现拖拽功能的示例代码
Jan 06 Javascript
Javascript 类型转换、封闭函数及常见内置对象操作示例
Nov 15 Javascript
angularjs模态框的使用代码实例
Dec 20 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新手上路(四)
2006/10/09 PHP
PHP也能干大事之PHP中的编码解码详解
2015/04/20 PHP
拖动一个HTML元素
2006/12/22 Javascript
jQuery Ajax文件上传(php)
2009/06/16 Javascript
jquery 如何动态添加、删除class样式方法介绍
2012/11/07 Javascript
jquery自动填充勾选框即把勾选框打上true
2014/03/24 Javascript
node.js中的fs.readSync方法使用说明
2014/12/17 Javascript
详解JavaScript中的构造器Constructor模式
2016/01/14 Javascript
jQuery中判断对象是否存在的方法汇总
2016/02/24 Javascript
Three.js学习之Lamber材质和Phong材质
2016/08/04 Javascript
JS实现的驼峰式和连字符式转换功能分析
2016/12/21 Javascript
Bootstrap进度条学习使用
2017/02/09 Javascript
Node.js安装配置图文教程
2017/05/10 Javascript
Bootstrap 表单验证formValidation 实现远程验证功能
2017/05/17 Javascript
Angular2学习教程之组件中的DOM操作详解
2017/05/28 Javascript
Angularjs的键盘事件的绑定
2017/07/27 Javascript
nodejs连接mysql数据库及基本知识点详解
2018/03/20 NodeJs
微信小程序自定义组件封装及父子间组件传值的方法
2018/08/28 Javascript
浅析vue-router原理
2018/10/19 Javascript
js字符串倒序的实例代码
2018/11/30 Javascript
从组件封装看Vue的作用域插槽的实现
2019/02/12 Javascript
javascript运行机制之执行顺序理解
2020/08/03 Javascript
详解微信小程序(Taro)手动埋点和自动埋点的实现
2021/03/02 Javascript
[00:20]DOTA2荣耀之路7:-ah fu-抢盾
2018/05/31 DOTA
python使用Tkinter显示网络图片的方法
2015/04/24 Python
在Python的Django框架中调用方法和处理无效变量
2015/07/15 Python
python-itchat 获取微信群用户信息的实例
2019/02/21 Python
python检测服务器端口代码实例
2019/08/31 Python
Python中的全局变量如何理解
2020/06/04 Python
vue.js刷新当前页面的实例讲解
2020/12/29 Python
英国地毯卖家:The Rug Seller
2019/07/18 全球购物
泰国第一在线超市:Tops
2021/02/13 全球购物
介绍一下Java的安全机制
2012/06/28 面试题
公司会计主管岗位责任制
2014/03/01 职场文书
银行贷款委托书范本
2014/10/11 职场文书
JavaScript 与 TypeScript之间的联系
2021/11/27 Javascript