Ajax获取页面被缓存的解决方法
在AJAX的世界里,我们常常利用它实现页面内容的无刷新获取,这种方式既快捷又方便。它也带来了一些挑战。当我们两次提交相同的参数时,AJAX可能会返回之前已经获取过的内容,这在我们第一次修改参数后尤为明显,页面似乎没有任何变化。
这种情况的出现,是因为AJAX在获取数据时,会先查看本机的缓存。如果本机缓存中有相同的内容,它就不会去访问远程的服务器。这样的操作在一定程度上提高了速度,减轻了服务器的压力,但同时也带来了一些显而易见的问题。
为了解决这个问题,我们可以在获取页面的时候增加一个额外的参数。一个简单而有效的方法就是使用一个随机数。例如:
```javascript
function idCheck() {
// 参数调用函数
var f = document.modify_form;
var book_num = f.book_num.value;
if(book_num=="") {
window.alert("图书编号不能为空");
f.book_num.focus();
return false;
}
// 加一个随机数
var number = Math.random();
number = ; // 放大随机数
number = Math.ceil(number); // 向上取整
// 发送请求,额外添加了随机数
send_request('get_book.php?book_num='+book_num+'&ranum='+number');
}
```
我们还可以在被调用的页面中,加入禁止缓存的代码。这样,无论何时请求该页面,服务器都会返回的内容。下面是不同网页语言的示例代码:
html代码:
```html
```
asp代码:
```asp
response.expires = -1
response.expiresabsolute = now()-1
response.cachecontrol = "no-cache"
```
php代码:
```php
header("expires: mon, 26 jul 1997 05:00:00 gmt"); // 注意日期需要修改成过去的时间点或未来很远的时间点都可以实现禁止缓存的效果。header("cache-control: no-cache, must-revalidate"); header("pragma: no-cache");
```jsp代码:`response.addHeader("pragma", "no-cache"); response.addHeader("cache-control", "no-cache, must-revalidate"); response.addHeader("expires", "0");` 需要注意的是,这些禁止缓存的设置只是告诉浏览器不要缓存页面内容,并不能强制浏览器遵循这些设置。不同的浏览器可能会有不同的缓存策略。增加随机参数和使用这些禁止缓存的设置结合起来使用,通常可以有效地解决相同参数导致内容重复的问题。
编程语言
- Ajax获取页面被缓存的解决方法
- VueJs 将接口用webpack代理到本地的方法
- 仿google搜索提示 SuggestFramework的使用
- Bootstrap table使用方法总结
- thinkphp命名空间用法实例详解
- 浅谈js常用内置方法和对象
- jQuery dataTables与jQuery UI 对话框dialog的使用教程
- 监控微信小程序中的慢HTTP请求过程详解
- vue.js学习笔记之绑定style样式和class列表
- 用.NET做动态域名解析的方法示例
- JavaScript实现各种排序的代码详解
- mysql 5.7.14 安装配置方法图文教程
- 修改fckeditor的文件上传功能步骤
- jquery.validate提示错误信息位置方法
- 微信小程序js文件改变参数并在视图上及时更新【
- git克隆远程仓库的指定分支方法(附常用git配置命