防止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 相关文章推荐
JS 页面自动加载函数(兼容多浏览器)
May 18 Javascript
实现局部遮罩与关闭原理及代码
Feb 04 Javascript
防止登录页面出现在frame中js代码
Jul 22 Javascript
详解AngularJS中的表达式使用
Jun 16 Javascript
一不小心就做错的JS闭包面试题
Nov 25 Javascript
JS模拟按钮点击功能的方法
Dec 22 Javascript
开启BootStrap学习之旅
May 04 Javascript
angular基于路由控制ui-router实现系统权限控制
Sep 27 Javascript
vue生成token并保存到本地存储中
Jul 17 Javascript
实例分析Array.from(arr)与[...arr]到底有何不同
Apr 09 Javascript
layui 中select下拉change事件失效的解决方法
Sep 20 Javascript
vue 解决provide和inject响应的问题
Nov 12 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
PHP4与PHP3中一个不兼容问题的解决方法
2006/10/09 PHP
php中将指针移动到数据集初始位置的实现代码[mysql_data_seek]
2012/11/01 PHP
用 Composer构建自己的 PHP 框架之使用 ORM
2014/10/30 PHP
微信公众平台消息接口校验与消息接口响应实例
2014/12/23 PHP
PHP魔术方法的使用示例
2015/06/23 PHP
原生PHP实现导出csv格式Excel文件的方法示例【附源码下载】
2019/03/07 PHP
JAVASCRIPT函数作用域和提前声明 分享
2013/08/22 Javascript
使用jQuery快速解决input中placeholder值在ie中无法支持的问题
2014/01/02 Javascript
javascript实现禁止复制网页内容
2014/12/16 Javascript
JavaScript实现将xml转换成html table表格的方法
2015/04/17 Javascript
js仿QQ中对联系人向左滑动、滑出删除按钮的操作
2016/04/07 Javascript
BootStrap按钮标签及基本样式
2016/11/23 Javascript
解决ajax不能访问本地文件问题(利用js跨域原理)
2017/01/24 Javascript
走进javascript——不起眼的基础,值和分号
2017/02/24 Javascript
nodejs入门教程六:express模块用法示例
2017/04/24 NodeJs
vuejs父子组件之间数据交互详解
2017/08/09 Javascript
详解如何优雅地在React项目中使用Redux
2017/12/28 Javascript
node.js基于socket.io快速实现一个实时通讯应用
2019/04/23 Javascript
D3.js(v3)+react 实现带坐标与比例尺的散点图 (V3版本)
2019/05/09 Javascript
JavaScript实现留言板案例
2020/03/17 Javascript
js实现全选和全不选
2020/07/28 Javascript
[01:22:29]真视界:2019年国际邀请赛总决赛
2020/01/29 DOTA
Python实现网络端口转发和重定向的方法
2016/09/19 Python
python如何获取当前文件夹下所有文件名详解
2019/01/25 Python
PYTHON实现SIGN签名的过程解析
2019/10/28 Python
Python 实现训练集、测试集随机划分
2020/01/08 Python
python从ftp获取文件并下载到本地
2020/12/05 Python
使用 HTML5 Canvas 制作水波纹效果点击图片就会触发
2014/09/15 HTML / CSS
瑞士图书网站:Weltbild.ch
2019/09/17 全球购物
简单说下OSPF的操作过程
2014/08/13 面试题
Servlet都有哪些方法?主要作用是什么?
2014/03/04 面试题
2014年收银工作总结
2014/11/13 职场文书
实用干货:敬酒词大全,帮你应付各种场合
2019/11/21 职场文书
MySQL数据库完全卸载的方法
2022/03/03 MySQL
分享node.js实现简单登录注册的具体代码
2022/04/26 NodeJs
SqlServer常用函数及时间处理小结
2023/05/08 SQL Server