jQuery.getScript()のまとめ

jQuery.getScript()のまとめ

Posted at December 19,2013 1:55 AM
Tag:[getScript, jQuery]

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

1.getScript()とは?

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

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

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

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

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

2.送信先URLを指定するには?

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

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

3.結果の受信は?

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」オプションは通信が完了したときに起動されます。

4.取得したJavaScriptファイルの扱い方は?

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

foo.js

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

5.キャッシュされたデータを受信したくないのですが?

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

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

$.ajaxSetup({
  cache: true
});

6.同期で通信したいのですが?

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

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

7.ステータスコードで処理を振り分けたいが?

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

8.すぐに使えるサンプルは?

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

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

9.参考サイト

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

jQuery.getScript()
関連記事
zenback
人気エントリー
トラックバックURL


コメントする
greeting

*必須

*必須(非表示)


ご質問のコメントの回答については、内容あるいは多忙の場合、1週間以上かかる場合があります。また、すべてのご質問にはお答えできない可能性があります。予めご了承ください。

太字イタリックアンダーラインハイパーリンク引用
[サインインしない場合はここにCAPTCHAを表示します]

コメント投稿後にScript Errorや500エラーが表示された場合は、すぐに再送信せず、ブラウザの「戻る」ボタンで一旦エントリーのページに戻り(プレビュー画面で投稿した場合は、投稿内容をマウスコピーしてからエントリーのページに戻り)、ブラウザをリロードして投稿コメントが反映されていることを確認してください。

コメント欄に(X)HTMLタグやMTタグを記述される場合、「<」は「&lt;」、「>」は「&gt;」と入力してください。例えば「<$MTBlogURL$>」は「&lt;$MTBlogURL$&gt;」となります(全て半角文字)