ajax(js)判断文本框输入的用户是否存在

Question

小弟像实现在一个文本框输入用户名.利用ajax判断当前用户是否存在.
代码如下
<input id="tbUsername" type="text" runat="server" class="username" style="width: 180px;" onfocus="setStyle1('LbUserName')" onblur="setStyle2('LbUserName',this.id)" />
该页的 js 代码为
<script type="text/javascript">function setStyle1(x)
{
    //document.getElementById("LbUserName").Visible="false"
    document.getElementById(x).style.display='none'   
}
function setStyle2(x,y)
{
    if(document.getElementById(y).value == "")
    {
        document.getElementById(x).innerHTML = '请输入用户名'
        document.getElementById(x).style.display=''   
        document.getElementById(x).style.borderColor="#00A8FF"
        document.getElementById(x).style.color='blue'         
        document.getElementById(x).style.backgroundColor="#e2f5ff"   
    }
    else
    {
        CheckUserName(document.getElementById(y).value)    }
}var xmlHttp;
    
    function createXmlHttpRequest()
    {
        if(window.XMLHttpRequest)
        {
            xmlHttp=new XMLHttpRequest();
        
            if(xmlHttp.overrideMimeType)
                {
                    xmlHttp.overrideMimeType("text/xml");
                }
        }
        else if(window.ActiveXObject)
        {
            try
            {
                xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");   
            }
            catch(e)
            {
                xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");   
            }
        }
        if(!xmlHttp)
        {
            window.alert("你的浏览器不支持创建XMLhttpRequest对象");
        }
        return xmlHttp;
    }//创建CheckUserName
    
function CheckUserName(name)
{        createXmlHttpRequest();
    
        var url="DisposeEvent.aspx?Name="+name+"&Event=Check";;
    
        xmlHttp.open("post",url,true);
    
xmlHttp.onreadystatechange = CheckUserNameResult;
    
        xmlHttp.send(null);}//创建用户检测的回调函数function CheckUserNameResult()
{
    if(xmlHttp.readyState==4)//服务器响应状态
    {
        if(xmlHttp.status==200)//代码执行状态
        {
            if(xmlHttp.responseText=="false")
            {
                document.getElementById("imgflag").innerHTML = '该用户名可用'
                document.getElementById(x).style.display='' 
                document.getElementById(x).style.borderColor="#FF6600"
                document.getElementById(x).style.color='black'   
        document.getElementById(x).style.backgroundColor="#FFF2E9" 
                
            }
            else
            {
                document.getElementById("imgflag").innerHTML = '该用户名已经存在'
                document.getElementById(x).style.display='' 
                document.getElementById(x).style.borderColor="#FF6600"
                document.getElementById(x).style.color='black'   
        document.getElementById(x).style.backgroundColor="#FFF2E9" 
            }
        }
    }
}
</script>
DisposeEvent.aspx.cs 代码为
         CheckUser cu = new CheckUser();
        cu.UserName = Request.QueryString["Name"].ToString();
        if (!IsPostBack)
        {
            switch (Request.QueryString["Event"])
            {
                //case "Reg":
                //    if (au.AddUserS(Request.QueryString["Name"].ToString(), Request.QueryString["Pass"].ToString()))
                //    {
                //        Response.Write("true");                //        Response.End();
                //    }
                //    else
                //    {
                //        Response.Write("false");                //        Response.End();
                //    }
                //    break;                case "Check":
                    if (cu.CheckUsers())
                    {
                        Response.Write("true");                        Response.End();
                    }
                    else
                    {
                        Response.Write("false");                        Response.End();
                    }
                    break;
                    //case "login":
                    //    if (go.chklogon(Request.QueryString["Name"], Request.QueryString["Pass"]))
                    //    {
                    //        Response.Write("true");                    //        Response.End();
                    //    }
                    //    else
                    //    {
                    //        Response.Write("false");                    //        Response.End();
                    //    }
                    //break;
            }
        }
其中 CheckUser 为一个类其代码为
    public class CheckUser
    {
        private string _UserName;
        public string UserName
        {
            set
            {
                this._UserName = value;
            }
            get
            {
                return this._UserName;
            }
        }        public bool CheckUsers()
        {
            SqlParameter[] Param = new SqlParameter[1];
            DataBase DB = new DataBase();
            Param[0] = DB.MakeInParam("@UserName",SqlDbType.VarChar,50,this.UserName);
            if (DB.GetDataSet("USP_CheckUsers", Param).Tables[0].Rows.Count > 0)
            {
                return true;
            }
            else
            {
                return false;
            }
        }
    } 

Answer 1

