ajax 缓存问题 requestheader

更新时间：2010年02月09日 11:58:04 作者：

在web开发的时候经常需要用到ajax，但是有些问题往往会被忽略，如果提交后需要在服务端做一些后台操作的话因为浏览器默认状态下有缓存的原因，可能页面上的信息还是正确的，但是后台的逻辑代码却没有真正的更新。

这样是为了减少频繁访问服务器对其造成不必要的负担，但是同时也带来了一定特殊业务逻辑满足不了的问题。
例如：
　　需要通过前台一个select下拉列表来作为ajax的触发入口，同时将server返回的信息呈现在页面，并且往session或者数据库里面更新一些实际的东西的逻辑操作。
当第一次切换选项，也就是提交请求的时候一切都是正常的，但是如果切换相同选项因为浏览器的缓存原因，将不会走到server，实际得到的动态信息是从缓存中去取的。造成后台的逻辑没有被走到。代码如下：
aspx相关代码

复制代码代码如下:

 
<asp:DropDownList ID="ddlProductList" runat="server"> 
<asp:ListItem Value="" Selected="True"></asp:ListItem> 
<asp:ListItem Value="null">積立利率変動型終身保険</asp:ListItem> 
<asp:ListItem Value="QIWL">　　・QIWL(H9)</asp:ListItem> 
<asp:ListItem Value="KIWL">　　・KIWL(H11)</asp:ListItem> 
<asp:ListItem Value="JIWL">　　・JIWL(H15)</asp:ListItem> 
<asp:ListItem Value="null">積立利率変動型終身保険(市場金利連動型)</asp:ListItem> 
<asp:ListItem Value="IIWL">　　・IIWL</asp:ListItem> 
<asp:ListItem Value="HIWL">　　・HIWL</asp:ListItem> 
<asp:ListItem Value="null">積立利率変動型終身保険(貯蓄重視型)</asp:ListItem> 
<asp:ListItem Value="KIWLS">　　・KIWLS</asp:ListItem> 
<asp:ListItem Value="null">ドル建積立利率変動型終身保険</asp:ListItem> 
<asp:ListItem Value="ODIWL">　　・ODIWL</asp:ListItem> 
<asp:ListItem Value="JDIWL">　　・JDIWL</asp:ListItem> 
<asp:ListItem Value="HDIWL">　　・HDIWL</asp:ListItem> 
<asp:ListItem Value="null"> 積立利率変動型養老保険(貯蓄重視型　米ドル建) </asp:ListItem> 
<asp:ListItem Value="JDISE">　　・JDISE</asp:ListItem> 
</asp:DropDownList> 

aspx.cs代码

复制代码代码如下:

 
if (!IsPostBack) 
{ 
//为doropdownlist添加客户端事件 
ddlProductList.Attributes.Add("onchange", "selectChange(this)"); 
} 

Ajax.js代码

复制代码代码如下:

 
var request; 
function selectChange(obj) { 
createHttpRequest(); 
var url = "AjaxService.aspx?product=" + obj.value; 
request.open("GET",url,true) 
request.onreadystatechange = resetRate; 
request.send(); 
return false; 
} 
function createHttpRequest () { 
if (window.ActiveXObject) { 
request = new ActiveXObject("Microsoft.XMLHTTP"); 
} else if (window.XMLHttpRequest) { 
request = new XMLHttpRequest(); 
} 
} 
function resetRate() { 
if (request.readyState == 4) { 
if (request.responseText.substring(0,1) == "#") { 
document.getElementById("systemErrorMsg").innerHTML = request.responseText.substring(1); 
document.getElementById("rate").innerHTML = ""; 
} else { 
document.getElementById("rate").innerHTML = request.responseText; 
document.getElementById("systemErrorMsg").innerHTML = ""; 
} 
} 
} 

请求页面代码

复制代码代码如下:

 
protected void Page_Load(object sender, EventArgs e) 
{ 
string productShortName = Request.QueryString["product"]; 
if (productShortName != null && productShortName != "null" ) 
{ 
string result = Utility.GetProductRate(packageName); 
Session["rate"] = result; 
Response.Write(result); 
} 
} 

经过分析问题出在XmlHttpRequest这个对象上面，切换选项后，并不是每次走到请求页面的逻辑中。查询了相关资料解决方案如下：
request.setRequestHeader("If-Modified-Since","0");
简单的说，Last-Modified 与If-Modified-Since 都是用于记录页面最后修改时间的 HTTP 头信息，只是 Last-Modified 是由服务器往客户端发送的 HTTP 头，而 If-Modified-Since 则是由客户端往服务器发送的头，可以看到，再次请求本地存在的 cache 页面时，客户端会通过 If-Modified-Since 头将先前服务器端发过来的 Last-Modified 最后修改时间戳发送回去，这是为了让服务器端进行验证，通过这个时间戳判断客户端的页面是否是最新的，如果不是最新的，则返回新的内容，如果是最新的，则返回 304 告诉客户端其本地 cache 的页面是最新的，于是客户端就可以直接从本地加载页面了，这样在网络上传输的数据就会大大减少，同时也减轻了服务器的负担。
另外还有另一个解决放案，不过还未经测试，理论上应该是可行的，就是在请求页面设置一下response的header：
Response.AddHeader("Cache-control", "no-cache");

您可能感兴趣的文章:

ajax
缓存

Ajax长连接项目案例
所谓的长连接，就是不断去发送请求，把请求阻塞在服务器端，每次超过请求时间就去重新发送请求，下面以一个实例为大家详细介绍下，感兴趣的朋友可不要错过了哈
2013-08-08
Ajax校验用户名是否存在的方法
这篇文章主要为大家详细介绍了Ajax校验用户名是否存在的方法，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2021-10-10
一款经典的ajax登录页面后台asp.net
众所周知，用服务器控件做页面的登录窗体时很简单的，但是页面的多次回传让我们感觉到头痛，一直刷新页面的感觉非常之不好，其实用ajax的局部刷新功能可以完全解决这个问题，制作出来的页面有很好的交互性，而且是局部刷新，节省网络资源。
2009-10-10
Ajax无刷新Url提交页面
Ajax从流行到现在，已经不算是什么新鲜的技术了
2010-10-10
找到一款不错的基于AJAX留言板源码(PHP版、ASP版)提供下载了
找到一款不错的基于AJAX留言板源码(PHP版、ASP版)提供下载了...
2007-09-09
ajax 同步和异步XMLHTTP代码分析
微软MSXML中的XMLHTTP组件基于URL Moniker，同时支持同步和异步HTTP/HTTPS访问远程主机资源的方法。这里提供基本的JavaScript代码以方便本地运行cscript.exe调试。
2009-11-11
活到老学到老学习AJAX跨域（三）
学习AJAX其实有个很重要的应用，就是为了执行另外几个站点的ASP，返回结果。通过本文给大家介绍ajax跨域相关知识，需要的朋友参考下
2016-02-02
layUI ajax加载html页面后重新渲染的方法
今天小编就为大家分享一篇layUI ajax加载html页面后重新渲染的方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
2018-08-08
ajax和fetch的区别点总结
在本篇文章里小编给大家整理了一篇关于ajax和fetch的区别点总结内容，对此有兴趣的朋友们可以跟着学习下。
2021-12-12
分享Ajax创建简单实例代码
这篇文章主要为大家分享了Ajax创建简单实例代码，学习Ajax如何创建简单实例，感兴趣的小伙伴们可以参考一下
2015-12-12