大家注意到UserService类实现了IHttpHandler接口，该接口包含一个方法ProcessRequest()方法和一个属性IsReusable；ProcessRequest()方法用于处理入站的Http请求，在默认情况下，UserService类把Response内容类型定义为application/json，这样我们就可以把数据通过JSON格式进行传输；IsReusable属性表示相同的处理程序是否可以用于多个请求，这里我们设置为true，那么处理程序可以用于多个请求。
前端实现
注册表单在检查用户名时会在输入框的右边动态地加载图片，这里我们使用CSS Sprite技巧实现图片的动态加载。
当页面加载时，不是加载每个单独图片，而是一次加载整个组合图片。这是一个了不起的改进，因为我们只需发送一个HTTP请求获取组合图片就OK了，它大大减少了HTTP请求的次数，减轻服务器压力，同时缩短了悬停加载图片所需要的时间延迟，使效果更流畅，不会停顿。
这里，我们使用可以一个在线的工具SpritePad设计组合图片和生成相应的CSS代码。
图5组合图片
上面，我们已经准备好组合图片了，接下来我们添加CSS代码动态加载“正确”和“出错”图片，具体实现如下：
/*CSS Sprite*/ /*Loads tick picture*/ .tick { width: 17px; height: 17px; margin: 6px 0 0; float: right; background: url(../images/tipicon.png); background-position: 0px -32px; display: block; /*text-decoration: none; vertical-align:middle;*/ } /*Loads error picture*/ span.error { width: 17px; height: 17px; margin: 6px 0 0; float: right; background: url(../images/tipicon.png); background-position: 0px -15px; display: block; /*text-decoration: none; vertical-align:middle;*/ }
接着，我们在nameAvailable()方法中的Ajax方法添加文件“UserService.ashx”请求，并传递用户名给服务器；在数据库中查询用户名是否已经存在，存在返回“false”，否则返回“true”。
// Sends ajax request to check the name is available or not. $.ajax({ type: "GET", url: "UserService.ashx", data: dataString, success: function(data) { // When the checking completed, then loaded corresponding css style. $('.availability_status').ajaxComplete(function(event, request, settings) { if (data == false) { $('.availability_status').html(''); $('.availability_status').removeClass('tick'); $('.availability_status').addClass('error'); return true; } else { $('.availability_status').html(''); $('.availability_status').removeClass('error'); $('.availability_status').addClass('tick'); return false; } }); } });
最后，我们在注册表单中添加调用自定义验证控件的jQuery代码，具体实现如下：
<script type="text/javascript"> // Sets display image size. pic = new Image(16, 16); pic.src = "https://www.jb51.net/loader.gif"; $(function() { // jQuery DOM ready function. // Get the form object. var signUpForm = $("#signup-form"); // Invokes the validation method. signUpForm.validation(); }); </script>
图6用户注册界面
如果大家还想深入学习，可以点击两个精彩的专题：jquery表单验证大全 JavaScript表单验证大全
本文主要介绍了Ajax注册表单的设计，通过发送Ajax请求方式实时地检查用户名的可用性，并且使用了自定义的表单验证插件检查输入信息的正确性。
您可能感兴趣的文章: