自拍偷在线精品自拍偷,亚洲欧美中文日韩v在线观看不卡

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

作者：佚名
開(kāi)發(fā) 后端
本文用AJAX編程實(shí)現(xiàn)一個(gè)經(jīng)典的登錄頁(yè)面，有保存密碼功能，頁(yè)面上所有的控件都是html控件，沒(méi)有服務(wù)器控件，具體實(shí)現(xiàn)過(guò)程見(jiàn)下文。

　　實(shí)現(xiàn)過(guò)程

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

 

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

  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" />記住密碼一個(gè)月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為對(duì)Cookie操作的代碼

　　aj.js代碼如下:

  1. //JScript文件  
  2.  
  3. //ajax請(qǐng)求功能函數(shù)  
  4. //get調(diào)用方式：(1)實(shí)例化 var aj=new ajax(); (2)調(diào)用get函數(shù) aj.get(url,callback) (3)寫回調(diào)函數(shù) function callback(xhr){xhr.responsetext}  
  5. //post調(diào)用方式：(1)實(shí)例化 var aj=new ajax(); (2)調(diào)用post函數(shù) aj.post(url,content,callback) (3)寫回調(diào)函數(shù) function callback(xhr){xhr.responsetext}  
  6.  
  7. //構(gòu)造ajax對(duì)象  
  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對(duì)象的get方法,通過(guò)get方式發(fā)送請(qǐng)求,openUrl為請(qǐng)求的頁(yè)面,successFun為成功回調(diào)執(zhí)行的函數(shù)  
  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對(duì)象的post方法,通過(guò)post方式發(fā)送請(qǐng)求,openUrl為請(qǐng)求的頁(yè)面,successFun為成功回調(diào)執(zhí)行的函數(shù)  
  68. {  
  69. var request = getXHR();  
  70. request.open("post",openUrl,true);  
  71. request.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");//告訴服務(wù)器發(fā)送的是文本  
  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 保存一個(gè)Cookie。參數(shù)中除了name和value以外，其他可以省略。  
  4. //GetCookie 通過(guò)一個(gè)Cookie的名字取出它的值。  
  5. //DelCookie 刪除一個(gè)Cookie，也就是讓一個(gè)Cookie立刻過(guò)期。參數(shù)中除了name，其他可以省略。  
  6.  
  7.  
  8. //測(cè)試  
  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";  
  46. } 

#p#

　　3. 寫login.htm頁(yè)面中的js代碼，放在head標(biāo)簽之間

  1. <script type ="text/javascript" > 
  2. window.onload = function (){  
  3. document.getElementById ('txtusername').focus();//用戶名框獲得焦點(diǎn)  
  4.  
  5. if (GetCookie('user_name') != null && GetCookie('user_pwd') != null)//設(shè)置記住密碼的登錄頁(yè)面  
  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()//檢驗(yàn)用戶名是否正確  
  18. {  
  19. var img = document.getElementById ("imgCheck")  
  20. img.src="iamges/blue-loading.gif";//設(shè)置圖片及其可見(jiàn)性  
  21. img.style.visibility = "visible";  
  22.  
  23. var aj = new ajax();//以下為ajax請(qǐng)求  
  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 = "用戶名錯(cuò)誤";  
  40. }  
  41. }  
  42. }  
  43.  
  44.  
  45. function login()//登錄  
  46. {  
  47. if (document.getElementById ("unMessage").innerText == "用戶名錯(cuò)誤")  
  48. {  
  49. alert("你的用戶名錯(cuò)誤");  
  50. }  
  51. else if (document.getElementById ("txtpwd").value == "")  
  52. {  
  53. alert("請(qǐng)輸入密碼");  
  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);//保存密碼一個(gè)月  
  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("密碼錯(cuò)誤");  
  83. }  
  84. }  
  85. }  
  86. }  
  87.  
  88. function reset()//重置  
  89. {  
  90. window.onload();//執(zhí)行窗體登錄事件  
  91. document.getElementById ("txtusername").value="";  
  92. document.getElementById ("txtpwd").value="";  
  93. }  
  94.  
  95. function enterLogin()  
  96. {  
  97. if (event.keyCode==13) //如果按下的是Enter鍵的話，就執(zhí)行登錄語(yǔ)句  
  98. {  
  99. login();  
  100. }  
  101. }  
  102. script> 

