Caching Responses(缓存响应)
默认情况下,$.getScript() cache选项被设置为 false。这将在请求的URL的查询字符串中追加一个时间戳参数,以确保每次浏览器下载的脚本被重新请求。您可以全局的使用 $.ajaxSetup()设置cache(缓存)属性覆盖该功能:
$.ajaxSetup({
cache: true
});
另外, 你可以使用更灵活的 $.ajax() 方法定义一个新的方法
例子:
Example: 定义了一个 $.cachedScript() 方法可以获取缓存的脚本:
jQuery.cachedScript = function(url, options) {
// allow user to set any option except for dataType, cache, and url
options = $.extend(options || {}, {
dataType: "script",
cache: true,
url: url
});
// Use $.ajax() since it is more flexible than $.getScript
// Return the jqXHR object so we can chain callbacks
return jQuery.ajax(options);
};
// Usage
$.cachedScript("ajax/test.js").done(function(script, textStatus) {
console.log( textStatus );
});
Example: 我们动态加载新的官方jQuery 颜色动画插件,一旦该插件加载完成就会触发一些颜色动画。
<!DOCTYPE html>
<html>
<head>
<style>
.block {
background-color: blue;
width: 150px;
height: 70px;
margin: 10px;
}</style>
<script src="https://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
<button id="go">» Run</button>
<div class="block"></div>
<script>
(function() {
var url = "https://raw.github.com/jquery/jquery-color/master/jquery.color.js";
$.getScript(url, function() {
$("#go").click(function(){
$(".block")
.animate( { backgroundColor: "rgb(255, 180, 180)" }, 1000 )
.delay(500)
.animate( { backgroundColor: "olive" }, 1000 )
.delay(500)
.animate( { backgroundColor: "#00f" }, 1000 );
});
});
})();
</script>
</body>
</html>
|