# jQuery.getScript()

所属分类：Ajax > 快捷方法 英文文档：jQuery.getScript()

## jQuery.getScript( url [, success(script, textStatus, jqXHR) ] )返回: jqXHR

描述: 使用一个HTTP GET请求从服务器加载并执行一个 JavaScript 文件

- #### 添加的版本: 1.0jQuery.getScript( url [, success(script, textStatus, jqXHR) ] )

  - url
    类型: String
    一个包含发送请求的URL字符串。
  - success(script, textStatus, jqXHR)
    类型: Function()
    当请求成功后执行的回调函数。

这是一个Ajax函数的缩写，这相当于:

1 2 3 4 5 |
    $.ajax({  url: url,  dataType: "script",  success: success});

这个脚本在全局环境中执行，所以指向其他变量和运行jQuery函数。被加载的脚本同样作用于当前页面：

#### Success Callback（成功回调）

一旦脚本已经被加载，将触发回调 但不一定执行。

1 |
    $(".result").html("<p>Lorem ipsum dolor sit amet.</p>");

通过引用这个文件名，脚本被包含进来并执行：

1 2 3 4 5 6 |
    $.getScript("ajax/test.js", function(data, textStatus, jqxhr) {   console.log(data); //data returned   console.log(textStatus); //success   console.log(jqxhr.status); //200   console.log('Load was performed.');});

#### Handling Errors（错误处理）

从jQuery 1.5开始，你可以用`.fail()`来处理错误:

1 2 3 4 5 6 7 |
    $.getScript("ajax/test.js").done(function(script, textStatus) {  console.log( textStatus );}).fail(function(jqxhr, settings, exception) {  $( "div.log" ).text( "Triggered ajaxError handler." );});

jQuery1.5之前，不得不使用全局的`.ajaxError()`回调事件来处理`$.getScript()`错误：

1 2 3 4 5 |
    $( "div.log" ).ajaxError(function(e, jqxhr, settings, exception) {  if (settings.dataType=='script') {    $(this).text( "Triggered ajaxError handler." );  }});

#### Caching Responses（缓存响应）

默认情况下，`$.getScript()` cache选项被设置为 `false`。这将在请求的URL的查询字符串中追加一个时间戳参数，以确保每次浏览器下载的脚本被重新请求。您可以全局的使用 `$.ajaxSetup()`设置cache(缓存)属性覆盖该功能：

1 2 3 |
    $.ajaxSetup({  cache: true});

另外， 你可以使用更灵活的 `$.ajax()` 方法定义一个新的方法

## 例子:

#### Example: 定义了一个 $.cachedScript() 方法可以获取缓存的脚本：

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
    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 颜色动画插件，一旦该插件加载完成就会触发一些颜色动画。

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 |
    <!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">&raquo; 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>

#### Demo: