浏览器没有';无法区分通过AJAX获得的部分HTML和完整页面
我有一个可以在URL/products上访问的页面。当我在浏览器中访问它时,它会在一个布局中显示一整页。以下是请求头和响应体的简化示例:浏览器没有';无法区分通过AJAX获得的部分HTML和完整页面,ajax,http-headers,xmlhttprequest,browser-cache,Ajax,Http Headers,Xmlhttprequest,Browser Cache,我有一个可以在URL/products上访问的页面。当我在浏览器中访问它时,它会在一个布局中显示一整页。以下是请求头和响应体的简化示例: Accept: text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8 <layout> <products /> </layout> Accept:text/html,application/xhtml+xml,application/xml;q=
Accept: text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8
<layout>
<products />
</layout>
Accept:text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8
当用户进行一些搜索时,javascript会通过AJAX更新结果。渲染结果时没有布局,因为渲染需要时间,而且我也不需要它:
Accept: */*;q=0.5, text/javascript, application/javascript, application/ecmascript, application/x-ecmascript
X-Requested-With: XMLHttpRequest
<products />
Accept://*;q=0.5,text/javascript,application/javascript,application/ecmascript,application/x-ecmascript
X-request-With:XMLHttpRequest
因此,在我添加了缓存缓存控制:private,max age=3600
之前,这一切都很好。起初我想我会添加Vary:X-request-With
标题,浏览器会区分这两种响应。但是,当我通过AJAX获取/products,然后在浏览器中访问/products时,它会显示部分AJAX响应
有没有简单的方法来解决这个问题
另外,如果有必要的话,我正在使用Ruby on Rails和jQuery。让您的Ajax调用使用不同的URL,如/products/partial。对于部分结果,您应该有不同的URL(即?partial=yes或类似的东西…) 或 您可以通过ajax获取整个页面,并使用jquery.load()提取所需的部分 $.load将使用“GET”方法调用服务器,检索所有内容,从中提取#productsContainer并插入“#productsContainerHolder”
Steve Luscher的这篇文章描述了一个类似的案例——问题比你描述的更为间歇性。建议的解决办法是:
在提交表单时取消所有AJAX请求
根据您期望的响应使用不同的URL
Steve在ajax请求中使用cancel()进行了1次尝试
如果您没有提到您使用过哪些浏览器,则存在一个与浏览器相关的问题使用Vary:Accept
。这应该是可行的。最简单的方法可能是将jquery的Ajax方法的“cache”参数设置为“False”。它会自动将时间戳附加到URI,以防止它被缓存
这可以通过以下代码段在应用程序范围内完成:
$.ajaxSetup({
cache: false
});
如果缓存即使对于动态请求也很重要,那么您可以根据日期和小时为自己生成时间戳。尝试发送必须重新验证,而不是私有(这对于代理来说更重要)
我建议阅读这篇文章:它可能会有所帮助。
还可以使用Mark的工具测试您的结果,以消除您的本地计算机或isp等。您是否尝试过Vary:Accept
?是的,它也不起作用。我认为浏览器正确地缓存了这两个响应。但由于内容类型:text/html,它将它们平等地对待,并显示最后一个碰巧是部分的内容。所以这并不取决于内容类型:text/html。我很惊讶“Vary”在这里没有任何效果。这似乎是目前唯一的解决方案。但这意味着我需要修改客户端javascript上的每个URL,这不是很方便。我不会呈现布局,因为它需要大量的响应时间。提取在这里不是一个真正的问题。我已经尝试过了,但问题仍然存在。从上面复制我的想法:我认为浏览器正确地缓存了这两个响应。但由于内容类型:text/html,它将它们平等地对待,并显示最后一个碰巧是部分的解决方案。第一个解决方案在我的情况下并不真正适用。但我很高兴看到其他人报告同样的问题。您链接的问题似乎与我无关,但我正在使用Safari。在Firefox中也进行了测试。
<div id="productsContainerHolder">
<div id="productsContainer>
...
</div>
</div>
$.ajaxSetup({
cache: false
});
Cache-Control: max-age=3600, must-revalidate