看了AJAX,做个登陆

(作者：FREE-SHI BLOG)
_________________________________

<%If Session("User_name") = "" then%>
<script type="text/javascript" >

function show(){
LOGIN.style.display = "block";
LOGIN2.style.display = "none";
LOGIN3.style.display = "none";
LOGIN4.style.display = "none";
return false;

}

function hide(){
LOGIN2.style.display = "block";
LOGIN.style.display = "none";
return false;


}

var xmlHttp

function chk_login(user_name,pass_word)
{

if (user_name.length > 0 && pass_word.length > 0 )
{
LOGIN3.style.display = "block";
LOGIN.style.display = "none";
LOGIN2.style.display = "none";
var url="/asp/inc/login_chk.asp?User_Name=" + user_name + "&User_PassWord=" + pass_word;
xmlHttp=GetXmlHttpObject(stateChanged);
xmlHttp.open("GET", url , true);
xmlHttp.send(null);
}
else
{
alert("请填写完整的用户名和密码！");
//document.getElementById("txtHint").innerHTML=""

}
}


function stateChanged()
{
var chk_pop,tishi;
LOGIN4.style.display = "block";
LOGIN3.style.display = "none";
chk_pop = xmlHttp.responseText;
//LOGIN4.innerHTML =xmlHttp.responseText

if (xmlHttp.readyState==4 || xmlHttp.readyState=="complete")
{
if(chk_pop == 1){
tishi =user_name.value + "，欢迎您登陆！";
}else{
tishi ="登陆失败！用户名或者密码错误！<a href='javascript:;' onclick='show();'>重新登陆</a>";
}
LOGIN4.innerHTML=tishi;
}
}

function GetXmlHttpObject(handler)
{
var objXmlHttp=null

if (navigator.userAgent.indexOf("Opera")>=0)
{
alert("This example doesn't work in Opera")
return;
}
if (navigator.userAgent.indexOf("MSIE")>=0)
{
var strName="Msxml2.XMLHTTP"
if (navigator.appVersion.indexOf("MSIE 5.5")>=0)
{
strName="Microsoft.XMLHTTP"

}
try
{
objXmlHttp=new ActiveXObject(strName)
objXmlHttp.onreadystatechange=handler
return objXmlHttp
}
catch(e)
{
alert("Error. Scripting for ActiveX might be disabled")
return
}
}
if (navigator.userAgent.indexOf("Mozilla")>=0)
{
objXmlHttp=new XMLHttpRequest()
objXmlHttp.onload=handler
objXmlHttp.onerror=handler
return objXmlHttp
}
}

</script>
<style type="text/css">
<!--
body{
margin:0 0 0 0;
/*四边的补丁边距*/
padding:0 0 0 0;

}
.li{
margin:0 0 0 0;
/*四边的补丁边距*/
padding:0 0 0 0;


}
#LOGIN3{
display:none;
margin:0 0 0 0;
/*四边的补丁边距*/
padding:0 0 0 0;
width:760px;
height:80px;
}
#LOGIN4{
display:none;
margin:0 0 0 0;
/*四边的补丁边距*/
padding:0 0 0 0;
width:760px;
border: #C2EB81 1px solid;
margin-bottom: 12px;
background: #fffdf0;
}
#LOGIN{
width:760px;
height:80px;
margin:0 0 0 0;
/*四边的补丁边距*/
padding:0 0 0 0;
border: #C2EB81 1px solid;
margin-bottom: 12px;
background: #fffdf0;
display:none;
z-index:2;
}

#LOGIN h3{
margin:0 0 0 0;
}
#LOGIN li{
margin: auto;
/*四边的补丁边距*/
padding:auto;
list-style-type:none;
text-align:inherit;
}
#LOGIN2{
margin:0 0 0 0;
/*四边的补丁边距*/
padding:10px 0 0 0;
text-align:left;
width:760px;
border: #C2EB81 1px solid;
margin-bottom: 12px;
background: #fffdf0;
z-index:2;

}
#LOGIN2 h3{
display:none;
}
#LOGIN2 li{
background-image : none;
float:none;
list-style-type:none;
text-align:left;
padding:0 0 0 10px;

}

#s1 {
width:540px;
margin:2px;
padding:10px 0 0 10px;
float:left;
text-align:center;

}
#s2 {
width:60px;
margin:0 0 0 0;
padding:0 0 0 0;
float:right;


}
#input{
margin:2px;
width:760px;
margin:0 0 0 0;
padding:0 0 0 0;
}
#Layer1 {
position:absolute;
z-index:1;
margin:0 0 0 0;
padding:0 0 0 0;
}

-->
</style>



<div id="Layer1">

<div id="LOGIN">
<div id="s1">会员登陆</div>
<div id="s2"><a href="javascript:;" onclick="hide();">关闭面板</a></div>
<div id="input">
<ul>
<li>用户名 <input name="user_name" type="text" />
密码 <input name="pass_word" type="text" />
<a href="javascript:;" onclick="chk_login(user_name.value,pass_word.value);">登陆</a></li>
</ul>
</div>
</div>

<div id="LOGIN2">
<h3>登入</h3>
<ul>
<li>您好! <a href="javascript:;" onclick="show();">登入</a>。 中文（简体） （<a href="javascript:;">是否更改？</a>） VEVO。免费语音视频沟通 </li>
</ul>
</div>

<div id="LOGIN3">
<h3>登入中...</h3>
<ul>
<li>您好!正在确认您的身份，请稍后！ </li>
</ul>
</div>
<div id="LOGIN4">
</div>
</div>
<%
Else
Response.Write( Session("User_name") & ",你好！")
Session("User_name")=""
End If
%>