使用 jQuery 1.7.1，我通过 AJAX 加载一些 HTML 片段，这些片段通过 html() 注入(inject)到 DOM 中。方法。
HTML内容本身无法被缓存，但它可能会加载一些可以缓存的JavaScript资源。
我发现当我在 $.ajax 中禁用缓存时当 HTML 被注入(inject)到 DOM 中时，这会将缓存清除参数添加到 jQuery 发出的所有 HTTP 请求中。这可以防止浏览器缓存静态 JavaScript 资源。
我当前的解决方案不是很优雅，而且看起来很活泼。我基本上在 AJAX 调用成功之后、HTML 处理之前翻转全局缓存选项。
var $dynamic = $('#dynamic');
$.ajax({
url: href,
cache: false,
dataType: 'html',
success: function(data, textStatus, jqXHR) {
// This is hokey, but needed to allow browser to cache
// resources loaded by the fragment
$.ajaxSetup({cache:true});
$dynamic.empty().html(data);
$.ajaxSetup({});
}
});
谁能想到更好的方法来做到这一点？我应该避免使用 <script rel=...>在 AJAX 加载的片段中添加标签并使用其他内容来加载 JavaScript？
旁注，似乎有一些相关的 SO 问题，但其中一个有一个公认的答案，但不是答案，另一个声称该行为在 jQuery 1.4 中发生了变化，所以这可能是某种回归。
编辑
为了详细说明，上面的 jQuery 片段应用于 div元素。修剪成这样:
<html>
<head>
// ... load jquery ...
<script type="text/javascript">
$(document).ready(function() {
var $dynamic = $('#dynamic');
$('a').click(function(e) {
e.preventDefault();
var $a = $(this);
var href = $a.attr('href');
$.ajax({
url: href,
cache: false,
dataType: 'html',
success: function(data, textStatus, jqXHR) {
$.ajaxSetup({cache:true});
$dynamic.empty().html(data);
$.ajaxSetup({});
}
});
});
});
</script>
</head>
<body>
<a href="/api/dynamic-content/">Click Here</a>
<div id="dynamic"></div>
</body>
</html>
当事件发生时，在本例中是单击，处理程序将调用 $.ajax将文本/html 片段加载到 #dynamic div 元素。以下是此类片段的示例:
<p>Some dynamic content here...</p>
<script type="text/javascript" src="/static/some.js"></script>
所以success AJAX 调用的处理程序加载 text/html 片段并通过 jQuery html(...) 将其注入(inject)到 DOM 中功能。正如您所看到的，text/html 片段还可能具有指向外部脚本的链接。
html(...) 的文档表明这种使用模式很好，并且脚本资源将按预期加载和执行。
我遇到的问题是 text/html 片段的内容不可缓存，必须使用缓存清除机制来调用。然而，它需要加载的 JavaScript 资源是静态且可缓存的，但 jQuery 在加载 JS 资源时应用缓存清除，因为初始 AJAX 调用是使用 cache : false 进行的。
分解一下，这是事件链:
- 调用点击处理程序
- AJAX 函数执行
HTTP GET /api/dynamic-content/?_=1331829184164 - 成功处理程序调用
$dynamic.empty().html(data); -
$dynamic.empty().html(...)执行HTTP GET /static/some.js?_=1331829184859
我正在寻找一种更优雅的方法来禁用后续或“内部”HTTP 请求的缓存清除，当文本/html 片段注入(inject) DOM 时，该请求会触发加载 JS 资源。
总之，其他一切都是正确的，我只是想让它做 HTTP GET /static/some.js ，不是HTTP GET /static/some.js?_=1331829184859最后一步。
最佳答案
如果您的服务器设置为正确识别哪些资源可以缓存，哪些资源不能缓存，则不需要 cache: false 选项。
另一种替代方法是使用 POST 而不是 GET，使用 ajax< 上的 方法。type: 'POST' 选项
关于jquery - 防止 jQuery 缓存破坏在使用 `html(...)` 函数的 AJAX 回调期间加载的资源，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/9657604/