【ajax】非同期通信をフル活用して処理時間を短縮できた話

公開日：2015/07/21

更新日：2015/03/10

カテゴリー: Ajax

ajaxを使うとページの遷移をすることなく別ページ（例えばPHPの処理ページ）に閲覧者が気づかない裏側でHTTPリクエストを行い、その結果を取得してページにコンテンツを表示させることができます。

また非同期通信なので他のajax送信の結果を待たずに別のajax送信で同じページに処理を投げることも可能です。

この便利な機能を今回フル活用できたので、方法（というか考え方）をメモしておこうと思います。

これまでの方法

これまでajax送信でPHP処理ページ「hoge.php」に3つのデータを渡し、その3つのデータを一つずつ処理していました（3回ループ処理していた）。イメージは以下。

ajax送信で「hoge.php」に3つのデータを送信
↓
データを受け取った「hoge.php」は処理を開始（ここを3回繰り返す）
↓
処理結果を呼び出し元に返す
↓
ページに結果を出力

至って普通の処理ですが、今回のプログラムは上の赤文字部分の処理時間が長く、それを3回繰り返すのでけっこうな待ち時間が発生していました。

「どうにかしたいなー」と思っていたのですが、ふと「こういうときにajaxの非同期通信をフル活用すべきだ！」と考え、次のようにしました。

3回のajax送信を同時に行う

これまでajaxは非同期通信であることは知っていたのですが、特にその恩恵を受けることを考えることなく使っていました。

しかし「1回のajax送信で3つのデータを送信するのではなく、3回のajax送信を同時に行ったらいいじゃん。非同期通信だし」と思いつき、次のような方法にしました。

「ajax送信A」「ajax送信B」「ajax送信C」でそれぞれ「hoge.php」にデータを送信
↓
データを受け取った「hoge.php」は処理開始（1回で済む）
↓
処理結果をそれぞれの呼び出し元に返す
↓
ページに結果を出力

これだとわかりづらかったので、ajax送信の部分を記載。

これまでのajax送信部分

jQuery(function($){
	//ajax送信
	$.ajax({
		url : "http://ysklog.net/hoge.php",
		type : "POST",
 		data : {data_1:"AAA", data_2:"BBB", data_3:"CCC"},
		error : function(XMLHttpRequest, textStatus, errorThrown) {
			console.log("ajax通信に失敗しました");
		},
		success : function(response) {
			console.log("ajax通信に成功しました");
		}
	});
});

6行目にあるように、1回のajax送信で3つのデータを送信していました。

変更したajax送信部分

これを下にあるように、3つのajax送信で1つずつデータを送信する方法に変更しました。

jQuery(function($){
	//ajax送信A
	$.ajax({
		url : "http://ysklog.net/hoge.php",
		type : "POST",
 		data : {data_1:"AAA"},
		error : function(XMLHttpRequest, textStatus, errorThrown) {
			console.log("ajax通信に失敗しましたA");
		},
		success : function(response) {
			console.log("ajax通信に成功しましたA");
		}
	});
	//ajax送信B
	$.ajax({
		url : "http://ysklog.net/hoge.php",
		type : "POST",
 		data : {data_2:"BBB"},
		error : function(XMLHttpRequest, textStatus, errorThrown) {
			console.log("ajax通信に失敗しましたB");
		},
		success : function(response) {
			console.log("ajax通信に成功しましたB");
		}
	});
	//ajax送信C
	$.ajax({
		url : "http://ysklog.net/hoge.php",
		type : "POST",
 		data : {data_3:"CCC"},
		error : function(XMLHttpRequest, textStatus, errorThrown) {
			console.log("ajax通信に失敗しましたC");
		},
		success : function(response) {
			console.log("ajax通信に成功しましたC");
		}
	});
});