リクエストボディ の 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 ) )