/**
 * @fileOverview HTML文書からPOSTデータを取得して、サーバと通信を行う。<br><br>
 *
 * 注意：サーバーに送られるPOSTデータは、文字コードがUTF-8で送られます。
 *       従って送られてきたUTF-8を必要な文字コードに変換してから処理をしてください。
 *       サーバーからの出力に関しては、そのまま受け取ってセットします。
 *       (サーバーからの受信データは何も処理せずに、セットします)
 *
 * @author CyberBrain
 * @version 1.0.0
 *
 *
 */

/**
 * このJSファイルが読込まれると同時に、初期化を行ってXMLHttpRequestを利用可能にする
 */
CreateHttpRequest();

/**
 * ブラウザの関数機能を判定してXMLHttpRequest()関数で利用可能にする。
 *
 * XMLHttpRequestを利用したJAVAスクリプトによるhttp通信でIE6,5の場合は、
 * ActiveXObject("Microsoft.XMLHTTP")になるので、その違いを吸収するための
 * 処理で、XMLHttpRequest に統合する。
 *
 * @return {void}
 */
function CreateHttpRequest()
{
	if (typeof window.XMLHttpRequest == "undefined") {
		if (typeof window.ActiveXObject == "function") {
			try {
				new ActiveXObject("Msxml2.XMLHTTP");
				window.XMLHttpRequest = function()
				{
					return new ActiveXObject("Msxml2.XMLHTTP");
				}
			}
			catch (e) {
				try {
					new ActiveXObject("Microsoft.XMLHTTP");
					window.XMLHttpRequest = function()
					{
						return new ActiveXObject("Microsoft.XMLHTTP");
					}
				}
				catch (e) {
					// 試行を断念する
					alert('NG:XMLHttpRequest');
 				}
			}
		} else {
			//(IE(ver?)以外でXMLHttpRequest()が実装されていないブラウザなので、非同期通信の実装がわかれば定義する。)
			alert('不明:XMLHttpRequest');
		}
	}
	// else { /* XMLHttpRequest()が利用可能である。(Firefox, Opera, IE7 等) */ }
}

/**
 * 現在のPOSTデータを指定されたURLにPOSTして結果を指定されたHTMLタグのIDに
 * セットする。.
 *
 * @param {string} url POSTデータを受け取るサーバープログラムのURL<br>
 *                     上記サンプルの場合は、"details_server.php"がセットされている、
 * @param {string} form_name 送信するPOSTデータがあるFORMタグの name属性の文字列<br>
 *                           上記サンプルの場合は"form1"がセットされている
 * @param {string} view_area_id POSTした結果返されるHTMLをセットするタグのID属性文字列<br>
 *                           上記サンプルの場合は"detail_list"がセットされている
 * @return {void}
 *
 * @example
 * <pre>
 * &lt;div name="main"&gt;
 *  &lt;form method=post action="search.php" name="form1"&gt;
 *     名前：&lt;input type=text name="onamae" size=16 value="" onChange="GetHtmlFromPost('details_server.php', 'form1', 'detail_list')"&gt;
 *     年齢：&lt;input type=text name="onamae" size=4 value="" onChange="GetHtmlFromPost('details_server.php', 'form1', 'detail_list')"&gt;
 *    &lt;div id="detail_list"&gt;
 *    &lt;/div&gt;
 *  &lt;/form&gt;
 * &lt;/div&gt;
 * </pre>
 *
 */
function GetHtmlFromPost(url, form_name, view_area_id)
{
	httpReq = new XMLHttpRequest;

	//onreadystatechange
	//XMLHttpRequestオブジェクトの状態（readyState）が変化する度に呼び出されるイベントハンドラ
	// サーバーからの応答時の処理を定義
	httpReq.onreadystatechange = function() {
		//readyState
		// 0 = uninitialized（読み込み開始前の初期状態）
		// 1 = loading（読み込み中）
		// 2 = loaded（とりあえず読み込んだ）
		// 3 = interactive（読み込んだデータを解析中）
		// 4 = complete（読み込んだデータの解析完了、または失敗した。つまり処理が終わった） 
		if (httpReq.readyState == 4) {
			if (httpReq.status == 200) {
				document.getElementById(view_area_id).innerHTML = httpReq.responseText;
			} else {
				alert("サーバーとの通信に失敗しました。");
			}
		} else {
			// "読込中…";
		}
	}

	httpReq.open("POST", url, true);

	//HTTP要求時に送られるヘッダーを追加する。
	//setRequestHeader("label", "value")
	//label は、追加したいヘッダー名。value は、その値。
	//注意！リクエスト送信時にサンプルのようにヘッダーを追加しておかないとブラウザによってはデータを送信出来ません。
	//     また、charset を EUC-JP にしても、encodeURIComponent()でデータをエンコードするとUTF-8に変換されてしまう。
	//     従って受け取り側で、POSTデータをEUC-JPに変換する必要がある。
	httpReq.setRequestHeader("content-type", "application/x-www-form-urlencoded;charset=UTF-8");

	//POSTデータの取得
	var data = getPostData(form_name);
		//send(content)
	//サーバに HTTP リクエストを送信する。content には送信するデータを設定出来る。
	//送信先の URL、送信方式（GET や POST など）は、open で指定したものになる。
	//データを送信しても、送信先でそのデータを処理するようにしていないと何も変化なし。
	//データを送信しない時でも必要で、その時は send(null) とする
	httpReq.send(data);
}

/**
 * 指定されたFORMタグ内のPOSTデータをフォームURLエンコードして返す。
 *
 * エンコードして返される文字列は、JAVAスクリプトのエンコード関数が、UTF-8に変換してからエンコードする為、
 * 受け取り側のプログラムでは文字コードがUTF-8である事に、注意してください。
 *
 * @param {string} form_name 送信するPOSTデータがあるFORMタグの name属性の文字列。
 * @return {string} フォームURLエンコード(application/x-www-form-urlencoded)した文字列でUTF-8の文字コードに変換されます。
 *
 */
function getPostData(form_name)
{
	var data = '';
	var name = '';
	var val  = '';
	var i = 0;

	//INPUTを全て取得
	var obj = document.forms[form_name].getElementsByTagName('INPUT');
	var num = obj.length;

	for (i=0; i<num; i++) {
		if (obj[i].type == 'image') {
			continue;
		}
		if (obj[i].type == 'checkbox') {
			if (obj[i].checked != true) {
				continue;
			}
		}
		if (obj[i].type == 'radio') {
			if (obj[i].checked != true) {
				continue;
			}
		}
		name = obj[i].name;
		val  = obj[i].value;
		if (data != '') {
			data += '&';
		}
		data += name + "=" + encodeURIComponent(val);
	}

	//SELECTを全て取得
	obj = document.forms[form_name].getElementsByTagName('SELECT');
	num = obj.length;

	for (i=0; i<num; i++) {
		name = obj[i].name;
		val  = obj[i].value;
		if (data != '') {
			data += '&';
		}
		data += name + "=" + encodeURIComponent(val);
	}

	//TEXTAREAを全て取得
	obj = document.forms[form_name].getElementsByTagName('TEXTAREA');
	num = obj.length;

	for (i=0; i<num; i++) {
		name = obj[i].name;
		val  = obj[i].value;
		if (data != '') {
			data += '&';
		}
		data += name + "=" + encodeURIComponent(val);
	}

	return data;
}