ywork2020.com

Title

ajax通信の終了後に関数を実行する

目次 (INDEX)

ajaxStop とは

ここで説明する ajaxStop とは次の語句からなる jQuery のメソッドです。
ajax
読み: エイジャックス
意味: ウェブページの表示技術の一種。サーバーからのデータの取得とブラウザ上での表示を非同期的に処理させるもの。
stop
読み: ストップ
意味: 止める、停止する、中止する

目次に戻る

ajaxStop メソッドの概要

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

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

注意する点としては、 「 ページ内で発生した ajax 通信 」 というワードです。 これはページ全体の通信が終了したという意味であり、複数の ajax 通信を行うドキュメントでは、 その 「 複数通信が全て終了した 」 という意味になります。

目次に戻る

構文

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

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

$(document).ajaxStop(handler)

目次に戻る

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

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

サンプルでは ajax 通信のリクエストを 2回連続で実行します。 つまり、これは複数の通信を同時に行っている状況になるわけですが、 ajaxStop() は複数の同時通信が全て終了した後に 1回だけハンドラーが実行されていることが確認できます。

サンプルコード: 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;
	}
	button{
		cursor: pointer;
	}
	#idReceive1, #idReceive2{
		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="idPost"> send 2 POST Hello World </button></div>
	<div><output id="idReceive1"> Waiting for send </output></div>
	<div><output id="idReceive2"> Waiting for send </output></div>
	<script>...</script>
</body>
  • 06: button id="idPost" (ボタンです。これをクリックすると、 script の 06~08 行目のコードが実行されます。)
  • 07: output id="idReceive1" (出力要素です。この要素に php ファイルが実行された後の返信結果が出力されます。)
  • 08: output id="idReceive2" (出力要素です。この要素に php ファイルが実行された後の返信結果が出力されます。)
サンプルコード: script
<script>
	$(document).ajaxStop(function(eo){
		window.alert("複数の通信が終了しましたので結果を表示します。");
	});
	$("#idPost").click(function(){
		$.ajax({
			type: "POST",
			url: "php-post-response.php",
			data: {"sendData" : "Hello"}
		})
		.done(function(receives){
			$("#idReceive1").html(receives);
		});
		$.ajax({
			type: "POST",
			url: "php-post-response.php",
			data: {"sendData" : "World"}
		})
		.done(function(receives){
			$("#idReceive2").html(receives);
		});
	});
</script>
  • 02-04: $(document).ajaxStop(function(){ 関数の処理 }) (このページ内で ajax 通信が全て終了した時に、関数の処理 の部分が実行されます。 ここでの処理の内容は、アラートダイアログを開いてユーザーに通信が終了したことを知らせます。)
  • 05-22: $("#idPost").click(function(){ 関数の処理 }) (id 属性に idPost をもつ要素がクリックされると 関数の処理 の部分が実行されます。 処理内容については $.ajax() による通信が 2回行われます。 ajax 通信の詳細については $.ajax のページを参照してください。)
実行結果:
送信:
Waiting for send
Waiting for send

目次に戻る