Используя jQuery 1.7.1, я загружаю некоторые фрагменты HTML через AJAX, которые вводятся в DOM с помощью метода html().
Само содержимое HTML не может быть кэшировано, но может загружать некоторые ресурсы JavaScript, которые могут быть кэшированы.
Я обнаружил, что когда я отключаю кэширование в вызове $.ajax, этодобавляет параметр очистки кэша ко всем HTTP-запросам, сделанным из jQuery, когда HTML вводится в DOM.Это предотвращает кеширование браузером других статических ресурсов 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 в элемент #dynamic div.Вот пример того, как может выглядеть такой фрагмент:
<p>Some dynamic content here...</p>
<script type="text/javascript" src="/static/some.js"></script>
Таким образом, обработчик success вызова AJAX загружает фрагмент text / html и внедряет его в DOM через функцию jQuery html(...),Как видите, фрагмент text / html также может иметь ссылку на внешний скрипт.
Документация для html(...) указывает на то, что этот шаблон использования вполне подходит и что ресурсы сценария будут загружены и выполнены так, как и следовало ожидать.
Проблема, с которой я столкнулся, заключается в том, что содержимое фрагмента text / html не кэшируется и должно вызываться с помощью механизма очистки кэша.Однако ресурс JavaScript, который требуется для загрузки , является статичным и кешируемым, но jQuery применяет очистку кеша при загрузке ресурса JS, поскольку первоначальный вызов AJAX был выполнен с cache : false
Brokenвниз, вот цепочка событий:
- Вызван обработчик клика
- Функция AJAX выполняет
HTTP GET /api/dynamic-content/?_=1331829184164 - Успешные вызовы обработчика
$dynamic.empty().html(data); $dynamic.empty().html(...) выполняет HTTP GET /static/some.js?_=1331829184859
Я ищу более элегантный способ отключения очистки кэша при последующем или «внутреннем» HTTP-запросе, который запускается для загрузки ресурса JS при получении текстаФрагмент / html вводится в DOM.
Короче говоря, все остальное правильно, я просто хочу, чтобы на этом последнем шаге было HTTP GET /static/some.js, а не HTTP GET /static/some.js?_=1331829184859.