防止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 FormatNumber函数实现方法
Dec 30 Javascript
js中使用DOM复制(克隆)指定节点名数据到新的XML文件中的代码
Jul 27 Javascript
JQuery入门——用one()方法绑定事件处理函数(仅触发一次)
Feb 05 Javascript
Javascript和Java获取各种form表单信息的简单实例
Feb 14 Javascript
倒记时60刷新网页的js代码
Feb 18 Javascript
浏览器窗口大小变化时使用resize事件对框架不起作用的解决方法
May 11 Javascript
JavaScript将字符串转换为整数的方法
Apr 14 Javascript
js控件Kindeditor实现图片自动上传功能
Jul 20 Javascript
jQGrid动态填充select下拉框的选项值(动态填充)
Nov 28 Javascript
AngularJS基于factory创建自定义服务的方法详解
May 25 Javascript
BootStrap 标题设置跨行无效的解决方法
Oct 25 Javascript
p5.js入门教程和基本形状绘制
Mar 15 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
POSIX 风格和兼容 Perl 风格两种正则表达式主要函数的类比(preg_match, preg_replace, ereg, ereg_replace)
2010/10/12 PHP
PHP输出英文时间日期的安全方法(RFC 1123格式)
2014/06/13 PHP
php上传图片客户端和服务器端实现方法
2015/03/30 PHP
PHP获取文件行数的方法
2015/06/10 PHP
学习YUI.Ext基础第一天
2007/03/10 Javascript
在js中单选框和复选框获取值的方式
2009/11/06 Javascript
你必须知道的Javascript知识点之&quot;this指针&quot;的应用
2013/04/23 Javascript
一个简单的JS鼠标悬停特效具体方法
2013/06/17 Javascript
javascript转换日期字符串为Date日期对象的方法
2015/02/13 Javascript
JavaScript获取网页中第一个图片id的方法
2015/04/03 Javascript
遮罩层点击按钮弹出并且具有拖动和关闭效果(两种方法)
2015/08/20 Javascript
AngularJS仿苹果滑屏删除控件
2016/01/18 Javascript
Bootstrap Metronic完全响应式管理模板之菜单栏学习笔记
2016/07/08 Javascript
老生常谈JQuery data方法的使用
2016/09/09 Javascript
详谈js遍历集合(Array,Map,Set)
2017/04/06 Javascript
node实现分片下载的示例代码
2018/10/17 Javascript
服务端预渲染之Nuxt(使用篇)
2019/04/08 Javascript
在Express中提供静态文件的实现方法
2019/10/17 Javascript
Python socket.error: [Errno 98] Address already in use的原因和解决方法
2014/08/25 Python
使用Python脚本在Linux下实现部分Bash Shell的教程
2015/04/17 Python
Python Xml文件添加字节属性的方法
2018/03/31 Python
对python的文件内注释 help注释方法
2018/05/23 Python
Python语言快速上手学习方法
2018/12/14 Python
python的pygal模块绘制反正切函数图像方法
2019/07/16 Python
PyCharm中关于安装第三方包的三个建议
2020/09/17 Python
详解tf.device()指定tensorflow运行的GPU或CPU设备实现
2021/02/20 Python
使用分层画布来优化HTML5渲染的教程
2015/05/08 HTML / CSS
应用数学专业求职信
2014/03/14 职场文书
小区物业门卫岗位职责
2014/04/10 职场文书
2014年客服工作总结范文
2014/11/13 职场文书
优秀党员先进材料
2014/12/18 职场文书
公司年会主持词范文!
2019/05/07 职场文书
家电创业计划书
2019/08/05 职场文书
Python Pandas常用函数方法总结
2021/06/15 Python
python简单验证码识别的实现过程
2021/06/20 Python
Python可视化学习之matplotlib内置单颜色
2022/02/24 Python