ドメイン検索ツールで検索中マークを表示するようにする

前回の記事で「JavaScriptでのドメイン検索プログラム」を作成しました。
しかし、検索している間にブラウザが停止してしまい、操作する事ができませんでした。

今回は、シームレスに検索を行い、検索中マークを表示するようにします。

JavaScriptでフォームの制御

ActiveXObjectでリアルタイムにphpへデータを送る処理できるようにします。

<script type="text/javascript">
<!------
function buttonOnProgram()
{
	var moji="";
	moji=document.getElementById('domain').value;
	var i=moji.length;
	if(i<3 || i>32)
	{
		document.getElementById('Imgs').innerHTML='';
		document.getElementById("Stas").innerHTML='<span style="color:#ff0000;">3文字以上、32文字以下です。</span>';
	}
	else
	{
		document.getElementById('Imgs').innerHTML='<img src="../domain/load.gif">';
		document.getElementById("Stas").innerHTML='<span style="color:#ff0000;">調べています</span>';
		sendRequest(moji);
	}
}
//------->
</script>

アニメーションgifファイルを空きドメイン検索前表示させるようにします。
前回の処理ではアニメーションが止まってしまいましたが、今回の処理なら動作し続けます。

<script type="text/javascript">
<!------
function sendRequest(moji)
{
	var xmlhttp=createXmlHttpRequest();
	if(xmlhttp!=null)
	{
		var res=1;
		xmlhttp.open("POST", "../domain/domain_sub.php", true);
		xmlhttp.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
		var data="domain="+moji;
		xmlhttp.send(data);
		xmlhttp.onreadystatechange=function()
		{
			if(this.readyState==4 && this.status==200)
			{
				res=xmlhttp.responseText;
				if(res==1)
				{
					document.getElementById('Imgs').innerHTML='<img src="../domain/on.png">';
					document.getElementById('Stas').innerHTML=moji+'は既に登録されています';
				}
				if(res==-1)
				{
					document.getElementById('Imgs').innerHTML='<img src="../domain/off.png">';
					document.getElementById('Stas').innerHTML=moji+'は新規取得可能です';
				}
			}
		}
	}
}
//------->
</script>

phpにデータを転送する際のパラメータに違いがあります。
xmlhttp.open(送信メソッド,URL,フラグ true:非同期 false:同期);

xmlhttp.onreadystatechangeに関数として非同期する処理を入れます。
非同期なのでブラウザの停止が無く、gifアニメーションも並列処理されます。
関数の内部のパラメータとしてreadyStateとstatusがあり、readyStateが4、statusが200で処理が完了の通知です。
通知を受けたらHTMLの構成パーツへ結果を反映させます。