防止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 汉字字节判断
Aug 01 Javascript
javascript 多级checkbox选择效果
Aug 20 Javascript
JavaScript Event学习第五章 高级事件注册模型
Feb 07 Javascript
jQuery Tools tab使用介绍
Jul 14 Javascript
JavaScript中的类数组对象介绍
Dec 30 Javascript
JS基础随笔(菜鸟必看篇)
Jul 13 Javascript
RGB和YUV 多媒体编程基础详细介绍
Nov 04 Javascript
微信小程序 scroll-view实现上拉加载与下拉刷新的实例
Jan 21 Javascript
angularjs实现天气预报功能
Jun 16 Javascript
JS实现把一个页面层数据传递到另一个页面的两种方式
Aug 13 Javascript
react实现复选框全选和反选组件效果
Aug 25 Javascript
React Fragment介绍与使用详解
Nov 11 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图片上传程序
2008/03/27 PHP
smarty中先strip_tags过滤html标签后truncate截取文章运用
2010/10/25 PHP
使ecshop模板中可引用常量的实现方法
2011/06/02 PHP
在PHP中使用redis
2013/11/04 PHP
PHP网页游戏学习之Xnova(ogame)源码解读(十二)
2014/06/25 PHP
PHP请求Socket接口测试实例
2016/08/12 PHP
PHP实现小程序批量通知推送
2018/11/27 PHP
前端开发必须知道的JS之原型和继承
2010/07/06 Javascript
js中top、clientTop、scrollTop、offsetTop的区别 文字详细说明版
2011/01/08 Javascript
idTabs基于JQuery的根据URL参数选择Tab插件
2012/04/11 Javascript
jQuery简单实现隐藏以及显示特效
2015/02/26 Javascript
JS中产生标识符方式的演变
2015/06/12 Javascript
JavaScript setTimeout使用闭包功能实现定时打印数值
2015/12/18 Javascript
jquery实现左右滑动式轮播图
2017/03/02 Javascript
Grunt针对静态文件的压缩,版本控制打包的实例讲解
2017/09/29 Javascript
JavaScript数据结构与算法之二叉树遍历算法详解【先序、中序、后序】
2019/02/21 Javascript
微信网页登录逻辑与实现方法
2019/04/29 Javascript
Vue获取页面元素的相对位置的方法示例
2020/02/05 Javascript
用vue 实现手机触屏滑动功能
2020/05/28 Javascript
Python 结巴分词实现关键词抽取分析
2017/10/21 Python
python中os和sys模块的区别与常用方法总结
2017/11/14 Python
Python使用wxPython实现计算器
2018/01/30 Python
python构建深度神经网络(DNN)
2018/03/10 Python
Python3.6安装卸载、执行命令、执行py文件的方法详解
2020/02/20 Python
PyCharm设置Ipython交互环境和宏快捷键进行数据分析图文详解
2020/04/23 Python
18-35岁旅游团的全球领导者:Contiki
2017/02/08 全球购物
庆祝教师节活动方案
2014/01/31 职场文书
师德个人剖析材料
2014/02/02 职场文书
工作表现自我评价
2014/02/08 职场文书
培训主管的职业生涯规划
2014/03/06 职场文书
QQ空间主人寄语大全
2014/04/12 职场文书
2014年除四害工作总结
2014/12/06 职场文书
事业单位考察材料范文
2014/12/25 职场文书
一年级语文教学随笔
2015/08/14 职场文书
2016年青少年禁毒宣传教育活动总结(学校)
2016/04/05 职场文书
JS 基本概念详细介绍
2021/10/16 Javascript