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

开发 后端
本文用AJAX编程实现一个经典的登录页面,有保存密码功能,页面上所有的控件都是html控件,没有服务器控件,具体实现过程见下文。

  实现过程

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

 

  body标签代码,代码如下:

  1. <body onkeydown ="enterLogin()">    
  2.  
  3. <div style="text-align: center">   
  4. <table border="1" cellpadding="1">   
  5. <tr>   
  6. <td align="center" style="width: 100px; height: 20px; background-color: #99cccc"   
  7. valign="middle">   
  8. 用户名:td>   
  9. <td align="center" style="width: 74px; height: 20px; background-color: #99cccc" valign="middle">   
  10. <input id="txtusername" style="width: 111px; height: 19px" type="text" onblur ="checkuser()" />td>   
  11. <td align="center" style="width: 199px; height: 20px; background-color: #99cccc"   
  12. valign="middle"><img src="" id ="imgCheck" style = "visibility :hidden; "><span id ="unMessage">   
  13. span>td>   
  14. tr>   
  15. <tr>   
  16. <td align="center" style="width: 100px; height: 29px; background-color: #99cccc"   
  17. valign="middle">   
  18. 密码:td>   
  19. <td align="center" style="width: 74px; height: 29px; background-color: #99cccc" valign="middle">   
  20. <input id="txtpwd" style="width: 107px; height: 17px" type="password" />td>   
  21. <td align="center" style="width: 199px; height: 29px; background-color: #99cccc"   
  22. valign="middle"><span id ="pwdMessage">span>   
  23. td>   
  24. tr>   
  25. <tr>   
  26. <td align="center" colspan="3" style="background-color: #99cccc" valign="middle">   
  27. <input id="cbRememberPwd" type="checkbox" />记住密码一个月td>   
  28. tr>   
  29. <tr>   
  30. <td align="center" colspan="3" style="background-color: #99cccc" valign="middle">   
  31. <input id="btnOK" type="button" value="登录" onclick ="login()" />   
  32. <input id="btnReset" type="button" value="重置" onclick ="reset()" />td>   
  33. tr>   
  34. table>   
  35. div>   
  36.  
  37. body> 

