リクエストボディ の XMLエンコード について
前回の投稿は下記のJSON形式のデータ
{
test1: "aaaa",
test2: "bbbb",
test3: "cccc"
}
という「キーと値」のセットをサーバ側へ送信し、通信の確認しました。
今回はJSON形式を、XML形式にしてサーバへ送信する方法を試してみます。
具体的には、上記の値を次の形のXMLデータに置き換えて送信します。
<data_p> <data_c id="test1" sample="s1"> sample_value1 </data_c> <data_c id="test2" sample="s2"> sample_value2 </data_c> <data_c id="test3" sample="s3"> sample_value3 </data_c> </data_p>
javascript内で上記のXML形式のデータ(この場合、要素が3つのデータ)を、サーバ側に送信するには
xml形式の文字列データを、文字列からDOMのDocumentに変換しています。(下記の箇所です)
// DOMのDocumentに変換する let ObjParser = new DOMParser(); let xml_datas = ObjParser.parseFromString(send_xml_strings, "text/xml");
Content-Typeはこの例では省略しています。
ブラウザ側で適切な設定がされる為、必須ではありません。
また、明示的に下記のMIMEタイプを設定して試してみましたが、いずれも動作結果は同じした。
req.setRequestHeader("Content-Type", "application/json");
req.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
req.setRequestHeader("Content-Type", "application/xml");
処理の最後では、sendメソッドでデータ送信をしています。
全体の処理がわかるように、以下のサンプルを用意しました。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>テストHTML</title>
</head>
<body>
<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()
{
// ----------------------------
// 通信処理用のxmlデータを生成
// ----------------------------
// 今回のサンプル用のXML形式のデータを以下のように定義
let send_xml_strings = '<data_p>';
send_xml_strings += '<data_c id="test1" sample="s1">sample_value1</data_c>';
send_xml_strings += '<data_c id="test2" sample="s2">sample_value2</data_c>';
send_xml_strings += '<data_c id="test3" sample="s3">sample_value3</data_c>';
send_xml_strings += '</data_p>';
// DOMのDocumentに変換する
let ObjParser = new DOMParser();
let xml_datas = ObjParser.parseFromString(send_xml_strings, "text/xml");
// 通信処理を画面に出力する為、操作用DOMの取得
let result = document.getElementById("ajax_result");
// 検証の為、画面出力とログ出力をする
result.innerHTML += 'レスポンスボディのテスト start' + '<br />';
// ----------------------------
// ajax通信処理の開始
// ----------------------------
let req = new XMLHttpRequest();
// POST形式でサーバ側の「response.php」へデータ通信を行う
req.open("POST", "./response.php");
result.innerHTML += 'xml_datas -> ' + xml_datas + '<br />';
result.innerHTML += '通信処理の開始' + '<br />';
// ここまでで整理した送信用データを、サーバ側へ送信する
req.send(xml_datas);
// 検証の為、画面出力とログ出力をする
result.innerHTML += '通信処理の終了' + '<br />';
result.innerHTML += 'レスポンスボディのテスト end' + '<br />';
}
</script>
</body>
</html>
サーバ側(php側)では、以下のプログラムを用意し、結果をログ出力して確かめています。
<?php
// xml形式のまま取得
$xml = file_get_contents("php://input");
// オブジェクトに変換する場合
$obj = simplexml_load_string($xml);
// オブジェクトをjsonエンコードする
$array_encord = json_encode($obj);
// 連想配列に変換する場合
$arrays = json_decode($array_encord, true);
file_put_contents('./log_xml.log', print_r($xml, true));
file_put_contents('./log_obj.log', print_r($obj, true));
file_put_contents('./log_array_encord.log', print_r($array_encord, true));
file_put_contents('./log_arrays.log', print_r($arrays, true));
?>
実際に画面にアクセスしてボタンを押下すると、send_data で送ったデータが
下記の形でログ出力されていることがわかります。
ボタンを押下し、通信処理が終わった後の、ブラウザ上の動作確認用の表示は次のようになります。
出力された内容を確認すると
「xml_datas -> [object XMLDocument]」
という形でXMLDocumentのオブジェクトとして送信を行っていることがわかります。
また、サーバ側のログ出力する内容は4通りの出力を試してみましたので、
以下、全て記載します。
log_xml.log (実際には改行されず、1行で出力)
<data_p> <data_c id="test1" sample="s1">sample_value1</data_c> <data_c id="test2" sample="s2">sample_value2</data_c> <data_c id="test3" sample="s3">sample_value3</data_c> </data_p>
log_obj.log
SimpleXMLElement Object
(
[data_c] => Array
(
[0] => sample_value1
[1] => sample_value2
[2] => sample_value3
)
)
log_array_encord.log
{"data_c":["sample_value1","sample_value2","sample_value3"]}
log_arrays.log
Array
(
[data_c] => Array
(
[0] => sample_value1
[1] => sample_value2
[2] => sample_value3
)
)