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

前回の投稿は

[js]
{
test1: "aaaa",
test2: "bbbb",
test3: "cccc"
}
[/js]

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

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

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

[js]
<!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>

// ボタン要素の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>
[/js]

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

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

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

[js]
<?php

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

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

?>
[/js]

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

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

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

コメントを残す

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