カテゴリー: 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の非同期通信をWEBページに取り入れるべく、コーディングしていたら、ie（インターネットエクスプローラー）だけでエラーが出る現象に直面。

FireFoxやSafari、Operaなどでは、スイスイ動くのに、なぜかie7では動かない。前日の夜と本日の半日をかけて、ようやく動いたので覚書しときます。

 req.onreadystatechange = function(){
 処理
}

結論から言うと、onreadystatechangeの処理の中身がifの入れ子になっていたため動かなかった模様。

if節のエラーかとも思って確認したところif節にはエラーは確認できず。そもそも、FireFoxなどでは問題なく動くので原因は不明。

しかし、このif節を単純化し下のようにしたら、なぜかieでも動くように。

req.onreadystatechange = function(){
 　if(req.readyState == 4 && req.status == 200 ){
 　var kekka = req.responseText;
   document.getElementById("result").innerHTML = kekka;
   }
 }

上記だと、ifは一つだけです。単純化できてミスも防げます。

エラーがでていたコードは、if (){if(){}else{}}else{}　のように場合わけしていたのですが、この構文の時には、onreadystatechangeがピクリともせず。
調べると、キャッシュされていると動かないとか。if節の場合分けの過程で、キャッシュされている可能性があるのかも。

JavaScriptでエラー箇所を探すには、下のコードを怪しい部分に一行ずつ、ずらしながら入れていくと発見できます。

alert("アラート");

onreadystatechangeの下に入れると正常に動く場合には、連続して３回このアラートが出るので動いているかいないかの判断がつきます。

参考（調べているとき参考になったページ）

http://detail.chiebukuro.yahoo.co.jp/qa/question_detail/q1022889295