gpt4 book ai didi

jquery - 防止 jQuery 缓存破坏在使用 `html(...)` 函数的 AJAX 回调期间加载的资源

转载 作者:行者123 更新时间:2023-12-01 05:01:25 25 4
gpt4 key购买 nike

使用 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/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com