Ajax实现异步刷新验证用户名是否已存在
由于要做一个注册页面，看到许多网站上都是使用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()方法来终止写入，否则可能会发送一个完整页面过去。
