小粋空間  -  a cheap joke and a play on words site

jQuery.getScript()のまとめ

jQuery.getScript()について、逆引きリファレンスっぽくまとめてみました。

１．getScript()とは？

getScript()は、JavaScriptファイルを非同期で取得するためのメソッドです。

$.getScript( "http://user-domain/foo.js", function( script, textStatus, jqxhr ) {
    //...
});

クロスドメインに対応しているので、外部サーバのJavaScriptファイルを取得することも可能です。

getScript()は、次のajax()メソッドのショートハンドになります。

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

２．送信先URLを指定するには？

送信先URLは第1パラメータに設定します。

$.getScript( 'http://user-domain/foo.js', ...

３．結果の受信は？

getScript()の第2パラメータのコールバック関数で結果を受信します。

$.getScript( "http://user-domain/foo.js", function( script, textStatus, jqxhr ) {
    console.log( textStatus );
    console.log( jqxhr.status );
});

「script」は返却されたJavaScriptファイル、「textStatus」はテキストステータス、「jqxhr」はjqxhrオブジェクトになります。

あるいは「done」「fail」「always」オプションでも受信できます。

$.getScript( "http://user-domain/foo.js" )
    .done(function( script, textStatus ) {
        console.log( textStatus );
    })
    .fail(function( jqxhr, settings, exception ) {
        console.log( jqxhr.status );
    })
    .always(function( script, settings, exception ) {
        console.log( textStatus );
    });
});

「done」オプションは通信が成功したとき、「fail」オプションは通信に失敗したとき、「always」オプションは通信が完了したときに起動されます。

４．取得したJavaScriptファイルの扱い方は？

script要素で取得した場合と同様、取得成功後はJavaScriptファイルに含まれる関数を起動することができます。

foo.js

function test( message ){
    alert( message );
}

$.getScript( "http://user-domain/foo.js" )
    .done(function( script, textStatus ) {
        test( textStatus );
    })
});

５．キャッシュされたデータを受信したくないのですが？

getScript()はデフォルトでキャッシュオフ（false）が設定されています。

ajaxSetup()で「true」を設定すればキャッシュされなくなるようです。

$.ajaxSetup({
  cache: true
});

６．同期で通信したいのですが？

getScript()は非同期のみです。

同期で通信したい場合はajax()を利用し、さらに「async」オプションを設定します。「false」を設定すれば、jQuery.ajax()の後方の処理が待ち合わせされます。

７．ステータスコードで処理を振り分けたいが？

コールバックの「statusCode」で振り分けることができます。

８．すぐに使えるサンプルは？

サンプルを作ってみました。

$.getScript( "http://user-domain/foo.js" )
    .done(function( script, textStatus ) {
        // ...
    })
    .fail(function( jqxhr, settings, exception ) {
        // ...
    })
    .always(function( script, settings, exception ) {
        // ...
    });
});

それぞれのコールバックを分割することもできます。変数jqxhrのスコープに気をつけてください。

var jqxhr = $.getScript( "http://user-domain/foo.js" );
jqxhr.done(function( script, textStatus  ) {
    // ...
});
jqxhr.fail(function( jqxhr, settings, exception ) {
    // ...
});
jqxhr.fail(function( script, settings, exception ) {
    // ...
});

９．参考サイト

参考サイトは以下です。ありがとうございました。

jQuery.getScript()