私の中で「ajax」の利用メソッドが確立したのでまとめます

公開日：2021/02/18

更新日：2019/12/27

カテゴリー: Ajax

趣味でプログラミングをやっており、自作ツールを作る際に「ajax」を多用するのですが、自分の中でajaxの使い方が定まったのでここにまとめたいと思います。

なお、ここでいうajaxはjQueryを利用することを前提にしています。

現時点での私のajaxの使い方

最初に、私の職業はプログラマやSEではなく別業種で趣味でプログラミングやっている程度です。

なのでコードの不備とか改善部分とか多数あるかもしれないので、もしも気づきやアドバイスがあればコメント欄で指摘頂ければと思います。

では、現時点での私のajax使用パターンをまとめたいと思います。

ajaxの基本形

まずは、私が使っているajaxの基本形をコメントアウトを入れて載せておきたいと思います。

$.ajax({
	url	: "http://ysklog.net/receive-data.php",//ajax通信先
	type   : 'POST',//「POST」or「GET」
	data   : {post_data_1:"hoge", post_data_2:"piyo"},//POSTデータ
	timeout: 10000, //タイムアウト設定（ミリ秒）※この場合10秒なので処理時間が長くなる場合は増やす
	error  : function(XMLHttpRequest, textStatus, errorThrown){
		//ajaxが失敗した時の「非同期処理」をここに書く
		console.log("ajax通信に失敗しました");
		console.log("XMLHttpRequest : " + XMLHttpRequest.status);//HTTPリクエストのステータスが取得できる
		console.log("textStatus	 : " + textStatus);//タイムアウト、パースエラー等のエラー情報が取得できる
		console.log("errorThrown	: " + errorThrown.message);//例外情報が取得できる
	},
	success : function(response) {
		//ajaxが成功した時の「非同期処理」をここに書く
		console.log("ajax通信に成功しました");
		console.log(response);
	}
});

関数化

これを私は扱いやすいように次のように関数化（POST送信用）してajax送信しています。

var ajax_data_post = function(url, postData){
	return $.ajax({
		url	: url
		type   : 'POST',
		contentType : false,
		processData : false,
		data   : postData,
		xhrFields   : {withCredentials: true},
		error  : function(XMLHttpRequest, textStatus, errorThrown){
			//ajaxが失敗した時の「非同期処理」をここに書く

		},
		success : function(response) {
			//ajaxが成功した時の「非同期処理」をここに書く

		}
	});
}

※引数「postData」はオブジェクト

これをもとに私のajax利用メソッドをまとめます。

ajaxを一回だけ行う場合

一つの処理の中でajaxを一回だけ行う場合、私は次のコードを使っています。

ajax_data_post(url, postData).done(function(response){
	//ajax送信が成功した後における処理をここに書く（同期）
 
}).fail(function(response){
	//ajax送信が失敗した後における処理をここに書く（同期）
 
});

このコードを使うことで、「非同期で行いたい処理」（ajax_data_post関数内に記述する）と「同期で行いたい処理（ajaxが終わってから行いたい処理）」を明確に分けて書くことができます。

ajaxを同時に複数回（並列処理）行う場合

複数のajax送信を並列で行い、それらが全て完了してから任意の処理をさせたい場合（イメージとしてはこんな感じです）

ajax送信１→｜
ajax送信２→｜　３つとも完了→任意の処理
ajax送信３→｜

これは「when」を使ってこうしています。

//3つのajax通信を並列で行い、その後に任意の処理を行う
$.when(
	ajax_data_post(url1, postData1),
	ajax_data_post(url2, postData2),
	ajax_data_post(url3, postData3)
).done(function(response1, response2, response3){
	//ajax送信が成功した後における処理をここに書く（同期）

}).fail(function(response1, response2, response3){
	//ajax送信が失敗した後における処理をここに書く（同期）
	//一つでも失敗した場合はこっち

});

しかし、このコードには不備があります。

それは、３つ行ったajax送信のうち一つでも失敗（503エラーなど）した場合は「fail」の方に処理が移ります。

「jQuery.Deffered」を使用

この問題を解決するためにはjQuery.Defferedを使えばよいです（参考サイト）。

var ajax_data_post = function(url, postData){
    var $ajax = $.ajax({
        url : url
        type   : 'POST',
        contentType : false,
        processData : false,
        data   : postData,
        xhrFields   : {withCredentials: true},
        error  : function(XMLHttpRequest, textStatus, errorThrown){
            //ajaxが失敗した時の「非同期処理」をここに書く
 
        },
        success : function(response) {
            //ajaxが成功した時の「非同期処理」をここに書く
 
        }
    });
    //$ajaxをDefferでラップする（並列処理用）
    var defer = new $.Deferred();
    $ajax.done(function(data, status, $ajax){
        defer.resolveWith(this, arguments);
    });
    $ajax.fail(function(data, status, $ajax){
        defer.resolveWith(this, arguments);
    });
    return $.extend({}, $ajax, defer.promise());
}

そして次のようにコードを書けば、例え複数回のajaxのうち1つがエラーとなってもその後の動きを思い通りにすることができます。

var deffered_list = [];

for(var k = 0;  k &lt; 3; k++){

	var $ajax = ajax_data_post(url, formData).done(function(response){

	}).fail(function(response) {

	});

	deffered_list.push($ajax);
}

//$.when に渡してまとめて処理
$.when.apply(null, deffered_list).done(function(){
	//実行したajaxが一つでも成功した場合はこちら

});
$.when.apply(null, deffered_list).fail(function(){
	//なんらかの理由で失敗

});

あわせて読んでほしい！

Follow @ysklog_net 　