由於要做一個注冊頁面，看到許多網站上都是使用Ajax異步刷新驗證用戶名是否可用的，所以自己也動手做一個小實例
都是簡單的實例，所以直接發代碼
靜態頁面Ajax.html
1 <html> 2 <head> 3 <title>Ajax</title> 4 <script type="text/javascript"> 5 function loadXMLDoc() { 6 if (document.getElementById("account").value == "") { 7 document.getElementById("accDiv").innerHTML = "用戶名不能為空"; 8 return; 9 } 10 var xmlHttp; 11 if(window.XMLHttpRequest) { // code for IE7+ 12 xmlHttp = new XMLHttpRequest(); 13 } 14 else { // code for IE5/IE6 15 xmlHttp = new ActiveXObject("Microsoft.XMLHTTP"); 16 } 17 18 xmlHttp.onreadystatechange = function () { 19 if (xmlHttp.readyState == 4 && xmlHttp.status == 200) { 20 //document.getElementById("myDiv").innerHTML=xmlHttp.responseText; 21 if (xmlHttp.responseText == "true") { 22 document.getElementById("accDiv").innerHTML = "用戶名不可用"; 23 } 24 else { 25 document.getElementById("accDiv").innerHTML = "用戶名可用"; 26 } 27 } 28 } 29 var a = document.getElementById("account").value; 30 // get 31 xmlHttp.open("GET", "validate.aspx?account=" + a + "&random=" + Math.random, true); 32 xmlHttp.send(); 33 } 34 function delData() { 35 document.getElementById("account").value = ""; 36 document.getElementById("accDiv").innerHTML = ""; 37 } 38 </script> 39 </head> 40 <body> 41 <h3>ajax</h3> 42 <table> 43 <tr> 44 <td>賬號：</td><td><input id="account" type="text" onblur="loadXMLDoc();" onfocus="delData();"/></td><td><div id="accDiv"></div></td> 45 </tr> 46 <tr> 47 <td>密碼：</td><td><input id="passwd" type="password" /></td> 48 </tr> 49 <tr> 50 <td>確認密碼：</td><td><input id="vPasswd" type="password" /></td> 51 </tr> 52 <tr> 53 <td>姓名：</td><td><input id="name" type="text" /></td> 54 </tr> 55 </table> 56 57 </body> 58 </html>
在賬號輸入框失去焦點時調用函數
訪問服務器使用的是Get方法，所以在參數處使用了附加隨機碼來避免緩存。
驗證頁面validate.aspx后台代碼
1 using System; 2 using System.Collections.Generic; 3 using System.Linq; 4 using System.Web; 5 using System.Web.UI; 6 using System.Web.UI.WebControls; 7 using System.Configuration; 8 using System.Data.Sql; 9 using System.Data.SqlClient; 10 11 public partial class Ajax_validate_validate : System.Web.UI.Page 12 { 13 public SqlConnection conn; 14 15 protected void Page_Load(object sender, EventArgs e) 16 { 17 Response.Clear(); 18 if (Exists(Request.QueryString["account"])) 19 Response.Write("true"); 20 else 21 Response.Write("false"); 22 Response.End(); 23 } 24 /// <summary> 25 /// 獲取數據庫連接 26 /// </summary> 27 /// <returns></returns> 28 protected SqlConnection GetConnection() 29 { 30 string str = ConfigurationManager.ConnectionStrings["ConnectionString"].ConnectionString; 31 conn = new SqlConnection(str); 32 return conn; 33 } 34 protected bool Exists(string account) 35 { 36 using (GetConnection()) 37 { 38 try 39 { 40 conn.Open(); 41 string sqlStr = "select count(*) from userinfo where account='" + account + "'"; 42 SqlCommand cmd = new SqlCommand(sqlStr, conn); 43 int row = Convert.ToInt32(cmd.ExecuteScalar()); 44 if (row > 0) 45 return true; 46 else 47 return false; 48 } 49 catch (Exception e) 50 { 51 throw e; 52 } 53 finally 54 { 55 conn.Close(); 56 } 57 } 58 } 59 }
在后台中驗證用戶名是否已經存在於數據庫中，返回真或者假
運行結果
數據庫很簡單，只建了一張表userinfo，有3個字段：account、passwd、name
注意：在后台往請求頁面寫數據時，當寫完要發送的數據之后，需要調用Response.end()方法來終止寫入，否則可能會發送一個完整頁面過去。