您现在的位置： 365建站网 > 365文章 > 一款经典的ajax登录页面后台asp.net

一款经典的ajax登录页面后台asp.net

文章来源：365jz.com 点击数：1601 更新时间：2009-11-09 22:40 参与评论

1，新建一名为login.htm的静态网页文件，作为登录页面，如图

body标签代码

<body onkeydown ="enterLogin()">  <div style="text-align: center" mce_style="text-align: center"> <table border="1" cellpadding="1"> <tr> <td align="center" style="width: 100px; height: 20px; background-color: #99cccc" valign="middle"> 用户名：</td> <td align="center" style="width: 74px; height: 20px; background-color: #99cccc" valign="middle"> <input id="txtusername" style="width: 111px; height: 19px" type="text" onblur ="checkuser()" /></td> <td align="center" style="width: 199px; height: 20px; background-color: #99cccc" valign="middle"><img src="" id ="imgCheck" style = "visibility :hidden; "/ ><span id ="unMessage"> </span></td> </tr> <tr> <td align="center" style="width: 100px; height: 29px; background-color: #99cccc" valign="middle"> 密码：</td> <td align="center" style="width: 74px; height: 29px; background-color: #99cccc" valign="middle"> <input id="txtpwd" style="width: 107px; height: 17px" type="password" /></td> <td align="center" style="width: 199px; height: 29px; background-color: #99cccc" valign="middle"><span id ="pwdMessage"></span> </td> </tr> <tr> <td align="center" colspan="3" style="background-color: #99cccc" mce_style="background-color: #99cccc" valign="middle"> <input id="cbRememberPwd" type="checkbox" />记住密码一个月</td> </tr> <tr> <td align="center" colspan="3" style="background-color: #99cccc" mce_style="background-color: #99cccc" valign="middle"> <input id="btnOK" type="button" value="登录" onclick ="login()" /> <input id="btnReset" type="button" value="重置" onclick ="reset()" /></td> </tr> </table> </div> </body>

2，在login.htm中引入外部js代码

其中aj.js为ajax封装的类，loginCookie.js为对Cookie操作的代码

aj.js代码如下

//JScript文件 //ajax请求功能函数 //作者：吴宝佑 //get调用方式：(1)实例化 var aj=new ajax(); (2)调用get函数 aj.get(url,callback) (3)写回调函数 function callback(xhr){xhr.responsetext} //post调用方式：(1)实例化 var aj=new ajax(); (2)调用post函数 aj.post(url,content,callback) (3)写回调函数 function callback(xhr){xhr.responsetext} //构造ajax对象 function ajax() { function getXHR()//获取xmlhttprequest { var request=false; try { request = new XMLHttpRequest(); } catch (trymicrosoft) { try { request = new ActiveXObject("Msxml2.XMLHTTP"); } catch (othermicrosoft) { try { request = new ActiveXObject("Microsoft.XMLHTTP"); } catch (failed) { request = false; } } } return request; } this.get = function (openUrl,successFun)//ajax对象的get方法,通过get方式发送请求,openUrl为请求的页面,successFun为成功回调执行的函数 { var request = getXHR(); request.open("get",openUrl,true); // request.onreadystatechange = function () // { // if (request.readystate==4) // { // if (request.status==200) // { // successFun(request); // } // } // }; request.onreadystatechange = update; function update() { if (request.readystate==4) { if (request.status==200) { successFun(request); } } } request.send(null); } this.post = function (openUrl,sendContent,successFun)//ajax对象的post方法,通过post方式发送请求,openUrl为请求的页面,successFun为成功回调执行的函数 { var request = getXHR(); request.open("post",openUrl,true); request.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");//告诉服务器发送的是文本 request.onreadystatechange = update; function update() { if (request.readystate==4) { if (request.status==200) { successFun(request); } } } request.send(sendContent); } } loginCookie.js代码如下 //JScript文件 //SetCookie 保存一个Cookie。参数中除了name和value以外，其他可以省略。 //GetCookie 通过一个Cookie的名字取出它的值。 //DelCookie 删除一个Cookie，也就是让一个Cookie立刻过期。参数中除了name，其他可以省略。 //测试 //SetCookie("username", "123");expires代表"月" //alert(GetCookie("username")); //DelCookie("username"); //alert(GetCookie("username")); function SetCookie(name, value, expires, path, domain, secure) { var today = new Date(); today.setTime(today.getTime()); if(expires) { expires *= 2592000; } var expires_date = new Date(today.getTime() + (expires)); document.cookie = name + "=" + escape(value) + (expires ? ";expires=" + expires_date.toGMTString() : "") + (path ? ";path=" + path : "") + (domain ? ";domain=" + domain : "") + (secure ? ";secure" : ""); } function GetCookie(name) { var cookies = document.cookie.split( ';' ); var cookie = ''; for(var i=0; i<cookies.length; i++) { cookie = cookies[i].split('='); if(cookie[0].replace(/^\s+|\s+$/g, '') == name) { return (cookie.length <= 1) ? "" : unescape(cookie[1].replace(/^\s+|\s+$/g, '')); } } return null; } function Delcookie(name, path, domain) { document.cookie = name + "=" + (path ? ";path=" + path : "") + (domain ? ";domain=" + domain : "") + ";expires=Thu, 01-Jan-1970 00:00:01 GMT"; }

3，写login.htm页面中的js代码，放在head标签之间

<mce:script type ="text/javascript" ></mce:script>

4，新建一名为login.aspx的页面，该页面作为ajax请求的页面，login.aspx.cs代码如下
protected void Page_Load(object sender, EventArgs e) { OleDbConnection Conn = DBcon.get_con(); if (Request["uname"] != null) { string username = Request["uname"].ToString(); string strSql = "select * from [user] where u_name='" + username + "'"; Conn.Open(); OleDbCommand Comd = new OleDbCommand(strSql, Conn); OleDbDataReader dr = Comd.ExecuteReader(); if (dr.Read()) { Response.Write("ok\n"); } else { Response.Write("fail\n"); } //if (Comd.ExecuteNonQuery() > 0) //{ // Response.Write("存在这个用户\n"); //} //else //{ // Response.Write("没有此用户名\n"); //} Conn.Close(); } if (Request["name"] != null && Request["pwd"] != null) { string name = Request["name"].ToString(); string pwd = Request["pwd"].ToString(); string strSql = "select * from [user] where u_name='" + name + "'" + " and u_pwd='" + pwd + "'"; Conn.Open(); OleDbCommand Comd = new OleDbCommand(strSql, Conn); OleDbDataReader dr = Comd.ExecuteReader(); if (dr.Read()) { Response.Write("ok\n"); } else { Response.Write("fail\n"); } } }

5，新建一名为loginIndex.htm的静态页面，作为用户登录之后的首页

其body标签代码如下

6，在loginIndex.htm页面引入loginCookie.js文件

<mce:script type ="text/javascript" src ="loginCookies.js" ></mce:script>

7，写loginIdex.htm页面的js代码，放在head标签之间

<mce:script type ="text/javascript" ></mce:script>

8，完成，客户端代码较多，但是交互性很好

演示如下：