JSONデータを送信するにはXMLHttpRequestオブジェクトを使用する。
XMLHttpRequestは非同期処理で通信することが可能なため、ページ全体を更新することなくデータの受送信ができる。詳しい解説はこちらを見ていただくとして、以下にサンプルを記す。
/*-----------------------------
JSONデータを送信する
引数:なし
戻値:なし
--------------------------------*/
function sendJsonData() {
//連想配列
var json_asocc =
[
{
'maker' : 'MAZDA',
'model' : 'DEMIO',
'grade' : 'XD L pakage'
},
{
'maker' : 'Peugeot',
'model' : '206',
'grade' : 'XT'
},
{
'maker' : 'Rover',
'model' : 'MINI',
'grade' : 'Cooper 35th Anniversary'
}
];
//JSONにエンコード
var json_text = JSON.stringify(json_asocc);
//データを送信
xhr = new XMLHttpRequest; //インスタンス作成
xhr.onload = function(){ //レスポンスを受け取った時の処理(非同期)
var res = xhr.responseText;
if (res.length>0) alert(res);
};
xhr.onerror = function(){ //エラーが起きた時の処理(非同期)
alert("error!");
}
xhr.open('post', "api_sendjson.php", true); //(1)
xhr.setRequestHeader('Content-Type', 'application/json');
xhr.send(json_text); //送信実行
}
(1)のopenメソッドの第二引数は仮のものなので注意。第三引数はtrueだと非同期処理で送信され、falseにするとsend()のレスポンスが返るまで待機する。通常はイベントハンドラonloadにレスポンス受信後の処理を書いて非同期で実行するのが良い
サンプルの関数を実行するとJSONデータがPOSTで送信される。サーバ側で受け取ったデータをどう処理するかは、こちらを参考にしていただきたい。