jQuery API の ajaxError( handler( event, jqXHR, ajaxSettings, thrownError ) ) は、Ajaxリクエスト失敗時に呼び出すグローバルAjaxイベントハンドラを登録するメソッド。
引数
- handler( event, jqXHR, ajaxSettings, thrownError )
Ajaxリクエスト失敗時に実行するコールバック関数。
- event
- jqXHR
XMLHttpRequestオブジェクト。
- ajaxSettings
Ajaxオプション。
- thrownError
例外オブジェクト。
記述方法
jQuery( セレクター ) . ajaxError( function() {
jQuery( this ) . text( 'Ajaxリクエスト失敗' );
} );
jQuery( this ) . text( 'Ajaxリクエスト失敗' );
} );
Ajaxリクエスト失敗時に、セレクターに指定した要素内に、「Ajaxリクエスト失敗」と表示する。
記述例
jQuery( '#sample' ) . ajaxError( function() {
jQuery( this ) . text( 'Ajaxリクエスト失敗' );
} );
jQuery( this ) . text( 'Ajaxリクエスト失敗' );
} );
Ajaxリクエスト失敗時に、idが「sample」の要素内に、「Ajaxリクエスト失敗」と表示する。
実装例（サンプル）
実装例（サンプル）の動作について
「toggle」ボタンをクリックすると、「jquery-sample-error.php」ファイルの実行結果を読み込もうとするが、「jquery-sample-error.php」ファイルが見当たらず、エラーとなり、「toggle」ボタンの右横に「Ajaxリクエスト失敗」と表示する。「toggle」ボタンを、再度クリックすると、元に戻す。
実装例（サンプル）のソースコード
JavaScript
<script>
<!--
jQuery( function() {
jQuery( '#jquery-sample-message' ) . ajaxError( function() {
jQuery( '#jquery-sample-message' ) . text( 'Ajaxリクエスト失敗' );
} );
jQuery( '#jquery-sample-button' ) . toggle(
function() {
jQuery . get(
'jquery-sample-error.php',
function( data ) {
jQuery( '#jquery-sample-get' ) . html( data );
}
,'html'
);
},
function() {
jQuery( '#jquery-sample-get' ) . html( '' );
jQuery( '#jquery-sample-message' ) . text( '' );
}
);
} );
// -->
</script>
<!--
jQuery( function() {
jQuery( '#jquery-sample-message' ) . ajaxError( function() {
jQuery( '#jquery-sample-message' ) . text( 'Ajaxリクエスト失敗' );
} );
jQuery( '#jquery-sample-button' ) . toggle(
function() {
jQuery . get(
'jquery-sample-error.php',
function( data ) {
jQuery( '#jquery-sample-get' ) . html( data );
}
,'html'
);
},
function() {
jQuery( '#jquery-sample-get' ) . html( '' );
jQuery( '#jquery-sample-message' ) . text( '' );
}
);
} );
// -->
</script>
CSS
<style type="text/css">
<!--
#jquery-sample {
margin: 10px;
width: 200px;
}
#jquery-sample-get {
margin: 10px;
padding: 10px;
height: 100px;
background-color: yellow;
border: 1px solid gray;
border-radius: 10px;
}
-->
</style>
<!--
#jquery-sample {
margin: 10px;
width: 200px;
}
#jquery-sample-get {
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-message"></span>
</p>
<div id="jquery-sample-get"></div>
</div>
<p>
<button id="jquery-sample-button">toggle</button>
<span id="jquery-sample-message"></span>
</p>
<div id="jquery-sample-get"></div>
</div>