防止jQuery缓存使用html（…）函数的AJAX回调过程中加载的资源破坏

小编典典

防止jQuery缓存使用html（…）函数的AJAX回调过程中加载的资源破坏

ajax

使用jQuery 1.7.1，我通过AJAX加载了一些HTML片段，这些片段是通过html()方法注入到DOM中的。

HTML内容本身不能被缓存，但是它可能会加载一些可以缓存的JavaScript资源。

我发现的是，当我在$.ajax调用中禁用缓存时，当HTML注入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以将text /
html片段加载到#dynamicdiv元素中。这是一个这样的片段可能看起来像的示例：

<p>Some dynamic content here...</p>
<script type="text/javascript" src="/static/some.js"></script>

因此，successAJAX调用的处理程序加载了text / html代码段，并通过jQuery
html(...)函数将其注入到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

我正在寻找一种更优雅的方法来禁用对text / html片段注入DOM后触发的后续或“内部” HTTP请求的缓存清除功能，该请求被触发以加载JS资源。

简而言之，其他所有事情都是正确的，我只是想让它做HTTP GET /static/some.js，而不是HTTP GET /static/some.js?_=1331829184859最后一步。

阅读 230

2020-07-26

共1个答案

小编典典

如果将服务器设置为正确标识可以和不可以缓存哪些资源，则该cache: false选项将不是必需的。

另一种选择是在方法上使用a POST而不是GETusing type: 'POST'选项ajax。

2020-07-26