防止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 相关文章推荐
深入理解jQuery中live与bind方法的区别
Dec 18 Javascript
node.js中的socket.io入门实例
Apr 26 Javascript
文本框倒叙输入让输入框的焦点始终在最开始的位置
Sep 01 Javascript
JavaScript 七大技巧(一)
Dec 13 Javascript
JS Select下拉框(支持输入模糊查询)
Feb 04 Javascript
JavaScript实现前端分页控件
Apr 19 Javascript
Bootstrap框架建立树形菜单(Tree)的实例代码
Oct 30 Javascript
利用JS测试目标网站的打开响应速度
Dec 01 Javascript
React全家桶环境搭建过程详解
May 18 Javascript
jQuery控制input只能输入数字和两位小数的方法
May 16 jQuery
vue 路由缓存 路由嵌套 路由守卫 监听物理返回操作
Aug 06 Javascript
浅谈vue中$event理解和框架中在包含默认值外传参
Aug 07 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开发留言板的CRUD(增,删,改,查)操作
2012/04/19 PHP
php验证手机号码(支持归属地查询及编码为UTF8)
2013/02/01 PHP
对PHP PDO的一些认识小结
2015/01/23 PHP
PHP+Mysql+jQuery文件下载次数统计实例讲解
2015/10/10 PHP
thinkphp如何获取客户端IP
2015/11/03 PHP
浅谈PHP中的
2016/04/23 PHP
PHP中set_include_path()函数相关用法分析
2016/07/18 PHP
PHP join()函数用法与实例讲解
2019/03/11 PHP
使用JQuery进行跨域请求
2010/01/25 Javascript
怎样在JavaScript里写一个swing把数据插入数据库
2012/12/10 Javascript
js修改地址栏URL参数解决url参数问题
2012/12/15 Javascript
关于全局变量和局部变量的那些事
2013/01/11 Javascript
Javascript 命名空间模式
2013/11/01 Javascript
在JS数组特定索引处指定位置插入元素的技巧
2014/08/24 Javascript
JavaScript实现常用二级省市级联下拉列表的方法
2015/03/25 Javascript
JavaScript通过事件代理高亮显示表格行的方法
2015/05/27 Javascript
如何解决ligerUI布局时Center中的Tab高度大小
2015/11/24 Javascript
CascadeView级联组件实现思路详解(分离思想和单链表)
2016/04/12 Javascript
基于js里调用函数时,函数名带括号和不带括号的区别
2016/07/28 Javascript
基于JavaScript实现全选、不选和反选效果
2017/02/15 Javascript
微信小程序实现默认第一个选中变色效果
2018/07/17 Javascript
微信小程序日历组件使用方法详解
2018/12/29 Javascript
python中的随机函数小结
2018/01/27 Python
python--shutil移动文件到另一个路径的操作
2020/07/13 Python
HTML5拖拽功能实现的拼图游戏
2018/07/31 HTML / CSS
皮姆斯勒语言学习:Pimsleur Language Programs
2018/06/30 全球购物
Ralph Lauren意大利官方网站:时尚界最负盛名的品牌之一
2018/10/18 全球购物
自我评价如何写好?
2014/01/05 职场文书
留学推荐信怎么写
2014/01/25 职场文书
某集团股份有限公司委托书样本
2014/09/24 职场文书
放假通知
2015/04/14 职场文书
小学班主任心得体会
2016/01/07 职场文书
golang 实现菜单树的生成方式
2021/04/28 Golang
Python学习之os包使用教程详解
2022/03/21 Python
多人盗宝《绿林侠盗》第三赛季4.5上线 跨平台实装
2022/04/03 其他游戏
Golang 入门 之url 包
2022/05/04 Golang