XMLHttpRequest实现无刷新验证用户名

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

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

代码如下:

view plaincopy to clipboardprint?
<%@ 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').innerText='正在检查,请稍候...';  
        }  
         
        function xmlHttpChange()  
        {          
            if(xmlHttp.readyState==4)  
            {                              
                if(xmlHttp.status==200)  
                {           
                    var res=xmlHttp.responseText;                           
                    document.getElementById('resultSpan').innerText=res;  
                     
                    if(res=='恭喜,用户名可以使用。')  
                    {  
                        setTimeout("document.getElementById('resultSpan').innerText='';",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> 
<%@ 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').innerText='正在检查,请稍候...';
        }
      
        function xmlHttpChange()
        {       
            if(xmlHttp.readyState==4)
            {                           
                if(xmlHttp.status==200)
                {        
                    var res=xmlHttp.responseText;                        
                    document.getElementById('resultSpan').innerText=res;
                  
                    if(res=='恭喜,用户名可以使用。')
                    {
                        setTimeout("document.getElementById('resultSpan').innerText='';",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

代码如下:

view plaincopy to clipboardprint?
<%@ 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;  
        }  
    }  

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

到这里程序已经完成。

主要是利用了XMLHttpRequest对象采用异步的方式去访问服务器,获得响应后触发定义好的回调函数

本文是XMLHttpRequest对象异步方式对服务器发送Get方式的请求,访问服务器的文件为.ashx

本文开发环境为 VS 2005

 

本文来自CSDN博客,转载请标明出处:http://blog.csdn.net/Sandy945/archive/2009/05/12/4169870.aspx

  • 1
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值