////////////////////////////////////////////////////////////////////////////
// プログラムの説明
//
//
//　Ajaxとは「Asynchronous JavaScript + XML」の略。
//
//　JavaScriptとXMLを使って非同期にサーバとの間の通信を行うことが出来る。 
//
//　JavaScriptを使ったHTMLページを作成すると動的に作成できるホームページを
//　作成できるが、Ajaxではさらにサーバとの通信を行って随時サーバからデータを
//　読み取ってホームページを書き換えていくということが可能になる。
//
//●サーバとの通信を行う為に用意されているものが「XMLHttpRequest」プロジェクトで
//　このオブジェクトを介してクライアント側とサーバ側は通信を行う。 
//●非同期通信の場合は「send」メソッドを実行するとすぐに次の行へ処理が移る。
//●非同期通信の場合はサーバへリクエストを送信する部分とデータを受信後にデータを
//　表示する部分を分けて考える必要がある。
//
//★XMLHttpRequest()
//
//　XMLHttpRequest を使用出来るようにする為の宣言。ブラウザにより異なる。
//　IE では、ActiveXObject("Microsoft.XMLHTTP") を使用。
//　IE のバージョンによっては、ActiveXObject("Msxml2.XMLHTTP.5.0") ,
//　ActiveXObject("Msxml2.XMLHTTP.4.0") ,
//　ActiveXObject("Msxml2.XMLHTTP.3.0") , ActiveXObject("Msxml2.XMLHTTP") なども
//　使用出来る。
//　Mozilla 系ブラウザでは、XMLHttpRequest() を使用。 
//
//★"XMLHttpRequest"のオブジェクト、メソッド、プロパティについて
//
//　[1] XMLHttpRequest オブジェクト生成
//　　　　　↓
//　[2] open メソッド
//　　　(POSTやGET、リクエストするURL、同期か非同期かなどを指定)
//　　　　　↓
//　[3] send メソッド
//　　　(データ送信)
//　　　　　↓
//　　【サーバー側】
//　　　　　↓
//　[4] onreadystatechange イベント(ie以外ではコールバックなonloadも使えます)
//　　　(送受信状態が変った時に起動するイベント)
//　　　　　↓
//　[5] readyState プロパティ
//　　　(送受信状態をあらわす値、4で受信完了。onloadなら不要。)
//　　　　　↓
//　[6] responseTextまたは、responseXML プロパティ
//　　　(受信データ)

////////////////////////////////////////////////////////////////////////////
//
//★変数(node_T0等)はHTML文書内(net_waer_top.html)で<div>又は<SPAN>で定義したid
//　例：<SPAN id="d_node_T0"></SPAN>の要素をfunction checkStatus()で対応づける
//　    var node_T0 = document.getElementById("d_node_T0");
//★変数にデータを書き込むと、<div>又は<SPAN>で定義したid部分に表示する
//　例：node_T0.innerHTML = "12345";
//★タイマーで実行する関数disp_watchで関数loadTextを実行し、定期的にファイルを
//　変数xmlHttp に読み込む。レスポンスデータはテキスト形式で取得。 
//　例：data_len = xmlHttp.responseText.length;
//　　　pointer = xmlHttp.responseText.indexOf(':', i);
//　　　var new_date = xmlHttp.responseText.substring(i, pointer);
//
////////////////////////////////////////////////////////////////////////////
////////////////////////////////////////////////////////////////////////////
// 非同期通信をう為のダミーファイル
//
//var read_cmnd_file = 'http://www.shellvalley.0t0.jp/test/ajax/js_test_dummy.txt';
var read_cmnd_file = 'http://www.ac.cyberhome.ne.jp/~shellvalley/sample/ajax/js_test.txt';
//

////////////////////////////////////////////////////////////////////////////
//★onreadystatechange
//　XMLHttpRequestオブジェクトの状態（readyState）が変化する度に呼び出される
//　イベントハンドラ 
////////////////////////////////////////////////////////////////////////////
//★open("method", "URL"[, asyncFlag[, "userName"[, "password"]]])
//　指定したメソッド method(GET or POST or PUT or PROPFIND)で指定URL 
//　にリクエストする。
//　リクエストの成功・失敗に関わらず次の処理を実行する場合があれば、
//　asynFlagをFalseに。それ以外は Ture にする。省略すると True で実行。
//　userName、password は認証が必要な場合にのみ指定。 
////////////////////////////////////////////////////////////////////////////
//★send(content)
//　サーバに HTTPリクエストを送信する。contentには送信するデータを設定出来る。
//　送信先のURL、送信方式(GET や POSTなど)は、openで指定したものになる。
//　データを送信しても送信先でそのデータを処理するようにしていないと何も
//　変化なし。
//　データを送信しない時でも必要でその時はsend(null)とする。 
////////////////////////////////////////////////////////////////////////////
//
//以下のdef_xxxはC言語でいうdefineをjava-scriptで代用したもの
////////////////////////////////////////////////////////////////////////////