#p#

　　4. 新建一名為login.aspx的頁(yè)面，該頁(yè)面作為ajax請(qǐng)求的頁(yè)面，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("存在這個(gè)用戶\n");  
  23. //}  
  24. //else  
  25. //{  
  26. // Response.Write("沒(méi)有此用戶名\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的靜態(tài)頁(yè)面，作為用戶登錄之后的首頁(yè)

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

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

　　6. 在loginIndex.htm頁(yè)面引入loginCookie.js文件

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

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

  1. <script type ="text/javascript" > 
  2. window.onload = function ()  
  3. {  
  4. if(GetCookie('user_name')==null || GetCookie('user_pwd')==null)//如果沒(méi)有登錄,而是直接在網(wǎng)頁(yè)中輸入網(wǎng)址的  
  5. {  
  6. alert('你還沒(méi)有登錄！\n返回到登陸頁(yè)面。');  
  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. 完成并演示

　　客戶端代碼較多，但是交互性很好，演示如下：

　　當(dāng)輸入完用戶名，鼠標(biāo)光標(biāo)離開(kāi)用戶名框之后，系統(tǒng)會(huì)快速檢驗(yàn)用戶名是否合法

 

圖-演示1

 

圖-演示2

　　進(jìn)入首頁(yè)后，出現(xiàn)的窗口，帶有當(dāng)前登錄的用戶和注銷按鈕

 

圖-演示3

　　當(dāng)用戶點(diǎn)擊注銷按鈕時(shí)，會(huì)友情提示你是否真的注銷

 

圖-演示4

　　當(dāng)你不是輸入用戶和密碼登陸，也是直接在瀏覽器地址欄中輸入首頁(yè)網(wǎng)址的時(shí)候，系統(tǒng)會(huì)提示你沒(méi)有登錄，并直接返回到登陸頁(yè)面。

 

圖-演示5

　　當(dāng)用戶輸入了有效的用戶名和密碼，并要求系統(tǒng)記住密碼，用戶下次進(jìn)入到登錄頁(yè)面時(shí)，系統(tǒng)會(huì)把上次記住的用戶名和密碼顯示在輸入框中。。

　　并且這個(gè)時(shí)候直接在瀏覽器的地址欄中輸入首頁(yè)地址，也是能正常訪問(wèn)的。

 

圖-演示7

【編輯推薦】

  1. 程序員突擊--Ajax原理與系統(tǒng)開(kāi)發(fā)
  2. 基于PHP的AJAX技術(shù)的具體應(yīng)用解析
  3. 簡(jiǎn)化開(kāi)發(fā)流程 了解各種Ajax框架的適用性
  4. ASP.NET AJAX前景黯淡？jQuery笑而不語(yǔ)
  5. 盤點(diǎn)ASP.NET Ajax工具箱的10大頂級(jí)控件
責(zé)任編輯：韓亞珊 來(lái)源： 飛諾網(wǎng)
AJAXasp.net.net
相關(guān)推薦

2009-07-22 16:05:34

ASP.NET AJA

2009-07-24 13:41:15

ASP.NET AJA

2009-07-22 16:17:39

ASP.NET AJA

2009-07-22 16:11:43

ASP.NET AJA

2009-07-22 16:25:41

ASP.NET AJA

2009-07-20 17:39:36

WCF服務(wù)ASP.NET AJA

2009-07-20 13:14:25

安裝ASP.NET A

2009-07-20 10:16:13

配置ASP.NET A

2009-07-29 13:50:26

UpdatePanelASP.NET

2009-07-22 15:58:52

ASP.NET AJA

2009-07-31 13:24:43

ASP.NET AJA

2009-07-28 09:02:32

asp.net aja

2009-07-29 17:26:39

ASP.NET頁(yè)面

2009-07-23 14:17:41

2009-07-31 10:23:44

緩存頁(yè)面ASP.NET緩存

2009-07-24 17:43:35

循環(huán)引用ASP.NET AJA

2009-07-24 13:08:40

AJAX技術(shù)ASP.NET

2009-07-27 09:07:04

Profile SerASP.NET AJA

2009-07-21 09:53:55

ASP.NET AJAWCF服務(wù)

2009-07-20 17:59:07

JavaScript調(diào)ASP.NET AJA
點(diǎn)贊
收藏

51CTO技術(shù)棧公眾號(hào)