初めてのajax

はじめに

Webアプリケーションの元ができたので、ajaxを動かして見ようと思いました。
javascriptがjsonを取り込んで、非同期処理でDBアクセスしたりする仕組みと言う言葉では理解していたものの、実装したことがなかったので実装してみました。

お手本探し

下記のページを参考に作り始めました。

テックノート – はじめてAjaxを実装する人へ、効率的な学習方法について書きました
http://javatechnology.net/ajax/biginer-start-up/

以下引用

function() {
    $.ajax({
      url: 'http://localhost:8080/AplExample/family',
      type:'GET',
      dataType: 'jsonp',
      timeout:1000,
      success: function(data) {
                   alert("ok");
               },
      error: function(data) {
                   alert("ng");
             }
    });
});

なるほど。URLで読み込んだ情報を出力するのか。これをいじっていこう。

PHPでjsonを出力

以前作ったPHPの実行環境でJSONを出力。

<?php
$json = array(
    'aaa' => '1',
    'bbb' => '2',
    'ccc' => '3',
    'ddd' => '4',
);

echo json_encode($json);

これで出るかな？

dataTypeは読み込むデータ形式によって変えるものらしい。JSONなのでJSONに。

<script src="https://code.jquery.com/jquery-3.0.0.min.js"></script>
<script>
<!--
(function() {
    $.ajax({
      url: 'http://192.168.xx.xx/json', // jsonのURL
      type:'GET',
      dataType: 'json',
      timeout:1000,
      success: function(data) {
                   alert(data);
               },
      error: function(data) {
                   alert("ng");
             }
    });
})();
// -->
</script>

結果
[object Object]

object Objectってなんだよ。

動いた！

調べたら、HashMap形式、PHPのarrayと同じ方法で参照できるらしい。

<script src="https://code.jquery.com/jquery-3.0.0.min.js"></script>
<script>
<!--
(function() {
    $.ajax({
      url: 'http://192.168.xx.xx/json', // jsonのURL
      type:'GET',
      dataType: 'json',
      timeout:1000,
      success: function(data) {
                   alert(" aaa =" + data["aaa"] + "\n" +
                         " bbb =" + data["bbb"] + "\n" +
                         " ccc =" + data["ccc"] + "\n" +
                         " ddd =" + data["ddd"] );

               },
      error: function(data) {
                   alert("ng");
             }
    });
})();
// -->
</script>

結果

aaa = 1
bbb = 2
ccc = 3
ddd = 4

期待どおり。あとはjsonをPHPのロジックで変更できるようにしたら思い通りに動かせそう。