ywork2020.com

Title

ajax通信の失敗時に関数を実行する

目次 (INDEX)

ajaxErrorとは

ここで説明する ajaxError とは次の語句からなる jQuery のメソッドです。
ajax
読み: エイジャックス
意味: ウェブページの表示技術の一種。サーバーからのデータの取得とブラウザ上での表示を非同期的に処理させるもの。
error
読み: エラー
意味: 誤り、間違い、失策、失敗

目次に戻る

ajaxErrorメソッドの概要

このメソッドは、ドキュメント内で行われる ajax 通信の失敗時イベントにハンドラーをアタッチします。

つまり、このメソッドの実行により、ページ内で発生した ajax 通信は監視され、その通信の失敗時に関数を実行することができます。

前述しているとおり、ajax 通信の 失敗時 イベントにハンドラーをアタッチするので、 通信が成功した場合には無関係です。 もしも、通信の成功や失敗に関わらず、通信の完了時に関数をアタッチしたいなら ajaxComplete() を使用してください。 また、通信の成功時に関数をアタッチしたいなら ajaxSuccess() を使用してください。

目次に戻る

構文

サンプルを見る前に構文を確認しておきます。

このメソッドはグローバルイベントハンドラーです。 メソッドの呼び出し元は グローバルプロパティ を指定することが一般的 となりますので document や window プロパティを使用してください。 

$(document).ajaxError(handler)

目次に戻る

サンプルコードと実行結果

ここでは、このページのファイルとは別の php-post-response.php という存在するファイルと php-post-response.phpX という存在しないファイルに ajax 通信を使ってデータを送信し、結果をリクエストします。

ajax 通信が失敗すると結果表示欄に "通信に失敗しました。" と表示されます。

サンプルコード: PHP ( php-post-response.php ) 
<?php
	$post = $_POST['sendData'];
	if(strlen($post) > 0){
		echo('POST メソッドで ' . $post . ' という値を受け取りました。');
	}
?>

ここでは、 PHP のコードの説明は割愛させていただきます。
動作内容としては、 この php ファイルに POSTメソッドを使って sendData というキーと 値 をセットで送信すると、その受信した 値 を php の実行により出力するというものです。

サンプルコード: CSS 
<style>
	div{
		margin: 1em 0;
	}
	#idReceive{
		display: block;
		background-color: ##white;
		border: thin solid ##gray;
		padding: 0 1em;
	}
</style>
サンプルコード: HTML 
<head>
	<style>...</style>
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
</head>
<body>
	<div><button id="idPostSuccess"> send POST Success </button></div>
	<div><output id="idReceive"> Waiting for load </output></div>
	<div><button id="idPostError"> send POST Error </button></div>
	<script>...</script>
</body>
  • 06: button id="idPostSuccess" (ボタンです。これをクリックすると、 script の 05~07 行目のコードが実行されます。)
  • 07: output id="idReceive" (出力要素です。この要素に php ファイルの実行結果が出力されます。)
  • 08: button id="idPostError" (ボタンです。これをクリックすると、 script の 08~10 行目のコードが実行されます。)
サンプルコード: script 
<script>
	$(document).ajaxError(function(){
		$("#idReceive").text("通信に失敗しました。");
	});
	$("#idPostSuccess").click(function(){
		$("#idReceive").load("php-post-response.php", {"sendData" : $(this).text()});
	});
	$("#idPostError").click(function(){
		$("#idReceive").load("php-post-response.phpX", {"sendData" : $(this).text()});
	});
</script>
  • 02-04: $(document).ajaxError(function(){ 関数の処理 }) (このページ内で ajax 通信が実行されて失敗すると、関数の処理 の部分が実行されます。 ここでの処理の内容は、idReceive の識別子を持つ要素に "通信に失敗しました。" とテキストで表示します。)
  • 05-07: $("#idPostSuccess").click(function(){ 関数の処理 }) (id 属性に idPostSuccess をもつ要素がクリックされると 関数の処理 の部分が実行されます。)
  • 06: $("#idReceive").load("php-post-response.php", {"sendData" : $(this).text()}) (php-post-response.php ファイルの実行結果を、識別子に idReceive を持つ要素にロードします。 php ファイルにリクエストを掛けるときに、sendData というキーとセットに、ボタンに表示されているテキストを値として送信します。)
  • 08-10: $("#idPostError").click(function(){ 関数の処理 }) (id 属性に idPostError をもつ要素がクリックされると 関数の処理 の部分が実行されます。)
  • 09: $("#idReceive").load("php-post-response.phpX", {"sendData" : $(this).text()}) (php-post-response.phpX ファイルの実行結果を、識別子に idReceive を持つ要素にロードします。 ※ このファイル名は間違っており、存在しないのでエラーとなります。)
実行結果:
送信: 成功例
受信: id="idReceive"
Waiting for load
送信: 失敗例

目次に戻る