Ajax処理を実装しよう！（フロントエンド編）

こんにちは、Webプログラマの篠田です。

大阪ではまだ残暑が残り、日中は暑い日が続いていますが、朝と夕方はだいぶ涼しくなり、秋の気配が日に日に増しているのを感じるようになりました。

今回は、フロントエンド側の開発では利用を避けることができなくなった、Ajax（エイジャックス）処理をご紹介していきます。

Ajaxとは

Webのデータ通信は、ブラウザ上に表示された「ボタン」をクリックして、「画面移動（URLが変わる状態）」をすることで、次の処理にデータを渡すというのが一般的でした。

ですが、「画面移動」特有のチラツキや読み込みの遅さなど、ユーザーの体験を損なう要素が多くありました。
※この処理を「同期処理」といいます。

そこで、「画面移動」を少なくして、１つの画面で「登録」や「検索」などの処理（サーバー間の通信）を行えるようにして、スムーズに操作できるようにした処理方法が出てきました。
※この処理を「非同期処理」といいます。

その「非同期処理」を実現するために利用するのが「JavaScript」と「XML」でした。

jQueryを使ったAjax処理

具体的にどのようにして、「非同期処理」を実現するのかをご紹介します。

最も分かりやすい手順として「jQuery」を利用した「Ajax処理」を見ていきます。

※事前に「jQuery」の読み込みを行っています。

この処理は、「名前をAjaxを使って取得する」簡易なプログラムです。

各要素の使い方を見ていきます。

同期？それとも非同期？

「async（エイシンク）」オプションで、「非同期（データが戻ってくるのを待たない）」でデータ通信を行うか、「同期（データが戻ってくるまで待つ）」かを指定します。

初期値は「非同期」のため「async: true」です。

「同期処理」をする場合は「async: false」とします。

いったい、どういった通信処理をしているのかを、把握しておくことが重要です。

POSTで送るかGETで送るかそれが問題

Webでのデータ通信は「POST」か「GET」の２種類があります。

「Ajax」でも同じように、どういった通信方法で、データを送るのかというのを決めます。

「type」オプションを使い「http://localhost/getName.php」というプログラムに、どのような方法でデータを送信するのかを指定します。

「POST」か「GET」かでデータの受け取り側である「getName.php」の内容が変わってきますので、注意が必要になります。

戻り値は「json」でよろしく

「dataType」オプションでは、サーバー側で処理された結果を、JavaScript側ではどういった形式で受け取るのかという指定をします。

よく使われるのは「json」形式での受け取りです。

その他に「text」形式での受取や「html」、「xml」などがあります。

指定がなければ、自動で推測してくれますが、期待通りの処理が行われない場合もあるので、明示しておくのが混乱がなくてよいです。

送信データを設定する

データの送り先と、データの送る形式が決まれば、次に決めるのは「データの内容」です。

データは、配列型で送ります。

形式は「ヘッダー名 : 値」となり、「ヘッダー名」は受け取り側プログラムの添字にもなります。

例）date : {‘user_id’: 21} → $_POST[‘user_id’]

上記のようにPHPの「$_POST」の添字として取得することができます。

戻り値を受け取ろう

サーバー側で処理された結果で「成功」していれば、「.done(function (data)」の中が実行されます。

「done(function()」の第１引数「data（任意の変数名）」は「サーバーからの戻り値」です。

この中に「json」形式のユーザー名が保存されています。

「dataType」で指定した形式で、戻ってきた値を必要に応じた形で処理をします。

Ajaxでの結果を元にした処理は、すべて「done」内で行います。

失敗したときの処理も忘れずに

サーバー側でエラーが発生した時は「done」が処理されず「fail」が呼び出されます。

「fail」がなければ、エラー発生時のフロントエンド側の処理がなくなってしまいます。

「console.log」などで、エラーが発生していることを把握できるような処理を追加すると、対応がしやしくなります。

まとめ

駆け足で、フロントエンド側のAjaxについて、ご紹介しました。

次回は、サーバー側で動作する「getName.php」部分をご紹介してAjax処理の全体を作っていきたいと思います。