【JavaScript】JSONのデータを読み込む方法【Ajax】

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は(連想)配列

以上です。

カテゴリー: Ajax, JavaScript パーマリンク

広告

コメントを残す

メールアドレスが公開されることはありません。