【转】无刷新验证用户名可用性

最新推荐文章于 2019-06-01 10:46:13 发布

weixin_30312659

最新推荐文章于 2019-06-01 10:46:13 发布

阅读量82

点赞数

文章标签： xhtml 数据库 c#

原文链接：http://www.cnblogs.com/fighting-mochou/archive/2012/12/12/2815273.html

版权

在用户注册时，我们经常需要检查用户名是否存在，本文就是实现无刷新验证用户名

打开开发环境VS 2005,新建项目(或打开现有项目),新建一个Web窗体,命名为 Default.aspx

代码如下：

View Code

<%@ 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').innerHTML='正在检查,请稍候...';  
        }  
         
        function xmlHttpChange()  
        {          
            if(xmlHttp.readyState==4)  
            {                              
                if(xmlHttp.status==200)  
                {           
                    var res=xmlHttp.responseText;                           
                    document.getElementById('resultSpan').innerHTML=res;  
                     
                    if(res=='恭喜，用户名可以使用。')  
                    {  
                        setTimeout("document.getElementById('resultSpan').innerHTML='';",2000);  
                    }  
                    else if(res=='抱歉，用户名已被使用。')  
                    {  
                        document.getElementById('txt').focus();  
                    }  
                }  
            }  
        }        
// --></script>  
</head>  
<body>  
    <form id="form1" runat="server">         
    用户名:<input type="text" id='txt' value="Sandy" οnblur="openAjax();" />  <span id="resultSpan"></span>  
    </form>  
</body>  
</html>  
 

 

然后新建一个一般处理程序，命名为 VerifyUserNameHandler.ashx

代码如下：

 

 

[c-sharp] view plaincopy

<%@ 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;  
        }  
    }  
}