JavaScriptで動作する空きドメイン検索ツール

前回の記事では「空きドメイン検索phpプログラム」を作成しました。
しかし、php＋フォームで動作させている為、動作させる度にページ位置が移動してしまうという問題などがありました。

今回ではJavaScriptを利用し、ページを移動しないようにします。

phpファイルを用意する

前回の記事でphpでドメインが既に登録済みであるかを確認する仕組みを作りました。
今回はJavaScriptで、そこにデータを送り変換させます。

まずプログラムはphpの別ファイルで用意します。
ファイルの中身は前回使用したphpの内容を保存します。
これにデータを転送して判定結果を取得します。

JavaScriptでフォームの制御

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

<script type="text/javascript">
<!------
function createXmlHttpRequest()
{
	var xmlhttp=null;
	if(window.ActiveXObject)
	{
		try
		{
			xmlhttp=new ActiveXObject("Msxml2.XMLHTTP");
		}
		catch(e)
		{
			try
			{
				xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
			}
			catch (e2)
			{
			}
		}
	}
	else if(window.XMLHttpRequest)
	{
		xmlhttp = new XMLHttpRequest();
	}
	return xmlhttp;
}
//------->
</script>

createXmlHttpRequestでActiveXObject設定します。

<script type="text/javascript">
<!------
function sendRequest(moji)
{
	var xmlhttp=createXmlHttpRequest();
	if(xmlhttp!=null)
	{
		var res=1;
		xmlhttp.open("POST", "../domain/domain_sub.php", false);
		xmlhttp.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
		var data="domain="+moji;
		xmlhttp.send(data);
		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+'は新規取得可能です';
		}
	}
}
function buttonOnProgram()
{
	var moji="";
	moji=document.getElementById('domain').value;
	var i=moji.length;
	if(i<3 || i>32)
	{
		document.getElementById("Stas").innerHTML='<span style="color:#ff0000;">3文字以上、32文字以下です。</span>';
	}
	else
	{
		sendRequest(moji);
	}
}
//------->
</script>

ボタンを押すとbuttonOnProgramを呼び出します。
この関数で目的のドメインが3文字以上、32文字以下であるかを判定しオーバーした場合のエラーの警告を表示するようにもします。
オーバーしなかった場合にcreateXmlHttpRequestをsendRequestの内部で呼び出します。
これにphpにデータを送り、結果を受け取り表示に反映します。