防止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中==与===操作符的比较
Mar 21 Javascript
JavaScript类属性的访问方式详解
Feb 11 Javascript
js改变鼠标的形状和样式的方法
Mar 31 Javascript
jQuery照片伸缩效果不影响其他元素的布局
May 09 Javascript
jQuery实现div随意拖动的实例代码(通用代码)
Jan 28 Javascript
jQuery实现打开页面渐现效果示例
Jul 27 Javascript
用js实现简单算法的实例代码
Sep 24 Javascript
jQuery实现简单复制json对象和json对象集合操作示例
Jul 09 jQuery
详解三种方式解决vue中v-html元素中标签样式
Nov 22 Javascript
JavaScript学习笔记之DOM基础操作实例小结
Jan 09 Javascript
JavaScript中Dom操作实例详解
Jul 08 Javascript
使用axios请求接口,几种content-type的区别详解
Oct 29 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
AngularJS入门教程之Hello World!
2014/12/06 Javascript
浅谈JavaScript函数节流
2014/12/09 Javascript
JavaScript解析json格式数据简单示例
2014/12/09 Javascript
鼠标经过子元素触发mouseout,mouseover事件的解决方案
2015/07/26 Javascript
JS创建对象几种不同方法详解
2016/03/01 Javascript
详解前端自动化工具gulp自动添加版本号
2016/12/20 Javascript
jQuery extend()详解及简单实例
2017/05/06 jQuery
详解angular2如何手动点击特定元素上的点击事件
2018/10/16 Javascript
解决vue2 在mounted函数无法获取prop中的变量问题
2018/11/15 Javascript
JavaScript静态作用域和动态作用域实例详解
2019/06/17 Javascript
vue拖拽组件 vuedraggable API options实现盒子之间相互拖拽排序
2019/07/08 Javascript
小程序实现分类页
2019/07/12 Javascript
策略模式实现 Vue 动态表单验证的方法
2019/09/16 Javascript
Vue $attrs &amp; inheritAttr实现button禁用效果案例
2020/12/07 Vue.js
Python编程中运用闭包时所需要注意的一些地方
2015/05/02 Python
解决每次打开pycharm直接进入项目的问题
2018/10/28 Python
python的xpath获取div标签内html内容,实现innerhtml功能的方法
2019/01/02 Python
对Python强大的可变参数传递机制详解
2019/06/13 Python
Python学习笔记之Break和Continue用法分析
2019/08/14 Python
python sqlite的Row对象操作示例
2019/09/11 Python
python3+opencv生成不规则黑白mask实例
2020/02/19 Python
Python实现仿射密码的思路详解
2020/04/23 Python
python如何实时获取tcpdump输出
2020/09/16 Python
日本著名的平价时尚女性购物网站:Fifth
2016/08/24 全球购物
Lou & Grey美国官网:主打舒适性面料服饰
2017/12/21 全球购物
美国第二大连锁书店:Books-A-Million
2017/12/28 全球购物
碧欧泉Biotherm加拿大官方网站:法国高端护肤品牌
2019/10/18 全球购物
阿玛尼美妆俄罗斯官网:Giorgio Armani Beauty RU
2020/07/19 全球购物
小学音乐教学反思
2014/02/05 职场文书
公益活动邀请函
2014/02/05 职场文书
应届生自荐信范文
2014/02/21 职场文书
我为自己代言广告词
2014/03/18 职场文书
个人先进材料范文
2014/12/30 职场文书
医务人员岗前培训心得体会
2016/01/08 职场文书
2019银行员工个人工作自我鉴定
2019/06/27 职场文书
Sentry的安装、配置、使用教程(Sentry日志手机系统)
2022/07/23 Python