Ajax通信の処理状況を判定する[ajaxStart][ajaxStop]

jQueryにおいてAjax通信の処理がされていく中で、各種イベントが発生します。今回はサーバとやり取りする中で、それらイベントがどのようなタイミングで発生するのかを実際に表示させてみます。

※HTTPS化に伴い、現在本記事内のデモ画面は利用できない状態です。

デモ画面でのAjax通信の流れは以下のようになっています。

Ajax通信

フォームに名前を入れボタンを押すとAjax通信が始まります。ajax_php1、ajax_php2、ajax_php3の3つの関数が呼び出されサーバ上のPHPに名前をPOSTします。

ajax_php3関数だけAjax通信が正常に完了できないようにしています（デモではPOST先のPHPファイルを作成していない）。test1.php及びtest2.phpではそれぞれ3秒間・6秒間の処理がかかります。この二つのPHPでの処理が正常に完了すればデータが返り、全てのAjax通信の完了となります。

ajaxstart.html（デモ画面）

<!DOCTYPE html>
<html>
<head>
<title>ajaxStart</title>
<meta charset="utf-8">
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>
		
<script type='text/javascript'>

$(document).ready(function(){
	
	$(document)
		.ajaxStart(function (){//Ajax通信スタート
			$("#ajax_result").append("<span style='color:Red;'>Ajax通信スタート</span><br />");
		})
		.ajaxSend(function (){//各Ajax通信のスタート直前
			$("#ajax_result").append("<span style='color:DeepSkyBlue;'>POSTします</span><br />");
		})
		.ajaxSuccess(function (){//各Ajax通信が正常に完了
			$("#ajax_result").append("<span style='color:Green;'>POSTしました</span><br />");
		})
		.ajaxError(function (){//各Ajax通信のエラーを感知
			$("#ajax_result").append("<span style='color:Red;'>エラーが発生しました</span><br />");
		})
		.ajaxComplete(function (){//各Ajax通信の完了（正常・エラーに関わらず）
			$("#ajax_result").append("Ajax通信完了<br />");
		})
		.ajaxStop(function (){//全てのAjax通信終了
			$("#ajax_result").append("<span style='color:Blue;'>全てのAjax通信完了</span>");
		});
	
	$("#submit_bt").click(function(event){
		//フォームが通常の動きをしないように
		event.preventDefault();
		//初期化
		$("#ajax_result").empty();
		
		ajax_php1();
		ajax_php2();
		ajax_php3();//エラーになる
	});
});

function ajax_php1(){
 	var word_val=$("#word_id").val(); 
 	//dataには処理されたデータがくる
	$.post("./test1.php", {word : word_val}, function(data){
		$("#ajax_result").append(data);
	})
}

function ajax_php2(){
 	var word_val=$("#word_id").val(); 
	$.post("./test2.php", {word : word_val}, function(data){
		$("#ajax_result").append(data);
	})
}

function ajax_php3(){
 	var word_val=$("#word_id").val(); 
 	//test3.phpとの通信は失敗させる（そもそもtest3.phpファイルが存在しない）
	$.post("./test3.php", {word : word_val}, function(data){
		$("#ajax_result").append(data);
	})
}

</script>

<head>
<body>

<form method="post">
	<input type="text" value="名前" name="word" id="word_id" />
	<input type="submit" value="渡す" id="submit_bt" />
</form>

<div id="ajax_result"></div>

</body>
</html>

<!DOCTYPE html>

<html>

<head>

<title>ajaxStart</title>

$(document).ready(function(){

$(document)

.ajaxStart(function (){//Ajax通信スタート

$("#ajax_result").append("<span style='color:Red;'>Ajax通信スタート</span><br />");

})

.ajaxSend(function (){//各Ajax通信のスタート直前

$("#ajax_result").append("<span style='color:DeepSkyBlue;'>POSTします</span><br />");

})

.ajaxSuccess(function (){//各Ajax通信が正常に完了

$("#ajax_result").append("<span style='color:Green;'>POSTしました</span><br />");

})

.ajaxError(function (){//各Ajax通信のエラーを感知

$("#ajax_result").append("<span style='color:Red;'>エラーが発生しました</span><br />");

})

.ajaxComplete(function (){//各Ajax通信の完了（正常・エラーに関わらず）

$("#ajax_result").append("Ajax通信完了<br />");

})

.ajaxStop(function (){//全てのAjax通信終了

$("#ajax_result").append("<span style='color:Blue;'>全てのAjax通信完了</span>");

});

$("#submit_bt").click(function(event){

//フォームが通常の動きをしないように

event.preventDefault();

//初期化

$("#ajax_result").empty();

ajax_php1();

ajax_php2();

ajax_php3();//エラーになる

});

function ajax_php1(){

var word_val=$("#word_id").val();

//dataには処理されたデータがくる

$.post("./test1.php", {word : word_val}, function(data){

$("#ajax_result").append(data);

})

}

function ajax_php2(){

var word_val=$("#word_id").val();

$.post("./test2.php", {word : word_val}, function(data){

$("#ajax_result").append(data);

})

}

function ajax_php3(){

var word_val=$("#word_id").val();

//test3.phpとの通信は失敗させる（そもそもtest3.phpファイルが存在しない）

$.post("./test3.php", {word : word_val}, function(data){

$("#ajax_result").append(data);

})

}

</script>

<head>

<body>

</form>

</body>

</html>

12〜30行目

Ajax通信がされていく中で各イベント処理をおこなっています。これらイベントはページ全体（document）に対しておこないます。

test1.php

<?php

sleep(3);

$word = $_POST['word'];

echo "<span style='color:Orange;'>".$word."を入力しました（test1.phpでのファイル処理）</span><br />";

<?php

sleep(3);

$word = $_POST['word'];

echo "<span style='color:Orange;'>".$word."を入力しました（test1.phpでのファイル処理）</span><br />";

test2.php

<?php

sleep(6);

$word = $_POST['word'];

echo "<span style='color:Orange;'>".$word."を入力しました（test2.phpでのファイル処理）</span><br />";

<?php

sleep(6);

$word = $_POST['word'];

echo "<span style='color:Orange;'>".$word."を入力しました（test2.phpでのファイル処理）</span><br />";

サーバのPHPでは、それぞれ意図的に3秒、6秒と処理を送らせています。

参照文献

Pocket

思考の葉

思考の葉

Ajax通信の処理状況を判定する[ajaxStart][ajaxStop]