上面，我们完成了在Validation类型中增加nameAvailable()方法，它通过发送异步Ajax请求来检查用户名是否可用，在检查的过程中，在输入框右边动态地加载图片来表示检查中，当检查结束加载相应的图片表示用户是否可用。
接下来，我们将添加focus和blur事件，当文本框得到焦点时触发focus事件，提示输入信息的要求，当文本框失去焦点时触发blur事件，发生实时Ajax请求，例如：检查用户名是否可用。
由于，事件方法应该是Field类型公开的方法，确实我们也不想为每个Field对象都定义自己事件方法，所以我们通过原型链的方式公开事件方法focus()和blur()，具体实现如下：
// The prototype of Field type. Field.prototype = { // Public method. attach: function(event) { // The object refers to Field object. var obj = this; // When field lost focus, then invoked the validate method. if (event == "blur") { obj.field.bind("blur", function() { return obj.validate(); }); } // When field got focus, then invoked the hint method. if (event == "focus") { obj.field.bind("focus", function() { return obj.hint(); }); } } }
我们给Field的原型链添加了事件响应事件blur和focus，当失去焦点时触发Field的vlidate()方法，获得焦点时触发Field的hint()方法。
数据表设计
前面，我们提到注册表单的用户名可用性检查设计是通过发送Ajax请求，然后到数据库中查询用户名是否存在来确定用户名的可用性。
接下来，我们添加数据库表jk_user用来存储用户信息，它包括用户名、密码（注意：这里没有考虑隐私信息的加密存储）、显示名称和注册日期等，具体设计如下：
-- ============================================= CREATE TABLE [dbo].[jk_users]( -- This is the reference to Users table, it is primary key. [ID] [bigint] IDENTITY(1,1) NOT NULL, [user_login] [varchar](60) NOT NULL, [user_pass] [varchar](64) NOT NULL, [user_nicename] [varchar](50) NOT NULL, [user_email] [varchar](100) NOT NULL, [user_url] [varchar](100) NOT NULL, -- This field get the default from function GETDATE(). [user_registered] [datetime] NOT NULL CONSTRAINT [DF_jk_users_user_registered] DEFAULT (getdate()), [user_activation_key] [varchar](60) NOT NULL, [user_status] [int] NOT NULL CONSTRAINT [DF_jk_users_user_status] DEFAULT ((0)), [display_name] [varchar](250) NOT NULL ) ajaxform2
图4数据表设计
服务端设计
前面，我们实现了用户表的设计，由于注册表单通过发送Ajax请求访问服务器端公开的方法，然后通过该公开方法访问数据库。
接下来，我们定义用户表（jk_user）的数据库访问对象（DAO），它包含方法IsAvailableUser()用来检查用户名是否可用，具体的实现如下：
/// <summary> /// The user dao manager. /// </summary> public class UserManager { private const string Query = "SELECT user_login, user_email, user_url FROM jk_users WHERE (user_login = @user_login)"; /// <summary> /// Initializes a new instance of the <see cref="UserManager"/> class. /// </summary> public UserManager() { } /// <summary> /// Determines whether the user is available or not, with specified username. /// </summary> /// <param>Name of the user.</param> /// <returns> /// <c>true</c> if is available user; otherwise, <c>false</c>. /// </returns> public bool IsAvailableUser(string userName) { using (var con = new SqlConnection(ConfigurationManager.ConnectionStrings["SQLCONN2"].ToString())) using (var com = new SqlCommand(Query, con)) { // Pass user_login parameter to sql statement. com.Parameters.Add("@user_login", SqlDbType.VarChar).Value = userName; com.Connection.Open(); return !com.ExecuteReader().HasRows; } } }
现在，我们完成了数据库访问对象UserManager，它包含方法IsAvailableUser()来检查用户是否可用，如果该用户名已经存在返回false，反之返回true。
接下来，我们需要实现服务器端类UserService，让客户端通过它来调用UserManager中的IsAvailableUser()方法，首先我们创建一般处理程序（ASHX文件），实现ProcessRequest()方法，具体实现如下：
/// <summary> /// The user availability check service. /// </summary> public class UserService : IHttpHandler { public void ProcessRequest(HttpContext context) { // Response json type. context.Response.ContentType = "application/json"; context.Response.Charset = "utf-8"; var manager = new UserManager(); string userName = context.Request.QueryString["username"]; // Checks the username empty or not. if (string.IsNullOrEmpty(userName)) { throw new Exception("Username can't be empty"); } // Invokes the IsAvailableUser method. var result = manager.IsAvailableUser(userName); // Serializes data to json format. var json = new DataContractJsonSerializer(result.GetType()); json.WriteObject(context.Response.OutputStream, result); } // Whether can resuable by other handler or not. public bool IsReusable { get { return true; } } }