AjaxとPHPを連携させていて、複数のデータをPHPからAjax側に送りたい場合、どのようにデータを送ればスマートなのか考えてみた。
というか、ある本を読んで気づいたのだが、PHP側からJSONのデータ形式でAjaxに送れば良いんじゃないかと。
今までは単なるテキスト形式で1つのテキストを送っていた。複数のデータを送りたいときは、特定の記号をいれて、その前後でsplitして区切って複数化していた。
しかし、JSONを使えば、複数のデータをオブジェクト形式でおくれるのではないか。
ネットで調べてみると、実際、そういう使い方が多くなされているみたい。というかそれが普通なんですね。
となると、Ajax側では、受けたそのデータをどう扱うのか？
調べてみると、ibmの記事に次のようにあった。
http://www.ibm.com/developerworks/jp/web/library/wa-ajaxintro10/
var people =
{ "programmers": [
{ "firstName": "Brett", "lastName":"McLaughlin" },
{ "firstName": "Jason", "lastName":"Hunter" },
{ "firstName": "Elliotte", "lastName":"Harold" }
],
"authors": [
{ "firstName": "Isaac", "lastName": "Asimov" },
{ "firstName": "Tad", "lastName": "Williams" },
{ "firstName": "Frank", "lastName": "Peretti" }
],
"musicians": [
{ "firstName": "Eric", "lastName": "Clapton" },
{ "firstName": "Sergei", "lastName": "Rachmaninoff" }
]
}
何も複雑なことはありません。people に、これまで説明してきた JSON フォーマットのデータが含まれるようになっただけです。だたしデータは明らかに便利なフォーマットにはまだなっていないので、この変更に大きな意味はありません。
データにアクセスする
一目ではわからないかもしれませんが、上記の長々としたストリングは単なる配列なので、この配列をJavaScript 変数に組み込めば簡単にアクセスできるようになります。配列を区切るには、ピリオド区切り文字を使うだけで済みます。以上のことから、programmersリストの最初のエントリーに含まれる姓にアクセスするには、JavaScript で以下のようなコードを使います。
people.programmers[0].lastName;
ここまで引用。
受け取ったデータを変数に入れ（オブジェクト化）、そうしたら、ピリオド区切りで配列のようにアクセスできるようです。
これは便利です。ただ、本当にこれで出来るのかな？
ちなみに、JSONの受け取り方について、レガシーな方法だと、evalを使っていたりする。
the_object = eval( "(" + http_request.responseText + ")" );
また、最近では、JSON.parse()メソッドを使う方法もあるみたいです。
var json = JSON.parse(xhr.responseText);
■ 追記
書いていて気づきましたが、AjaxでPHPから受けるときは、上記ibmの方法だけではダメなようですね。やはり、evalかJSON.parseを使う等するのが定石らしいです。
なお、PHP側では、json_encodeを使うと、便利なようです。
http://www.php.net/manual/ja/function.json-encode.php
//jsonを出力
header('Content-type: application/json');
echo json_encode($val); //$valは（連想）配列
以上です。