ajax 异步验证
login.aspx
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="login.aspx.cs" Inherits="login" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
<title>Ajax Loginのページ</title>
<script type="text/javascript">
function frmSumbit()
{
var userId=document.getElementById("text1").value;
var password=document.getElementById("text2").value;
var url="loginServer.aspx";
// var url="loginServer.aspx?userID="+userId+"&passWord="+password;
var paras="userID="+userId+"&passWord="+password;
//
//var pars=
if(window.ActiveXObject)
{
request=new ActiveXObject("Microsoft.XMLHTTP");
}
else if(window.ActiveXObject)
{
request = new ActiveXObject("Msxml2.XMLHTTP.4.0");
}else if(window.ActiveXObject)
{
request = new ActiveXObject("Msxml2.XMLHTTP");
}else if(window.XMLHttpRequest)
{
request = new XMLHttpRequest();
}
if (!request)
alert("Error initializing XMLHttpRequest!");
//-------------
var btn=document.getElementById("btn1");
document.getElementById("text1").disable=true;
document.getElementById("text2").disable=true;
btn.disable=true;
//-------------
// request.open("GET", url, true);
request.open("POST", url, true);
request.setRequestHeader("content-length",paras.length);
request.setRequestHeader("content-type","application/x-www-form-urlencoded;");
request.onreadystatechange =loginResult;
request.send(paras);
//request.send(null);
var loadingTb=document.getElementById("showLog");
loadingTb.style.display="inline";
}
function loginResult()
{
// alert(request.readyState);
var loadingTb=document.getElementById("showLog");
if(request.readyState==4)
{
if(request.status==200)
{
alert(request.responseText);
loadingTb.style.display="none";
var response=request.responseText;
alert(response);
if(response=="1")
{
alert("success");
window.location.href="index.html";
}
else
{
alert("failure");
}
}
}
}
function test(obj)
{
// var txt=document.getElementById(obj);
// txt.style.borderBottomStyle="inset";
// txt.style.borderTopStyle="inset";
// txt.style.borderRightStyle="inset";
// txt.style.borderLeftStyle="inset";
obj.style.borderBottomStyle="inset";
obj.style.borderTopStyle="inset";
obj.style.borderRightStyle="inset";
obj.style.borderLeftStyle="inset";
}
function test1(obj)
{
// var txt=document.getElementById("text1");
// txt.style.borderBottomStyle="none";
// txt.style.borderTopStyle="none";
// txt.style.borderRightStyle="none";
// txt.style.borderLeftStyle="none";
obj.style.borderBottomStyle="none";
obj.style.borderTopStyle="none";
obj.style.borderRightStyle="none";
obj.style.borderLeftStyle="none";
}
</script>
</head>
<body>
<form id="form1" runat="server">
ユーザー名：<input id="text1" style="width: 144px;border-bottom-style:none;border-top-style:none;border-right-style:none;border-left-style:none; " type="text" value="this is a test!" onfocus="test(this)" onblur="test1(this)"/><br />
<br />
パスウード：
<input id="text2" name="text2" type="text" /><br />
<br />
<input id="btn1" style="width: 72px" type="button" value="ログイン" onclick="frmSumbit()" />
<br />
<br />
<div id="showLog" style="display:none;">
<img src="images/loading2.gif" alt="" />
</div>
</form>
</body>
</html>
loginServer.aspx
string userId = this.Request.Params["userID"].ToString();
// string userId = this.Request.Params["userId"].ToString();
string password = this.Request.Params["passWord"].ToString();
if ((userId == "1") && (password == "2"))
{
Response.Write("1");
//Response.End();
}
else
{
Response.Write("2");
}
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="login.aspx.cs" Inherits="login" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml" ><head runat="server"> <title>Ajax Loginのページ</title> <script type="text/javascript"> function frmSumbit() {
var userId=document.getElementById("text1").value; var password=document.getElementById("text2").value; var url="loginServer.aspx"; // var url="loginServer.aspx?userID="+userId+"&passWord="+password; var paras="userID="+userId+"&passWord="+password; // //var pars= if(window.ActiveXObject) { request=new ActiveXObject("Microsoft.XMLHTTP"); } else if(window.ActiveXObject) { request = new ActiveXObject("Msxml2.XMLHTTP.4.0"); }else if(window.ActiveXObject) { request = new ActiveXObject("Msxml2.XMLHTTP"); }else if(window.XMLHttpRequest) { request = new XMLHttpRequest(); } if (!request) alert("Error initializing XMLHttpRequest!"); //------------- var btn=document.getElementById("btn1"); document.getElementById("text1").disable=true; document.getElementById("text2").disable=true; btn.disable=true; //------------- // request.open("GET", url, true); request.open("POST", url, true); request.setRequestHeader("content-length",paras.length); request.setRequestHeader("content-type","application/x-www-form-urlencoded;"); request.onreadystatechange =loginResult; request.send(paras); //request.send(null); var loadingTb=document.getElementById("showLog"); loadingTb.style.display="inline"; } function loginResult() {// alert(request.readyState); var loadingTb=document.getElementById("showLog"); if(request.readyState==4) { if(request.status==200) { alert(request.responseText); loadingTb.style.display="none"; var response=request.responseText; alert(response); if(response=="1") { alert("success"); window.location.href="index.html"; } else { alert("failure"); } } } } function test(obj) {// var txt=document.getElementById(obj);// txt.style.borderBottomStyle="inset";// txt.style.borderTopStyle="inset";// txt.style.borderRightStyle="inset";// txt.style.borderLeftStyle="inset"; obj.style.borderBottomStyle="inset"; obj.style.borderTopStyle="inset"; obj.style.borderRightStyle="inset"; obj.style.borderLeftStyle="inset"; } function test1(obj) {// var txt=document.getElementById("text1");// txt.style.borderBottomStyle="none";// txt.style.borderTopStyle="none";// txt.style.borderRightStyle="none";// txt.style.borderLeftStyle="none"; obj.style.borderBottomStyle="none"; obj.style.borderTopStyle="none"; obj.style.borderRightStyle="none"; obj.style.borderLeftStyle="none"; } </script></head><body> <form id="form1" runat="server"> ユーザー名：<input id="text1" style="width: 144px;border-bottom-style:none;border-top-style:none;border-right-style:none;border-left-style:none; " type="text" value="this is a test!" onfocus="test(this)" onblur="test1(this)"/><br /> <br /> パスウード： <input id="text2" name="text2" type="text" /><br /> <br /> <input id="btn1" style="width: 72px" type="button" value="ログイン" onclick="frmSumbit()" /> <br /> <br /> <div id="showLog" style="display:none;"> <img src="images/loading2.gif" alt="" /> </div> </form></body></html>loginServer.aspx
string userId = this.Request.Params["userID"].ToString(); // string userId = this.Request.Params["userId"].ToString(); string password = this.Request.Params["passWord"].ToString(); if ((userId == "1") && (password == "2")) { Response.Write("1"); //Response.End(); } else { Response.Write("2"); }