// 例: AJAX的CGI通信
function dbAccess() {
    function respond(str) {		// CGIからの出力応答関数
	if (this.readyState == 4) {	// 4のときデータ受信完了
	    // CGIがJSON文字列を返すのでJSON.parseでJSONオブジェクトに変換
	    var resp = JSON.parse(this.responseText); // 受信文字列取得(JSON)
	    var str = '合計:'+resp['合計'] + ' 平均:'+resp['平均']
	    var all = '全件: ' + resp['全件'].join(', ')
	    document.getElementById('result').textContent = str; //書き込む
	    document.getElementById('all').textContent = all;
	}
    }
    function submit() {		// 「AJAX送信」ボタンを押したときの処理
	var val = document.forms[0].elements['value'];
	var tag = document.getElementById('tag');
	if (val) {
	    var conn = new XMLHttpRequest();
	    conn.open('POST', './db.cgi');	// POSTメソッドでCGIへ送る
	    conn.setRequestHeader(		// 送信ヘッダを定義
		'Content-Type', 'application/x-www-form-urlencoded');
	    // 送信データは 変数1=値1&変数2=値2... で送るが、
	    // 値の部分に&などが入ってもよいよう encodeURIComponent() する
	    conn.send('value='+encodeURIComponent(val.value) + '&' +
		      'tag='+encodeURIComponent(tag.value));
	    conn.onreadystatechange = respond;	// イベントリスナ登録
	}
    }
    document.getElementById('js-sub').addEventListener('click', submit);
}
document.addEventListener('DOMContentLoaded', dbAccess)