jQuery API の jQuery . getScript( url [, success( data, textStatus )] ) は、GETメソッドのHTTPリクエストで、JavaScriptファイルを、サーバから読み込み、実行するメソッド。
引数
- url
リクエスト送信先のURLを含む文字列。
- success( data, textStatus )
オプション。
リクエストが成功すると実行するコールバック関数。
- data
リクエストに対する戻り値。
- textStatus
リクエストの現在の状態。
記述方法
jQuery . getScript( url );
GETメソッドのHTTPリクエストで、「url」に指定したURLから、JavaScriptファイルを読み込み、実行する。
jQuery . getScript( url, function( data ) {
jQuery( セレクター ) . append( data );
} );
jQuery( セレクター ) . append( data );
} );
GETメソッドのHTTPリクエストで、「url」に指定したURLから、JavaScriptファイルを読み込み、実行する。読み込んだJavaScriptファイルの内容を、「セレクター」にマッチする要素内に表示。
記述例
jQuery . getScript( 'sample.js' );
GETメソッドのHTTPリクエストで、JavaScriptファイル「sample.js」を読み込み、実行する。
jQuery . getScript( 'sample.js', function( data ) {
jQuery( '#sample' ) . append( data );
} );
jQuery( '#sample' ) . append( data );
} );
GETメソッドのHTTPリクエストで、JavaScriptファイル「sample.js」を読み込み、実行する。「sample.js」の内容を、idが「sample」の要素に表示。
実装例（サンプル）
実装例（サンプル）の動作について
「toggle」ボタンをクリックすると、「jquery-sample-getScript.js」のJavaScriptファイルを読み込み、実行、黄色のボックス要素の背景色を、黄色からピンク色に変更する。「jquery-sample-getScript.js」ファイルの内容をピンク色のボックス要素内に表示する。
読み込みが成功すると、「toggle」ボタンの右横に「読み込み成功」と表示する。
「toggle」ボタンを、再度クリックすると、元に戻す。
実装例（サンプル）のソースコード
JavaScript
<script>
<!--
jQuery( function() {
jQuery( '#jquery-sample-button' ) . toggle(
function() {
jQuery . getScript(
'jquery-sample-getScript.js',
function( data, textStatus ) {
if( textStatus == 'success' ) {
jQuery( '#jquery-sample-textStatus' ) . text( '読み込み成功' );
}
jQuery( '#jquery-sample-getScript' ) . append( data );
}
);
if( jQuery( '#jquery-sample-textStatus' ) . text() == '' ) {
jQuery( '#jquery-sample-textStatus' ) . text( '読み込み失敗' );
}
},
function() {
jQuery( '#jquery-sample-getScript' ) . css( 'backgroundColor', 'yellow' );
jQuery( '#jquery-sample-getScript' ) . html( '' );
jQuery( '#jquery-sample-textStatus' ) . text( '' );
}
);
} );
// -->
</script>
<!--
jQuery( function() {
jQuery( '#jquery-sample-button' ) . toggle(
function() {
jQuery . getScript(
'jquery-sample-getScript.js',
function( data, textStatus ) {
if( textStatus == 'success' ) {
jQuery( '#jquery-sample-textStatus' ) . text( '読み込み成功' );
}
jQuery( '#jquery-sample-getScript' ) . append( data );
}
);
if( jQuery( '#jquery-sample-textStatus' ) . text() == '' ) {
jQuery( '#jquery-sample-textStatus' ) . text( '読み込み失敗' );
}
},
function() {
jQuery( '#jquery-sample-getScript' ) . css( 'backgroundColor', 'yellow' );
jQuery( '#jquery-sample-getScript' ) . html( '' );
jQuery( '#jquery-sample-textStatus' ) . text( '' );
}
);
} );
// -->
</script>
CSS
<style type="text/css">
<!--
#jquery-sample {
margin: 10px;
}
#jquery-sample-getScript {
margin: 10px;
padding: 10px;
height: 100px;
background-color: yellow;
border: 1px solid gray;
border-radius: 10px;
}
-->
</style>
<!--
#jquery-sample {
margin: 10px;
}
#jquery-sample-getScript {
margin: 10px;
padding: 10px;
height: 100px;
background-color: yellow;
border: 1px solid gray;
border-radius: 10px;
}
-->
</style>
HTML
<div id="jquery-sample">
<p>
<button id="jquery-sample-button">toggle</button>
<span id="jquery-sample-textStatus"></span>
</p>
<div id="jquery-sample-getScript"></div>
</div>
<p>
<button id="jquery-sample-button">toggle</button>
<span id="jquery-sample-textStatus"></span>
</p>
<div id="jquery-sample-getScript"></div>
</div>
読み込むJavaScriptファイル
jQuery( '#jquery-sample-getScript' ) . css( 'backgroundColor', 'pink' );