$.getScript()

http://api.jquery.com/jQuery.getScript/

Ajax通信によって送られるオプションを送信前に独自に制御したい場合に使用します。

$.getScript( url [, success(script, textStatus, jqXHR)] ) 1.0追加
デモ

$.getScript( url [, success(script, textStatus, jqXHR)] ) 1.0追加

戻り値:jqXHR

引数	説明
url	リクエストの送信先URLを指定します。一般的に、参照したいjavaScriptのライブラリファイル等を指定することになります。
[success (data, textStatus, jqXHR)]	リクエスト成功時の処理をコールバック関数として指定します。関数の引数としてdata, textStatus, jqXHRnの3つの値を受け取る事が出来ます。

$.getScriptは$.ajaxの略記です。$.ajax関数で次のように指定した処理と同じ処理を実行します。

$.ajax({
  //type: オプションは$.ajaxの初期値で"GET"です。
  url: url,
  dataType: "script",
  success: success
});

読み込んだスクリプトは、そのページのグローバル空間で作用するため、他の値を参照したりjQueryを使用することが可能です。

successコールバック関数について

このコールバック関数はjavaScriptファイルに渡されます。そのため、下記のようなスクリプトは一般的に有用ではありません。

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

スクリプトは参照先のjavaScriptファイルに含まれた形で実行されます。

$.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.');
});

エラー処理について

jQueryのバージョンが1.5以上であれば、.fail()を使うのが良いでしょう。

$.getScript("ajax/test.js")
.done(function(script, textStatus) {
  console.log( textStatus );
})
.fail(function(jqxhr, settings, exception) {
  $( "div.log" ).text( "Ajaxエラーが発生しました！" );
});

また、同様にjQueryのバージョンが1.5以上であれば、グローバルコールバック関数の.ajaxError()によって $.getScript()のエラーを処理することも可能です。

$( "div.log" ).ajaxError(function(e, jqxhr, settings, exception) {
  if (settings.dataType=='script') {
    /*
      settings.dataType=='script'を指定することで、
      scriptファイル読み込みエラー時限定で処理を行う。
    */
    $(this).text( "スクリプトファイルの読み込みに失敗しました。" );
  }
});

デモ

jquery.color.jsライブラリファイルを$.getScript()で読み込み、その後Runボタンのクリックイベントに、このライブラリを使用した処理を紐づけています。
(jQuery標準のanimaetでは背景色(background-color)を変えることが出来ないようです。)

<!DOCTYPE html>
<html>
<head>
  <style>
.block {
   background-color: blue;
   width: 150px;
   height: 70px;
   margin: 10px;
}</style>
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
</head>
<body>
<button id="run">&raquo; Run</button>
<div class="block"></div>
<script>
$.getScript("/demo/jquery/jquery.color.js", function() {
  $("#run").click(function(){
    $(".block").animate( { backgroundColor: "pink" }, 1000)
      .delay(500)
      .animate( { backgroundColor: "blue" }, 1000);
  });
});
</script>
</body>
</html>