(cache) 有限会社オフィス汎 [Office Han]

【 Ajax 】

Ajax(Asynchronous JavaScript + XML の略称)
JavaScript の組み込みクラスである XMLHttpRequest を利用した非同期通信とDHTMLといった既存の技術の組み合わせることによって、画面全体の再読み込みを行うことなくサーバと通信し、画面の必要な部分のみを書き換えることができます。

※弊社の「お問合せ」画面で実装しています。

[チェックされた内容によってコンボボックスの選択肢を変更する]

アンケートなどの入力において、選択された内容によって次の選択項目を変えたいことって多いですよね。

◆動作サンプル

<script language="javascript">
<!--
var req;
var xmlhttp;   // XMLHttpRequest用の変数

function startup() {
	// XMLHttpRequestを生成
	xmlhttp = this.XMLHttpRequest ? new XMLHttpRequest() : new ActiveXObject("Microsoft.XMLHTTP");
}

function getCity(sel){
	var val = sel.value;

	// 前回の通信をキャンセル
	xmlhttp.abort();
	// サーバから返答があったときの処理を設定
	xmlhttp.onreadystatechange = handleXmlhttp;
	//	GETで送信
	xmlhttp.open("GET", "selectChange.php?pref=" + encodeURI(val), true);
	//	GETの場合はnull
	xmlhttp.send(null);
}

//	xmlhttpの状態が変化したら起動される	
function handleXmlhttp(){
	if (xmlhttp.readyState == 4) {
		if (xmlhttp.status == 200) { // 正常にデータの取得が完了
			var opt = eval(xmlhttp.responseText); // JSON形式を復元
			if(opt != null) {
				document.frm1.city.options.length = opt.length;
				for(var i=0; i<opt.length; ++i) {
					document.frm1.city.options[i].value = opt[i][0];
					document.frm1.city.options[i].text = opt[i][1];
				}
				document.frm1.city.options[0].selected = true
		 	}
		}
	}
}

//-->
</script>
</head>
<body onload="startup();">
<form name="frm1">
<input type="radio" name="pref" value="nagano" onClick="getCity(this);">長野
<input type="radio" name="pref" value="niigata" onClick="getCity(this);">新潟
<select name="city" style="width:100px;">
</select>

</form>

サーバからの返却値は「キー：値」のペアで取得したいので、JSON（JavaScript Object Notation）フォーマットで返しています。

[フォームの入力チェック]

◆動作サンプル

<script language="javascript">
<!--
var xmlhttp;

function startup() {
	// XMLHttpRequestを生成
	xmlhttp = this.XMLHttpRequest ? new XMLHttpRequest() 
					: new ActiveXObject("Microsoft.XMLHTTP");
}

function chkText( postData ) {
	document.getElementById('retMsg').innerHTML = "<p style='color:blue;'>チェック中…</p>";
	document.form1.cmdSend.disabled = true;
    
    // 送信データ生成
	var value = '';
	for(var i = 0; i < postData.elements.length; i++) {
		value += ('&' + postData.elements[i].name + '=' + postData.elements[i].value);
	}
	
	// 前回の通信をキャンセル
	xmlhttp.abort();
	
	// サーバから返答があったときの処理を設定
	xmlhttp.onreadystatechange = dispResult;
	
	// POSTで送信
	xmlhttp.open('POST', 'formCheck.php', true);
	// ↓↓↓POSTで送信の際はこの設定が重要↓↓↓
	xmlhttp.setRequestHeader("Content-Type" , "application/x-www-form-urlencoded");
	xmlhttp.send(value.substring(1));
	return false;
}

function dispResult() {
	if ( xmlhttp.readyState == 4 ) {
		document.getElementById('retMsg').innerHTML = xmlhttp.responseText;
		document.form1.cmdSend.disabled = false;
	}
}

//-->
</script>
</head>
<body onload="startup();">
<div id="retMsg"><p>サンプル</p></div>
<form name="form1" method="post" id="form1" onSubmit="return chkText(this)">
名前：<input name="txtName" type="text" id="txtName" size="30"/>
<input type="submit" name="cmdSend" value="送　信" id="cmdSend" />
</form>
</body>

フォームのonSubmitイベントでフォームのデータを引数にしてchkText関数呼び出し
XMLHttpRequestオブジェクトのsendメソッドに引数としてフォームのpostデータを設定して、リクエストを送信
サーバ側(PHP)では入力値のチェックを行い、入力エラーがある場合はエラーメッセージ（テキスト）を返却、
エラーが無かった場合は入力内容をメール送信し、送信完了のメッセージ（テキスト）を返却
コールバック関数（dispResult）が呼び出され、サーバから受け取ったテキストをメッセージ表示部に設定

[入力された郵便番号をもとに住所を表示する]

◆動作サンプル

<script language="javascript">
<!--
var xmlhttp;

function startup() {
	// XMLHttpRequestを生成
	xmlhttp = this.XMLHttpRequest ? new XMLHttpRequest() 
					: new ActiveXObject("Microsoft.XMLHTTP");
}

function searchAddress( str ) {
	if ( !str ) {
		document.form1.txtAdd.value = "";
		return;
	}

	// 前回の通信をキャンセル
	xmlhttp.abort();
	
	// サーバから返答があったときの処理を設定
	xmlhttp.onreadystatechange = change;
	
	if ( str.length >= 7 ) {
		// 7桁以上入力があった時だけ　GET送信
		xmlhttp.open('GET', 'yubin.php?cd=' + str);
		xmlhttp.send(null);
	}
}

function change() {
	if ( xmlhttp.readyState == 4 ) {
		document.form1.txtAdd.value = xmlhttp.responseText;
	}
}
//-->
</script>
</head>
<body onload="startup();">
<p>郵便番号を入力すると（ハイフン有りでも無しでもＯＫ）市町村名を検索して表示します。</p>
<form name="form1">
〒<input type="text" name="yubin" id="yubin" value="" onKeyUp="load( this.value );" size="9" maxlength="8">
<input name="txtAdd" type="text" id="txtAdd" size="50"/>
</form>
</body>

郵便番号のテキストフィールドのonKeyUpイベントで、入力された郵便番号を引数としてsearchAddressを呼び出し
郵便番号が7桁以上の時、XMLHttpRequestオブジェクトのopenメソッドに、郵便番号をパラメータとして含めたURLを指定して、リクエストを送信
サーバ側(PHP)では入力された郵便番号から住所を検索し、該当がみつかった場合、テキストで返却
コールバック関数（change）が呼び出され、サーバから受け取ったテキストを住所テキストフィールドに設定