こんにちは、Webプログラマの篠田です。
少しずつ、涼しい日が増えてきて、そろそろタオルケット一枚で寝るのは危険な季節になってきました。
天気が良ければ、週末にでも冬服を洗濯して、衣替えの準備を始めようかと思います。
今回は、前回の「Ajax処理を実装しよう！（フロントエンド編）」に引き続き「Ajax」を使ったサーバーサイド側の仕組みについて、ご紹介します。
この記事の目次
フロントから送られてくるデータの確認
サーバーサイドのプログラムは、PHPで用意するという仮定で進めていきます。
以前に作成したAjax処理をもう一度確認してみます。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
$.ajax({ async: true,// 非同期処理 url: 'http://localhost/getName.php', type: "POST", dataType: 'json', data: { 'user_id': 21 } }).done(function (data) { console.log(data.name + "を取得しました。"); }).fail(function () { console.log("処理に失敗しました。"); }); |
送り先のプログラムは「http://localhost/getName.php」です。
送信方法は「POST」、戻り値は「JSON」です。
そして、送るデータは「添字：user_id」に「21」が代入されている状態です。
PHPで受け取るときのポイント
受け取り側のプログラムは「getName.php」として作成します。
※セキュリティやバリデーションは一切考慮しませんので、あしからず。
Ajaxのサーバーサイドプログラムを作るときのポイントは２つです。
送信方法によるデータの受け取り
Ajaxに限ったことではないですが、どういった方法でデータが送られてくるかというのは重要です。
今回であれば「POST」で送られてくるので、受け取り側は「POST」形式でデータを待ち構える必要があります。
また、どういった名前（添字）が付けられているかというのも確認します。
受け取り側では「$_POST[‘user_id’]」として、「21」という値を受け取ることができます。
フロントへ値を返す戻り値の型
次に重要になるのが、サーバーサイドで処理をした内容をどのようにして、フロント（ブラウザ）に返せば良いのかという点です。
Ajax処理によっては、フロントから投げっぱなしで、サーバーサイドでの処理結果を返さない場合もあります。
今回の場合は、戻り値が必要となり「JSON」で戻して欲しいという指示があります。
PHPで「JSON」を取り扱う時に利用するのが「json_encode」関数です。
また、フロント側で「data.name」として、利用していますので、連想配列で作成した「JSON」データを戻り値として用意すると良いことがわかります。
「getName.php」を作成する
先程の２点のポイントを踏まえて、「getName.php」を作ってみます。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
<?php //送られてくるuser_idをPOSTで受け取ります。 $userId = $_POST['user_id']; //この部分をデーターベースからの取得処理に変えることで柔軟なプログラムになります。 if ($userId == 21) { $userList['name'] = "篠田"; } else { //ユーザーIDが一致しなければfalseを表示してエラーとします。 echo false; } //連想配列「$userList」をJSONに変換して表示します。 echo json_encode($userList); |
フロントへの戻し方は、フレームワークなどによって変わりますが、「echo」または「return」で、返すことができます。
正常に動けば、ブラウザのコンソール画面に「篠田を取得しました。」と表示されます。
Ajaxによるセキュリティの考慮
Ajaxを利用する場合に、セキュリティ面での考慮が必要となります。
（１）直接、呼び出しプログラムが実行されても起動しない。
（２）CSRF（クロス・サイト・リクエスト・フォージェリ）対策をする。
（３）バリデーションチェックによる、データの整合性確認をする。
SQLをサーバーサイドで利用する場合は、当然「SQLインジェクション」の対策も必要となります。
普段のプログラムを作成するときと同様かそれ以上にセキュリティ対策は慎重に行うことが重要です。
まとめ
２回に分けて、Ajaxの簡単な実装方法をご紹介してきました。
Ajax処理を使うことで、ユーザーにとってよりリッチ（死語ですかねｗ）で、ストレスが少ないWebサービスを実現することができるようになります。
是非、Ajaxをプログラム開発に活用してみてください。