楼主你哪出错了，你给这么段代码我看不明白。
还有，建议楼主用用ajaxpro，
使用简单又好用，
像验证用户名是否存在用ajaxpro是比较简单

Answer 2

AJAX  用户名文本框失去焦点的时候 ,check一下!

Answer 3

2个方法：
第一个就是自己写的AJAX；
给你一个例子
<script type="text/javascript">var http_request=false;
function createRequest()
{
  http_request=false;
  if(window.XmlHttpRequest)
  {
    http_request=new XmlHttpRequest();
    if(http_request.overrideMimeType)
    {
      http_request.overrideMimeType("text/xml");
    }
  }
  else
  {
    try
    {
     http_request=new ActiveXObject("Msxml2.XMLHTTP");
    }
    catch(e)
    {
     try
     {
      http_request=new ActiveXObject("Msxml2.XMLHTTP");
     }
     catch(e){}
    }
  }    
}function callserver()
{
  createRequest(); var shopname=document.getElementById('TextBox1').value;
  if(shopname=="" || shopname==null)
  {
   return;
  }
  var url="check_id.aspx?shopname="+escape(shopname);
  http_request.open("GET",url,true);
  http_request.onreadystatechange=updatepage;
  http_request.send(null);
}
function updatepage()
{
  var obj=document.getElementById("dMessage");
  if(http_request.readyState==4)
  {
     if(http_request.status==200)
     {
        var response=http_request.responseText;
        obj.innerHTML=response;
     }
  }
}
</script>
<asp:TextBox ID="TextBox1" runat="server" Width="200px" MaxLength="50" onblur="callserver()">
在check_id.aspx.cs页面写
 if (Request.QueryString["shopname"]!=null)
       {
           string sql = "select * from city_shop where shopname='"+Request.QueryString["shopname"].ToString()+"'";
           SqlDataReader sdr = db.GetDataReader(sql);
           if (sdr.Read())
           {
               Response.Write("此商店名已经被注册");
           }
           else
           {
               Response.Write("此商店名可以使用");
           }
       }
就可以了第2个方法就是用ajaxpro，用这个还是很简单的

Answer 4

  顶下...ajax 还分很多种类别？

Answer 5

function CheckUserNameResult() 
{ 
    if(xmlHttp.readyState==4)//服务器响应状态 
    { 
        if(xmlHttp.status==200)//代码执行状态 
        { 
            if(xmlHttp.responseText=="false") 
            { 
                document.getElementById("imgflag").innerHTML = '该用户名可用' 
                document.getElementById(x).style.display='' 
                document.getElementById(x).style.borderColor="#FF6600" 
                document.getElementById(x).style.color='black'  
                document.getElementById(x).style.backgroundColor="#FFF2E9" 
                
            } 
            else 
            { 
                document.getElementById("imgflag").innerHTML = '该用户名已经存在' 
                document.getElementById(x).style.display='' 
                document.getElementById(x).style.borderColor="#FF6600" 
                document.getElementById(x).style.color='black'  
                document.getElementById(x).style.backgroundColor="#FFF2E9" 
            } 
        } 
    }
} 这段里的x根本没有传过来，可以替换为
function CheckUserNameResult() 
{ 
    if(xmlHttp.readyState==4)//服务器响应状态 
    { 
        if(xmlHttp.status==200)//代码执行状态 
        { 
            if(xmlHttp.responseText=="false") 
            { 
                document.getElementById("imgflag").innerHTML = '该用户名可用'; 
                document.getElementById('LbUserName').style.display=''; 
                document.getElementById('LbUserName').style.borderColor="#FF6600"; 
                document.getElementById('LbUserName').style.color='black';  
                document.getElementById('LbUserName').style.backgroundColor="#FFF2E9"; 
                
            } 
            else 
            { 
                document.getElementById("imgflag").innerHTML = '该用户名已经存在'; 
                document.getElementById('LbUserName').style.display=''; 
                document.getElementById('LbUserName').style.borderColor="#FF6600"; 
                document.getElementById('LbUserName').style.color='black';  
                document.getElementById('LbUserName').style.backgroundColor="#FFF2E9"; 
            } 
        } 
    }
}还有
     case "Check": 
            if (cu.CheckUsers()) 
            { 
                Response.Write("true"); 
                Response.End(); 
            } 
            else 
            { 
                Response.Write("false"); 
                Response.End(); 
            } 
            break; 替换为
     case "Check": 
            if (cu.CheckUsers()) 
            { 
                Response.Clear();
                Response.Write("true"); 
                Response.End(); 
            } 
            else 
            { 
                Response.Clear();
                Response.Write("false"); 
                Response.End(); 
            } 
            break;