トイレのうず

サーバーとクライアント（ブラウザ）のデータの受け渡しに、JSON データを使うことにした。データが軽いし、PHP 側でも JSON エンコードするだけだし、ブラウザ側の JavaScript のオブジェクトそのままだから扱いやすい。

でも、jQuery の $.getJSON を使って JSON データを読み込もうとしてちょっとばかりはまったので、メモ的に残しておく。
→StackTrace：$.getJSON(url, [data], [callback])

jQuery の $.getJSON は非常に簡単に扱いやすい関数なんだけれど、JSON データ容量が大きい場合、JSON データの読み込みを完了する前に、その後の処理が走り、思ったような結果が得られないことがある。ほとんどの場合は大丈夫なのだけれど、受け取った JSON データをループを使って配列に代入するときには注意が必要。

うまく配列の値が得られない原因は（当たり前だが）非同期通信をしているから。その後の処理で読み込んだ値を配列に代入して使いたい場合は、配列が null 値 をもって処理されるから困ったことになる。しかも、Firefox の firebug でコンソールしているときは、きちんとした実行結果が得られるのに、firebug の画面を閉じて実行すると、そのあとの処理がきちんとはたらかないから困ったもんです。（Safari, Chrome は思ったような動作をしてくれる動く。もしかして Firefox 特有の問題？）

そこで、登場するのが、$.ajax という関数。$.getJSON とかの関数の大元に当たる関数らしく、エラー処理とかいろいろできるらしいのだ。
→StackTrace：$.ajax(options)

$.getJSON(
	"XXX.php",            // リクエストURL
	null,
	function(data, status) {    // 通信成功時にデータを表示
		for (i in data) {
			//JSON データの処理
		}
	}
);
//その後処理

XXX.php のデータサイズが大きい場合、その後の処理が先に走ってしまう場合は下記のように書き換えられる。

$.ajax({
	url: 'api/gmaker.php',
	dataType: 'json',
	success : function(data){
		for (i in data) {
			//JSON データの処理
		}
	},
	complete : function(){
		//その後の処理
	}
})

というように「complete」のあとに処理を書くと、JSON データを読み込んだあとに処理を行ってくれるようです。忘れてしまいそうだから、メモ的に書いておきました。間違いまたはもっといい方法がありましたら、ご指摘ください。

参考リンク
→Kinopyo’s Blog：jQueryでajax：非同期通信時、実行順番を保障する方法