Ajax処理を実装しよう！（サーバーサイド編）

2017年9月22日

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

少しずつ、涼しい日が増えてきて、そろそろタオルケット一枚で寝るのは危険な季節になってきました。

天気が良ければ、週末にでも冬服を洗濯して、衣替えの準備を始めようかと思います。

今回は、前回の「Ajax処理を実装しよう！（フロントエンド編）」に引き続き「Ajax」を使ったサーバーサイド側の仕組みについて、ご紹介します。

この記事の目次

1 フロントから送られてくるデータの確認
2 PHPで受け取るときのポイント
- 2.1 送信方法によるデータの受け取り
- 2.2 フロントへ値を返す戻り値の型
3 「getName.php」を作成する
4 Ajaxによるセキュリティの考慮
5 まとめ

フロントから送られてくるデータの確認

サーバーサイドのプログラムは、PHPで用意するという仮定で進めていきます。

以前に作成したAjax処理をもう一度確認してみます。

$.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("処理に失敗しました。");
});

$.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」を作ってみます。

<?php
//送られてくるuser_idをPOSTで受け取ります。
$userId = $_POST['user_id'];

//この部分をデーターベースからの取得処理に変えることで柔軟なプログラムになります。
if ($userId == 21) {
	$userList['name'] = "篠田";
} else {
	//ユーザーIDが一致しなければfalseを表示してエラーとします。
	echo false;
}

//連想配列「$userList」をJSONに変換して表示します。
echo json_encode($userList);