jQuery ajax - getScript() メソッド

jQuery Ajax 参考マニュアル

例

AJAX リクエストを通じて JavaScript ファイルを取得し実行します：

$("button").click(function(){
  $.getScript("demo_ajax_script.js");
});

実際に試してみてください

定義と使用法

getScript() メソッドは HTTP GET リクエストを通じて JavaScript ファイルを読み込んで実行します。

文法

jQuery.getScript(url,success(response,status});
パラメータ 説明
url リクエストする URL 文字列です。
success(response,status)

オプションです。リクエスト成功後に実行されるコールバック関数を指定します。

追加のパラメータ：

  • response - リクエストから得られる結果データを含みます
  • status - リクエストの状態（"success", "notmodified", "error", "timeout", "parsererror"）を含みます

詳細な説明

この関数は省略形の Ajax 関数で、以下に等価です：

$.ajax({
  url: url,
  dataType: "script",
  success: success
});

ここでのコールバック関数には、返される JavaScript ファイルが渡されます。通常はあまり役に立たないです、なぜならその時点でスクリプトが実行されているからです。

読み込まれたスクリプトはグローバル環境で実行されるため、他の変数を参照し、jQuery 関数を使用することができます。

例えば、以下の内容を含む test.js ファイルを読み込む：

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

このファイル名を参照することで、スクリプトを読み込みおよび実行できます：

$.getScript("ajax/test.js", function() {
  alert("Load was performed.");
});

注釈：jQuery 1.2 版以前では、getScript は同じドメインの JS ファイルのみを呼び出すことができました。1.2 以降では、ドメインを越えた JavaScript ファイルの呼び出しもできます。注意：Safari 2 またはそれ以前のバージョンでは、グローバルスコープ内でシンクロナスにスクリプトを実行することができません。getScript を使用してスクリプトを追加する場合は、遅延関数を追加してください。

さらに多くの例

例 1

test.js を読み込みおよび実行：

$.getScript("test.js");

例 2

test.js を読み込みおよび実行し、成功後メッセージを表示：

$.getScript("test.js", function(){
  alert("Script loaded and executed.");
});

例 3

読み込み jQuery 公式色アニメーションプラグイン 成功後、色の変化アニメーションをバインド：

HTML コード：

<button id="go">Run</button>
<div class="block"></div>

jQuery コード：

jQuery.getScript("http://dev.jquery.com/view/trunk/plugins/color/jquery.color.js",
 function(){
  $("#go").click(function(){
    $(".block").animate({ backgroundColor: 'pink' }, 1000)
      .animate({ backgroundColor: 'blue' }, 1000);
  });
});

jQuery Ajax 参考マニュアル