リクエストボディの JSONエンコードについて

前回の投稿は

{
	test1: "aaaa",
	test2: "bbbb",
	test3: "cccc"
}

という「キーと値」のセットを3つ用意し、サーバ側へ通信を行いました。

javascriptとブラウザの歴史的理由により、この「キーと値」の形をJSON形式にして送信する方法が多用されています。
前回のサンプルコードをjson形式で送信、受信できるかどうか試してみます。

以下のサンプルを用意しました。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>テストHTML</title>
</head>
<body>

<div>MIMEタイプが「application/json」の場合</div>
<input type="button" id="sampleXMLHttpRequest" value="レスポンスボディ(JSONエンコード)のテスト">

<div>通信時の処理内容</div>
<div id="ajax_result"></div>

<script type="text/javascript">

// ボタン要素のDOMを取得
let element_sampleXMLHttpRequest = document.getElementById('sampleXMLHttpRequest');

// イベントを付与
element_sampleXMLHttpRequest.addEventListener('click',  SendXMLHttpRequest, false);

// ボタン押下時の処理
function SendXMLHttpRequest()
{

	// 今回のサンプル用の送信データを以下のように定義
	// 実際の実装シーンでは、画面上にフォームを設置し、入力された値等を取得する
	let send_data = {
		"test1": "123",
		"test2": "aaa",
		"test3": "テスト"
	}

	// 通信処理を画面に出力する為、DOM操作
	let result = document.getElementById("ajax_result");

	// 検証の為、画面出力とログ出力をする
	result.innerHTML += 'レスポンスボディのテスト start' + '<br />';

	// ajax通信処理の開始
	let req = new XMLHttpRequest();

	// POST形式でサーバ側の「response.php」へデータ通信を行う
	req.open("POST", "./response.php");

	// リクエストヘッダにMIMEタイプを設定する
	// ここではJSON形式とする
	req.setRequestHeader("Content-Type", "application/json");

	// サーバ送信用の値をJSON形式として送信する
	let send_params = JSON.stringify(send_data);

	result.innerHTML += 'サーバ送信用の配列を&区切りにして文字列にし、send_params 変数へ代入する' + '<br />';
	result.innerHTML += 'send_params -> ' + send_params + '<br />';
	result.innerHTML += '通信処理の開始' + '<br />';

	// ここまでで整理した送信用データを、サーバ側へ送信する
	req.send(send_params);

	// 検証の為、画面出力とログ出力をする
	result.innerHTML += '通信処理の終了' + '<br />';
	result.innerHTML += 'レスポンスボディのテスト end' + '<br />';

}

</script>

</body>
</html>

サーバ上のHTMLはこちら(test1.html)

javascriptからjson形式でサーバにデータを渡す際の注意点として
Content-Type を application/json にする場合は、サーバ側の受取り方法が変わる点です。

サーバ側(php側)では、次のように取得しないと、データが受信できません。

<?php

$input_json = json_decode(file_get_contents("php://input"), true);

// 確認の為、ログ出力をする
file_put_contents('./response.log', print_r($input_json, true));

?>

実際に画面にアクセスしてボタンを押下すると、send_data で送ったデータが
下記の形でログ出力されていることがわかります。

Array
(
    [test1] => 123
    [test2] => aaa
    [test3] => テスト
)

リクエストボディ の JSONエンコード について

コメントを残す

リクエストボディの JSONエンコードについて