preventing jQuery的距离在AJAX回调载入清除缓存资源使用`HTML（...）`函数 [英] Preventing jQuery from cache busting resources loaded during AJAX callbacks that use the `html(...)` function
问题描述
使用jQuery 1.7.1，我加载通过AJAX的一些HTML片段是通过 HTML（）方法注入到DOM。
Using jQuery 1.7.1, I am loading some HTML fragments via AJAX that are injected into the DOM via the html() method.
的HTML内容本身不能被缓存，但它可能加载可被高速缓存一些JavaScript资源
The HTML content itself cannot be cached, but it may load some JavaScript resources that can be cached.
我发现的是，当我禁用缓存在 $。阿贾克斯通话，这增加了清除缓存参数从jQuery的制造出来的HTML是所有HTTP请求注入的DOM。这prevents从缓存，否则静态的JavaScript资源浏览器。
What I've found is when I disable caching in the $.ajax call, this adds the cache busting parameter to all HTTP requests made from jQuery as the HTML is injected into the DOM. This prevents the browser from caching the otherwise static JavaScript resources.
我目前的解决方案是不是很优美，活泼，似乎在那。我基本上翻转全局高速缓存选项后，AJAX调用成功，但在此之前的HTML处理。
My current solution isn't very graceful and seems racy at that. I basically flip the global cache option after the AJAX call has succeeded, but before the HTML is processed.
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({});
}
});
谁能想到一个更好的方式来做到这一点？我应该避免使用＆LT;脚本相对= ...＆GT; 标记中的AJAX加载的片段，并用别的东西来获得的JavaScript加载
Can anyone think of a better way to do this? Should I avoid using the <script rel=...> tag in the AJAX-loaded fragment and use something else to get the JavaScript loaded?
侧面说明，似乎有一些相关的SO问题，但其中一人有一个公认的答案，这不是一个答案，另一个索赔行为的jQuery 1.4改变了，所以也许这是某种形式的回归。
Side note, there seem to be some related SO questions, but one of them has an accepted answer that's not an answer and another claims the behavior was changed in jQuery 1.4, so maybe this is a regression of some sort.
修改
要详细说明，上面jQuery的片段被应用到 DIV 元素。修剪下来的东西是这样的：
To elaborate, the above jQuery snippet is applied to a div element. Trimmed down to something like this:
<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>
当事件发生时，在这种情况下，一次点击，处理程序将调用 $。阿贾克斯加载text / html的片段插入 #dynamic div元素。这里有这样一个片段可能会是什么样子的例子：
When the event occurs, in this case a click, the handler invokes $.ajax to load a text/html fragment into the #dynamic div element. Here's an example of what such a fragment could look like:
<p>Some dynamic content here...</p>
<script type="text/javascript" src="/static/some.js"></script>
AJAX调用的
因此，成功处理程序将text / html的片段并将其注入到通过jQuery的 HTML DOM的（... ）功能。正如你所看到的，text / html的片段也可能有一个链接到外部脚本。
So the success handler of the AJAX call loads the text/html snippet and injects it into the DOM via the jQuery html(...) function. As you can see, the text/html fragment may also have a link to an external script.
的文档 HTML（...）表示，这种使用模式是蛮好的，而且脚本资源将被加载和执行正如人们所期望。
The documentation for html(...) indicates that this usage pattern is just fine and that the script resources will be loaded and executed as one would expect.
我遇到的问题是，文本/ HTML片段的内容是不缓存，必须与缓存阻止机制被调用。但是，它需要加载的JavaScript资源的是的静态和可缓存，但jQuery的应用加载JS资源时，因为最初的AJAX调用有人用缓存缓存清除：假的
The problem I'm having is that the content of the text/html fragment is not cacheable and must be invoked with the cache-busting mechanism. However, the JavaScript resource that it needs to load is static and cacheable, but jQuery applies cache-busting when loading the JS resource because the initial AJAX call was made with cache : false
看，这里的一系列事件：
Broken down, here's the chain of events:
- 单击处理程序中调用
- 在AJAX功能执行
HTTP GET / API /动态内容/？_ = 1331829184164 - 成功处理程序调用
$ dynamic.empty（）HTML（数据）; -
$ dynamic.empty（）。HTML（...）执行HTTP GET /static/some.js?_=1331829184859
- Click handler invoked
- AJAX function performs
HTTP GET /api/dynamic-content/?_=1331829184164 - Success handler calls
$dynamic.empty().html(data); $dynamic.empty().html(...)performsHTTP GET /static/some.js?_=1331829184859
我在寻找一个更优雅的方式来禁用缓存阻止对后续或内在的HTTP的触发式加载JS资源时，text / html的片段被注入到DOM的要求。
I'm looking for a more elegant way to disable the cache-busting on the subsequent or 'inner' HTTP request that's triggered to load the JS resource when the text/html fragment gets injected into the DOM.
总之，我只是希望它做的 HTTP GET /static/some.js ，不是 HTTP GET /静态的一切是正确的/some.js？_ = 1331829184859 上的最后一个步骤。
In short, everything else is correct, I just want it to do HTTP GET /static/some.js, not HTTP GET /static/some.js?_=1331829184859 on that final step.
推荐答案
如果你的服务器设置为正确识别哪些资源可以或不可以被缓存，那么缓存：假选项应该是不必要的。
If your server is set up to correctly identify which resources can and cannot be cached, then the cache: false option should not be necessary.
另一种方法是使用 POST ，而不是 GET 使用类型： POST在 AJAX 方法选项。
Another alternative is to use a POST rather than a GET using the type: 'POST' option on the ajax method.
这篇关于preventing jQuery的距离在AJAX回调载入清除缓存资源使用`HTML（...）`函数的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
