使用者注冊時，我們經常需要檢查使用者名是否存在，本文就是實作無重新整理驗證使用者名
打開開發環境VS 2005,建立項目(或打開現有項目),建立一個Web窗體,命名為 Default.aspx
建立 XMLHttpRequest 對象
所有現代浏覽器 (IE7+、Firefox、Chrome、Safari 以及 Opera) 都内建了 XMLHttpRequest 對象。
通過一行簡單的 JavaScript 代碼，我們就可以建立 XMLHttpRequest 對象。
建立 XMLHttpRequest 對象的文法：
xmlhttp=new XMLHttpRequest();老版本的 Internet Explorer （IE5 和 IE6）使用 ActiveX 對象：
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");提示：在下一章，我們将使用 XMLHttpRequest 對象從伺服器取回 XML 資訊。
代碼如下：
01.<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %> 02.<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 03.<html xmlns="http://www.w3.org/1999/xhtml" > 04.<head runat="server"> 05. <title>無标題頁</title> 07. var xmlHttp=null; 08. 09. function createXMLHttpRequest() 10. { 11. if(xmlHttp == null){ 12. if(window.XMLHttpRequest) { 13. //Mozilla 浏覽器 14. xmlHttp = new XMLHttpRequest(); 15. }else if(window.ActiveXObject) { 16. // IE浏覽器 17. try { 18. xmlHttp = new ActiveXObject("Msxml2.XMLHTTP"); 20. try { 21. xmlHttp = new ActiveXObject("Microsoft.XMLHTTP"); 22. } catch (e) { 23. //alert('建立失敗'); 24. } 25. } 26. } 27. } 28. } 29. function openAjax() 30. { 31. if( xmlHttp == null) 32. { 33. createXMLHttpRequest(); 34. if( xmlHttp == null) 35. { 36. //alert('出錯'); 37. return ; 38. } 39. } 40. 41. var val=document.getElementById('txt').value; 42. 43. xmlHttp.open("get","VerifyUserNameHandler.ashx?para="+val+"&date="+new Date(),true); 44. xmlHttp.onreadystatechange=xmlHttpChange; 45. xmlHttp.send(null); 46. 47. document.getElementById('resultSpan').innerText='正在檢查,請稍候...'; 48. } 49. 50. function xmlHttpChange() 51. { 52. if(xmlHttp.readyState==4) 53. { 54. if(xmlHttp.status==200) 55. { 56. var res=xmlHttp.responseText; 57. document.getElementById('resultSpan').innerText=res; 58. 59. if(res=='恭喜，使用者名可以使用。') 60. { 61. setTimeout("document.getElementById('resultSpan').innerText='';",2000); 62. } 63. else if(res=='抱歉，使用者名已被使用。') 64. { 65. document.getElementById('txt').focus(); 66. } 67. } 68. } 69. } 70.// --></script> 71.</head> 72.<body> 73. <form id="form1" runat="server"> 74. 使用者名:<input type="text" id='txt' value="Sandy" onblur="openAjax();" /> <span id="resultSpan"></span> 75. </form> 76.</body> 77.</html> <%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %> <!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>無标題頁</title> <script type="text/javascript"><!-- var xmlHttp=null; function createXMLHttpRequest() { if(xmlHttp == null){ if(window.XMLHttpRequest) { //Mozilla 浏覽器 xmlHttp = new XMLHttpRequest(); }else if(window.ActiveXObject) { // IE浏覽器 try { xmlHttp = new ActiveXObject("Msxml2.XMLHTTP"); } catch (e) { try { xmlHttp = new ActiveXObject("Microsoft.XMLHTTP"); } catch (e) { //alert('建立失敗'); } } } } } function openAjax() { if( xmlHttp == null) { createXMLHttpRequest(); if( xmlHttp == null) { //alert('出錯'); return ; } var val=document.getElementById('txt').value; xmlHttp.open("get","VerifyUserNameHandler.ashx?para="+val+"&date="+new Date(),true); xmlHttp.onreadystatechange=xmlHttpChange; xmlHttp.send(null); document.getElementById('resultSpan').innerText='正在檢查,請稍候...'; function xmlHttpChange() { if(xmlHttp.readyState==4) { if(xmlHttp.status==200) { var res=xmlHttp.responseText; document.getElementById('resultSpan').innerText=res; if(res=='恭喜，使用者名可以使用。') { setTimeout("document.getElementById('resultSpan').innerText='';",2000); else if(res=='抱歉，使用者名已被使用。') document.getElementById('txt').focus(); } // --></script> </head> <body> <form id="form1" runat="server"> 使用者名:<input type="text" id='txt' value="Sandy" onblur="openAjax();" /> <span id="resultSpan"></span> </form> </body> </html>
然後建立一個一般處理程式，命名為 VerifyUserNameHandler.ashx
view plaincopy to clipboardprint? 01.<%@ WebHandler Language="C#" class="VerifyUserNameHandler" %> 02.using System; 03.using System.Web; 04.using System.Collections; 05.using System.Collections.Generic; 06.public class VerifyUserNameHandler : IHttpHandler { 07. 08. public void ProcessRequest (HttpContext context) { 09. //context.Response.ContentType = "text/plain"; 10. string _name = context.Request.QueryString["para"]; 11. _name = string.IsNullOrEmpty(_name) ? "" : _name; 13. string[] Names = new string[] { "Sandy", "阿非", "abc" };//這裡用Names數組來代替資料庫中的結果集 14. if (Array.IndexOf<string>(Names, _name) == -1) 15. { 16. context.Response.Write("恭喜，使用者名可以使用。"); 17. } 18. else 19. { 20. context.Response.Write("抱歉，使用者名已被使用。"); 21. } 22. } 23. 24. public bool IsReusable { 25. get { 26. return false; 27. } 28. } 29.} <%@ WebHandler Language="C#" class="VerifyUserNameHandler" %> using System; using System.Web; using System.Collections; using System.Collections.Generic; public class VerifyUserNameHandler : IHttpHandler { public void ProcessRequest (HttpContext context) { //context.Response.ContentType = "text/plain"; string _name = context.Request.QueryString["para"]; _name = string.IsNullOrEmpty(_name) ? "" : _name; System.Threading.Thread.Sleep(3000);//用線程來模拟資料庫查詢工作 string[] Names = new string[] { "Sandy", "阿非", "abc" };//這裡用Names數組來代替資料庫中的結果集 if (Array.IndexOf<string>(Names, _name) == -1) context.Response.Write("恭喜，使用者名可以使用。"); else context.Response.Write("抱歉，使用者名已被使用。"); } public bool IsReusable { get { return false; }
到這裡程式已經完成。
主要是利用了XMLHttpRequest對象采用異步的方式去通路伺服器，獲得響應後觸發定義好的回調函數
本文是XMLHttpRequest對象異步方式對伺服器發送Get方式的請求，通路伺服器的檔案為.ashx
![七牛雲-C#SDK-上傳-前期準備[圖]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)