您現(xiàn)在的位置： 365建站網(wǎng) > 365文章 > 一款經(jīng)典的ajax登錄頁面后臺asp.net

一款經(jīng)典的ajax登錄頁面后臺asp.net

文章來源：365jz.com 點擊數(shù)：1611 更新時間：2009-11-09 22:40 參與評論

1，新建一名為login.htm的靜態(tài)網(wǎng)頁文件，作為登錄頁面，如圖

body標(biāo)簽代碼

<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請求功能函數(shù) //作者：吳寶佑 //get調(diào)用方式：(1)實例化 var aj=new ajax(); (2)調(diào)用get函數(shù) aj.get(url,callback) (3)寫回調(diào)函數(shù) function callback(xhr){xhr.responsetext} //post調(diào)用方式：(1)實例化 var aj=new ajax(); (2)調(diào)用post函數(shù) aj.post(url,content,callback) (3)寫回調(diào)函數(shù) function callback(xhr){xhr.responsetext} //構(gòu)造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方式發(fā)送請求,openUrl為請求的頁面,successFun為成功回調(diào)執(zhí)行的函數(shù) { 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方式發(fā)送請求,openUrl為請求的頁面,successFun為成功回調(diào)執(zhí)行的函數(shù) { var request = getXHR(); request.open("post",openUrl,true); request.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");//告訴服務(wù)器發(fā)送的是文本 request.onreadystatechange = update; function update() { if (request.readystate==4) { if (request.status==200) { successFun(request); } } } request.send(sendContent); } } loginCookie.js代碼如下 //JScript文件 //SetCookie 保存一個Cookie。參數(shù)中除了name和value以外，其他可以省略。 //GetCookie 通過一個Cookie的名字取出它的值。 //DelCookie 刪除一個Cookie，也就是讓一個Cookie立刻過期。參數(shù)中除了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標(biāo)簽之間

<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的靜態(tài)頁面，作為用戶登錄之后的首頁

其body標(biāo)簽代碼如下

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

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

7，寫loginIdex.htm頁面的js代碼，放在head標(biāo)簽之間

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

8，完成，客戶端代碼較多，但是交互性很好

演示如下：