もうそろそろ春の兆しが見える頃ですが、皆様如何お過ごしでしょうか。開発部森川です。

今回はajax通信とjqueryとphpを使って、ページを再読み込みすることなく（非同期で）サーバー側の情報を取得する方法を解説します。

aishipRでも随所で使用されている技術で、毎回リクエストをする度にページの読込をする必要がなく、ストレスの無い操作が可能になります。

非同期通信で情報をやり取りする方法

<script type="text/javascript">
  function SampleAjax () {
    $.ajax({
      type: "POST", // GETで通信したい場合はGET　・・・1
      url: hoge.php, // アクセスしたいファイル名　・・・2
      data: {
        fuga : "fuga" // hoge.phpに送りたいフロント画面側の情報
        ・・・3
      },
      error: function () {
        // エラーハンドリング　・・・4
      },
      success: function () {
        // hoge.phpにアクセス後、フロント画面側でしたい処理
       ・・・5
      }
    });
  }
</script>

中身を見ていくと、大きく分けて５つのことをしていることがわかります。

1.Ajax通信のタイプを指定する

まず、通信の種類にはGETとPOSTがあります。使用する用途に合った通信の種類を「type」で指定しましょう。

2.アクセスしたいファイル名を指定する

「url」で取得したい情報、もしくは送りたい情報を持っているファイルを指定します。

例えば「hoge.php」でデータベース上に保存している情報を取得してフロント画面上に表示させる、といったことができます。

3.サーバー側に送りたいフロント画面側の情報を指定する

フロント側の情報をサーバー側に送りたい場合は「data」の部分に記載します。
例えばセレクトボックスで選択した値を元にデータベースの情報を取得したい時などに使えます。

また、dataは以下のように配列として渡すことも可能です。

<script type="text/javascript">
  function SampleAjax () {
    var hoge = "hoge";
    var fuga = "fuga";
    var bar = "bar";
    var dataArray = {
      "data1": hoge,
      "data2": fuga,
      "data3": bar
    }; // hoge〜barをdataArrayとしてまとめることができる
    $.ajax({
      type: "POST",
      url: hoge.php,
      data: dataArray, // まとめたものをここに記載
      error: function () {
        // エラーハンドリング
      },
      success: function () {
        // hoge.phpにアクセス後、フロント画面側でしたい処理
      }
    });
  }
</script>

4.エラーハンドリング

何らかの要因でAjax通信に失敗した際に、エラーが発生した旨を閲覧者に知らせます。alertや表示したいエラーメッセージを「error」部分に記載します。

5.フロント画面側でしたい処理を記載

サーバー側で取得した情報をフロント画面に表示させる時、表示、もしくは書き換える箇所の指定を「success」に記載します。

これで閲覧者がページを更新することなく、サーバー側の情報をフロント画面に反映させることができます。

まとめ

以上の方法で、サーバー側で取得した情報をフロント画面に表示させたり、フロント画面のセレクトボックスやチェックボックスで選択した内容を元にデータベース上の情報を取得することができます。

いちいちデータ取得のたびにページを遷移させる手間も省けて、便利になりますね。

以上、開発部森川でした。