防止jQuery ajax Load使用缓存的方法小结_jquery

一、用法
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");
?>

另外两种解决方案:
在请求路径中添加一个时间参数值为当前的时间或者在表单中添加一个隐藏的字段将该字段的值设置为当前时间。

时间: 2024-08-04 10:51:24

防止jQuery ajax Load使用缓存的方法小结_jquery的相关文章

防止jQuery ajax Load使用缓存的方法小结

 本篇文章主要是对防止jQuery ajax Load使用缓存的方法进行了介绍,需要的朋友可以过来参考下,希望对大家有所帮助 一.用法  jquery的load函数是请求另一个文件并加载到当前DOM里的调用,load方法的完整格式是:load( url, [data], [callback] )(注意没有参数是GET方式请求,有参数则是 POST方法).    * url:是指要导入文件的地址.  * data:可选参数:因为Load不仅仅可以导入静态的html文件,还可以导入动态脚本,例如PH

jQuery ajax Load关闭缓存的方法

简单介绍load(url,data,function(response,status,xhr))参数 描述 url 规定要将请求发送到哪个 URL. data 可选.规定连同请求发送到服务器的数据. function(response,status,xhr) 可选.规定当请求完成时运行的函数. 额外的参数: •response - 包含来自请求的结果数据 •status - 包含请求的状态("success", "notmodified", "error&

jQuery Ajax页面局部加载方法汇总_jquery

在jquery中实现ajax加载的方法有很多种,不像以前的js的ajax只有那一种,下面我们介绍jquery ajax实现局部加载方法总结,有需要了解的朋友可参考. 例 $.ajax({ url: "hotelQuery!queryHotelByCity.action", type: "post", dataType: "html", data: "queryHotel.city="+cityobj.value+"&

jquery实现去除重复字符串的方法小结_jquery

本文实例总结了jquery实现去除重复字符串的方法.分享给大家供大家参考,具体如下: 这里总结了三种去除重复字符串的方法: 把例子贴上,用jQuery方便些,首先要搭好环境,就是在同一目录下(同一文件夹下)保证有所使用的jquery1.8.1(如果是其他版本就在html代码中作相应改动) 第一: <html> <head> <script src="jquery-1.8.1.js"></script> <SCRIPT LANGUAG

jquery ready()的几种实现方法小结_jquery

1.最常用也是最标准的 复制代码 代码如下: $(document).ready(){ }); 2.是上面的简写: 复制代码 代码如下: $(function(){ }) 很奇怪?为什么能这样?不是判断document对象是否 reADy然后才执行函数的么?document哪去了?我们看下jQuery的源代码: 复制代码 代码如下: // jQuery的构造函数: var jQuery = function( a, c ) { // $(document).ready()的简写形式,只有在$(f

jquery中event对象属性与方法小结_jquery

JQuery读书笔记–Event属性说明 JQuery事件中的Event属性是经常性的被忽略的.大多数时间你的确不怎么用它,但有些时候它还是它还是有作用的.如获知触发时用户的环境(是否按了shift etc).每个浏览器对event都有不同的地方,Jquery对Event做了标准化所以可以放心用. * .target  这个反应触发事件的DOM对象,可以在事件冒泡的时候判断是否是事件源头(compare event.target to this) * .pageX:  鼠标的left属性,相对于

jquery的checkbox,radio,select等方法小结_jquery

1.checkbox日常jquery操作. 现在我们以下面的html为例进行checkbox的操作. <input id="checkAll" type="checkbox" />全选 <input name="subBox" type="checkbox" />项1 <input name="subBox" type="checkbox" />项2

jQuery AJAX实现调用页面后台方法_AJAX相关

本文实例为大家分享了jQuery AJAX调用页面后台方法,供大家参考,具体内容如下 1.新建demo.aspx页面. 2.首先在该页面的后台文件demos.aspx.cs中添加引用. using System.Web.Services; 1).无参数的方法调用. 大家注意了,这个版本不能低于.net framework 2.0.2.0已下不支持的. 后台代码: [WebMethod] public static string SayHello() { return "Hello Ajax!&q

jQuery AJAX实现调用页面后台方法

本文实例为大家分享了jQuery AJAX调用页面后台方法,供大家参考,具体内容如下 1.新建demo.aspx页面. 2.首先在该页面的后台文件demos.aspx.cs中添加引用. using System.Web.Services; 1).无参数的方法调用. 大家注意了,这个版本不能低于.net framework 2.0.2.0已下不支持的. 后台代码: [WebMethod] public static string SayHello() { return "Hello Ajax!&q