#p#

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

  1. <script type ="text/javascript" src ="aj.js" >script> 
  2. <script type ="text/javascript" src ="loginCookies.js" >script> 

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

  aj.js代码如下:

  1. //JScript文件  
  2.  
  3. //ajax请求功能函数  
  4. //get调用方式:(1)实例化 var aj=new ajax(); (2)调用get函数 aj.get(url,callback) (3)写回调函数 function callback(xhr){xhr.responsetext}  
  5. //post调用方式:(1)实例化 var aj=new ajax(); (2)调用post函数 aj.post(url,content,callback) (3)写回调函数 function callback(xhr){xhr.responsetext}  
  6.  
  7. //构造ajax对象  
  8.  
  9. function ajax()   
  10. {  
  11. function getXHR()//获取xmlhttprequest  
  12. {  
  13. var request=false;  
  14. try   
  15. {  
  16. request = new XMLHttpRequest();  
  17. }   
  18. catch (trymicrosoft)   
  19. {  
  20. try   
  21. {  
  22. request = new ActiveXObject("Msxml2.XMLHTTP");  
  23. }   
  24. catch (othermicrosoft)   
  25. {  
  26. try   
  27. {  
  28. request = new ActiveXObject("Microsoft.XMLHTTP");  
  29. }   
  30. catch (failed)   
  31. {  
  32. request = false;  
  33. }  
  34. }  
  35. }  
  36. return request;  
  37. }  
  38.  
  39. this.get = function (openUrl,successFun)//ajax对象的get方法,通过get方式发送请求,openUrl为请求的页面,successFun为成功回调执行的函数  
  40. {  
  41. var request = getXHR();  
  42. request.open("get",openUrl,true);  
  43. // request.onreadystatechange = function ()  
  44. // {  
  45. // if (request.readystate==4)  
  46. // {  
  47. // if (request.status==200)  
  48. // {  
  49. // successFun(request);  
  50. // }  
  51. // }  
  52. // };  
  53. request.onreadystatechange = update;  
  54. function update()  
  55. {  
  56. if (request.readystate==4)  
  57. {  
  58. if (request.status==200)  
  59. {  
  60. successFun(request);  
  61. }  
  62. }  
  63. }  
  64. request.send(null);  
  65. }  
  66.  
  67. this.post = function (openUrl,sendContent,successFun)//ajax对象的post方法,通过post方式发送请求,openUrl为请求的页面,successFun为成功回调执行的函数  
  68. {  
  69. var request = getXHR();  
  70. request.open("post",openUrl,true);  
  71. request.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");//告诉服务器发送的是文本  
  72. request.onreadystatechange = update;  
  73. function update()  
  74. {  
  75. if (request.readystate==4)  
  76. {  
  77. if (request.status==200)  
  78. {  
  79. successFun(request);  
  80. }  
  81. }  
  82. }  
  83. request.send(sendContent);  
  84. }  
  85. }  

  loginCookie.js代码如下

  1. //JScript文件  
  2.  
  3. //SetCookie 保存一个Cookie。参数中除了name和value以外,其他可以省略。  
  4. //GetCookie 通过一个Cookie的名字取出它的值。  
  5. //DelCookie 删除一个Cookie,也就是让一个Cookie立刻过期。参数中除了name,其他可以省略。  
  6.  
  7.  
  8. //测试  
  9. //SetCookie("username", "123");expires代表"月"  
  10. //alert(GetCookie("username"));  
  11. //DelCookie("username");  
  12. //alert(GetCookie("username"));  
  13.  
  14.  
  15.  
  16. function SetCookie(name, value, expires, path, domain, secure) {  
  17. var today = new Date();  
  18. today.setTime(today.getTime());  
  19. if(expires) { expires *= 2592000; }  
  20. var expires_date = new Date(today.getTime() + (expires));  
  21. document.cookie = name + "=" + escape(value)  
  22. + (expires ? ";expires=" + expires_date.toGMTString() : "")  
  23. + (path ? ";path=" + path : "")  
  24. + (domain ? ";domain=" + domain : "")  
  25. + (secure ? ";secure" : "");  
  26. }  
  27.  
  28. function GetCookie(name) {  
  29. var cookies = document.cookie.split( ';' );  
  30. var cookie = '';  
  31.  
  32. for(var i=0; i<cookies.length; i++) {  
  33. cookie = cookies[i].split('=');  
  34. if(cookie[0].replace(/^\s+|\s+$/g, '') == name) {  
  35. return (cookie.length <= 1) ? "" : unescape(cookie[1].replace(/^\s+|\s+$/g, ''));  
  36. }  
  37. }  
  38. return null;  
  39. }  
  40.  
  41. function Delcookie(name, path, domain) {  
  42. document.cookie = name + "="  
  43. + (path ? ";path=" + path : "")  
  44. + (domain ? ";domain=" + domain : "")  
  45. + ";expires=Thu, 01-Jan-1970 00:00:01 GMT";  

#p#

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

  1. <script type ="text/javascript" > 
  2. window.onload = function (){  
  3. document.getElementById ('txtusername').focus();//用户名框获得焦点  
  4.  
  5. if (GetCookie('user_name') != null && GetCookie('user_pwd') != null)//设置记住密码的登录页面  
  6. {  
  7. document.getElementById ("txtusername").value = GetCookie('user_name');  
  8. document.getElementById ("txtpwd").value = GetCookie('user_pwd');  
  9. }  
  10. }  
  11.  
  12. String.prototype.Trim = function() //自定义的去除字符串两边空格的方法  
  13. {   
  14. return this.replace(/(^\s*)|(\s*$)/g, "");   
  15. }   
  16.  
  17. function checkuser()//检验用户名是否正确  
  18. {  
  19. var img = document.getElementById ("imgCheck")  
  20. img.src="iamges/blue-loading.gif";//设置图片及其可见性  
  21. img.style.visibility = "visible";  
  22.  
  23. var aj = new ajax();//以下为ajax请求  
  24. var username = document.getElementById ("txtusername").value.Trim();  
  25. var url = "login.aspx?uname="+escape(username);  
  26. aj.get(url,callback);  
  27. function callback(obj)  
  28. {  
  29. var response = obj.responsetext;  
  30. var res = response.split('\n');  
  31. if (res[0] == "ok")  
  32. {  
  33. img.src="iamges/icon-info.gif";  
  34. document.getElementById ("unMessage").innerHTML = "用户名正确";  
  35. }  
  36. else  
  37. {  
  38. img.src="iamges/icon-warning.gif";  
  39. document.getElementById ("unMessage").innerHTML = "用户名错误";  
  40. }  
  41. }  
  42. }  
  43.  
  44.  
  45. function login()//登录  
  46. {  
  47. if (document.getElementById ("unMessage").innerText == "用户名错误")  
  48. {  
  49. alert("你的用户名错误");  
  50. }  
  51. else if (document.getElementById ("txtpwd").value == "")  
  52. {  
  53. alert("请输入密码");  
  54. }  
  55. else  
  56. {  
  57. var aj = new ajax();  
  58. var username = document.getElementById ("txtusername").value.Trim();  
  59. var userpwd = document.getElementById ("txtpwd").value;  
  60. var url = "login.aspx?name="+escape(username)+"&pwd="+escape(userpwd);  
  61. aj.get(url,callback);  
  62. function callback(obj)  
  63. {  
  64. var response = obj.responsetext;  
  65. var res = response.split('\n');  
  66. if (res[0] == "ok")  
  67. {  
  68. if (document.getElementById ("cbRememberPwd").checked)  
  69. {  
  70. SetCookie('user_name',username,1);//保存密码一个月  
  71. SetCookie('user_pwd',userpwd,1);  
  72. }  
  73. else  
  74. {  
  75. SetCookie('user_name',username);  
  76. SetCookie('user_pwd',userpwd);  
  77. }  
  78. window.open ("loginIndex.htm","_self");  
  79. }  
  80. else  
  81. &p; {  
  82. alert("密码错误");  
  83. }  
  84. }  
  85. }  
  86. }  
  87.  
  88. function reset()//重置  
  89. {  
  90. window.onload();//执行窗体登录事件  
  91. document.getElementById ("txtusername").value="";  
  92. document.getElementById ("txtpwd").value="";  
  93. }  
  94.  
  95. function enterLogin()  
  96. {  
  97. if (event.keyCode==13) //如果按下的是Enter键的话,就执行登录语句  
  98. {  
  99. login();  
  100. }  
  101. }  
  102. script> 

#p#

  4. 新建一名为login.aspx的页面,该页面作为ajax请求的页面,login.aspx.cs代码如下

  1. protected void Page_Load(object sender, EventArgs e)  
  2. {  
  3. OleDbConnection Conn = DBcon.get_con();  
  4.  
  5. if (Request["uname"] != null)  
  6. {  
  7. string username = Request["uname"].ToString();  
  8. string strSql = "select * from [user] where u_name='" + username + "'";  
  9. Conn.Open();  
  10. OleDbCommand Comd = new OleDbCommand(strSql, Conn);  
  11. OleDbDataReader dr = Comd.ExecuteReader();  
  12. if (dr.Read())  
  13. {  
  14. Response.Write("ok\n");  
  15. }  
  16. else  
  17. {  
  18. Response.Write("fail\n");  
  19. }  
  20. //if (Comd.ExecuteNonQuery() > 0)  
  21. //{  
  22. // Response.Write("存在这个用户\n");  
  23. //}  
  24. //else  
  25. //{  
  26. // Response.Write("没有此用户名\n");  
  27. //}  
  28. Conn.Close();  
  29. }  
  30.  
  31. if (Request["name"] != null && Request["pwd"] != null)  
  32. {  
  33. string name = Request["name"].ToString();  
  34. string pwd = Request["pwd"].ToString();  
  35. string strSql = "select * from [user] where u_name='" + name + "'" + " and u_pwd='" + pwd + "'";  
  36. Conn.Open();  
  37. OleDbCommand Comd = new OleDbCommand(strSql, Conn);  
  38. OleDbDataReader dr = Comd.ExecuteReader();  
  39. if (dr.Read())  
  40. {  
  41. Response.Write("ok\n");  
  42. }  
  43. else  
  44. {  
  45. Response.Write("fail\n");  
  46. }  
  47. }  
  48. }  

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

  其body标签代码如下:

  1. <body> 
  2. <span id ="username"> span> 
  3. body> 

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

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

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

  1. <script type ="text/javascript" > 
  2. window.onload = function ()  
  3. {  
  4. if(GetCookie('user_name')==null || GetCookie('user_pwd')==null)//如果没有登录,而是直接在网页中输入网址的  
  5. {  
  6. alert('你还没有登录!\n返回到登陆页面。');  
  7. window.navigate("login.htm");  
  8. }  
  9. else  
  10. {  
  11. var uname = GetCookie('user_name');  
  12. document.getElementById ('username').innerHTML ="欢迎你: " + uname + " <a href='#' onclick = 'off()'>注销a>";//提供"注销"按钮  
  13. }  
  14. }  
  15.  
  16. function off()//注销事件  
  17. {  
  18. if (window.confirm("你真要注销吗?"))  
  19. {  
  20. Delcookie("user_name");  
  21. Delcookie("user_pwd");  
  22. window.navigate("login.htm");  
  23. }  
  24. }  
  25. script> 

#p#

  8. 完成并演示

  客户端代码较多,但是交互性很好,演示如下:

  当输入完用户名,鼠标光标离开用户名框之后,系统会快速检验用户名是否合法

 

图-演示1

 

图-演示2

  进入首页后,出现的窗口,带有当前登录的用户和注销按钮

 

图-演示3

  当用户点击注销按钮时,会友情提示你是否真的注销

 

图-演示4

  当你不是输入用户和密码登陆,也是直接在浏览器地址栏中输入首页网址的时候,系统会提示你没有登录,并直接返回到登陆页面。

 

图-演示5

  当用户输入了有效的用户名和密码,并要求系统记住密码,用户下次进入到登录页面时,系统会把上次记住的用户名和密码显示在输入框中。。

  并且这个时候直接在浏览器的地址栏中输入首页地址,也是能正常访问的。

 

图-演示7

【编辑推荐】

  1. 程序员突击--Ajax原理与系统开发
  2. 基于PHP的AJAX技术的具体应用解析
  3. 简化开发流程 了解各种Ajax框架的适用性
  4. ASP.NET AJAX前景黯淡?jQuery笑而不语
  5. 盘点ASP.NET Ajax工具箱的10大顶级控件
责任编辑:韩亚珊 来源: 飞诺网
相关推荐

2009-07-22 16:05:34

ASP.NET AJA

2009-07-22 16:11:43

ASP.NET AJA

2009-07-24 13:41:15

ASP.NET AJA

2009-07-22 16:25:41

ASP.NET AJA

2009-07-22 16:17:39

ASP.NET AJA

2009-07-20 17:39:36

WCF服务ASP.NET AJA

2009-07-20 13:14:25

安装ASP.NET A

2009-07-29 13:50:26

UpdatePanelASP.NET

2009-07-20 10:16:13

配置ASP.NET A

2009-07-28 09:02:32

asp.net aja

2009-07-31 10:23:44

缓存页面ASP.NET缓存

2009-07-22 15:58:52

ASP.NET AJA

2009-07-31 13:24:43

ASP.NET AJA

2009-07-23 14:17:41

2009-07-29 17:26:39

ASP.NET页面

2009-07-24 13:08:40

AJAX技术ASP.NET

2009-07-24 17:43:35

循环引用ASP.NET AJA

2009-07-27 09:07:04

Profile SerASP.NET AJA

2009-07-20 17:59:07

JavaScript调ASP.NET AJA

2009-07-21 09:53:55

ASP.NET AJAWCF服务
点赞
收藏

51CTO技术栈公众号