var h_s_ddd;
var h_s_hhh;
var h_s_m10;
var h_s_m01;
var work;
var xmlHttp;							// read buffer

// #########################################################################
function loadText(){
	if(window.XMLHttpRequest){
		xmlHttp = new XMLHttpRequest();
	}
	else{
		if(window.ActiveXObject){
			 xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
		}
		else{
			xmlHttp = null;
		}
	}
////////////////////////////////////////////////////////////////////////////
// 非同期通信を行いクライアント情報をサーバに伝える
// txtファイルは存在していればよい（読み込むので数バイト以下が良い）
// ★open( HTTPメソッド, リクエスト先URL[, 非同期の有無[, ユーザー名[, パスワード]]] )
// readyState
// 0：オブジェクト生成・未初期化状態（まだopenメソッドが呼ばれていません）
// 1：リクエスト準備中（まだsendメソッドは呼ばれていません）
// 2：リクエスト送信中（まだstatusとレスポンスヘッダがありません）
// 3：データ受信中（レスポンスヘッダ取得）
// 4：データ受信完了
////////////////////////////////////////////////////////////////////////////

	xmlHttp.onreadystatechange = checkStatus;
	xmlHttp.open("GET", read_cmnd_file,false);
	xmlHttp.send(null);
}
////////////////////////////////////////////////////////////////////////////
//★readyState
// XMLHttpRequest の通信の状態
// 0 = uninitialized（読み込み開始前の初期状態）
// 1 = loading（読み込み中）
// 2 = loaded（とりあえず読み込んだ）
// 3 = interactive（読み込んだデータを解析中）
// 4 = complete（読み込んだデータの解析完了、または失敗した。つまり処理が終わった） 
//★status
//　HTTPステータスコードを取得。（参考 : Studying HTTP）
//　200 ： ファイルを見つけた
//　404 ： ファイルが見つかりません("Not Found")
//　など
////////////////////////////////////////////////////////////////////////////

// #########################################################################
function checkStatus(){
	if(xmlHttp.readyState == 4 && xmlHttp.status == 200){
		var n1s1_ddd = document.getElementById("d1s1_ddd");
		var n1s1_hhh = document.getElementById("d1s1_hhh");
		var n1s1_m10 = document.getElementById("d1s1_m10");

// d1s1_xxx はHTMLのspan-id
// n1s1_xxx は定義した変数

////////////////////////////////////////////////////////////////////////////
//★responseText
// レスポンスをテキスト形式で取得。 
		n1s1_ddd.innerHTML =js_test_form.h1s1_ddd.value;
		n1s1_hhh.innerHTML =js_test_form.h1s1_hhh.value;
		n1s1_m10.innerHTML =js_test_form.h1s1_m10.value + js_test_form.h1s1_m01.value;
	}
}
// #########################################################################
function disp_watch(){
	document.value = loadText();
	setTimeout('disp_watch()',999);		// setTimeout(関数名,ミリ秒) 
										// 指定した時間に命令を実行するタイマー
//	setTimeout('disp_watch()',9999);
}
// #########################################################################
function form_h_s(){
	var MyForm = document.createElement("form");
	var T0;
	var work1;
	var work2;

	document.body.appendChild(MyForm);
	with(MyForm) {
		T0 = document.createElement("input");
		work = document.getElementsByName(h_s_ddd)[0];Out_data.push(work.options[work.selectedIndex].value);
		work = document.getElementsByName(h_s_hhh)[0];Out_data.push(work.options[work.selectedIndex].value);
		work1 = document.getElementsByName(h_s_m10)[0];
		work2 = document.getElementsByName(h_s_m01)[0];
		work = work1.options[work1.selectedIndex].value + work2.options[work2.selectedIndex].value;
		Out_data.push(work);
		Out_data.push("*");
		T0.setAttribute("name","T0");
		T0.setAttribute("value",Out_data);
//		appendChild(T0);
//		method = 'post';
		action = 'js_test.cgi?' + Out_data;
alert("call cgi msg =" + action);
//		submit();
	}
}
// #########################################################################
function form_h1s1(){
	Out_data = ["Command:"];
	h_s_ddd = "h1s1_ddd";
	h_s_hhh = "h1s1_hhh";
	h_s_m10 = "h1s1_m10";
	h_s_m01 = "h1s1_m01";
	form_h_s();
}
// #########################################################################