博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
asp.net ajax检查用户名是否存在代码
阅读量:5949 次
发布时间:2019-06-19

本文共 5684 字,大约阅读时间需要 18 分钟。

原文  

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

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

创建 XMLHttpRequest 对象

所有现代浏览器 (IE7+、Firefox、Chrome、Safari 以及 Opera) 都内建了 XMLHttpRequest 对象。

通过一行简单的 JavaScript 代码,我们就可以创建 XMLHttpRequest 对象。

创建 XMLHttpRequest 对象的语法:

xmlhttp=new XMLHttpRequest();老版本的 Internet Explorer (IE5 和 IE6)使用 ActiveX 对象:
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");提示:在下一章,我们将使用 XMLHttpRequest 对象从服务器取回 XML 信息。

代码如下:

01.<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>  
02.<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
03.<html xmlns="http://www.w3.org/1999/xhtml" >  
04.<head runat="server">  
05.    <title>无标题页</title>  
06.    <script type="text/ "><!--   
07.    var xmlHttp=null;        
08.          
09.        function createXMLHttpRequest()   
10.        {   
11.            if(xmlHttp == null){   
12.                if(window.XMLHttpRequest) {   
13.                    //Mozilla 浏览器   
14.                    xmlHttp = new XMLHttpRequest();   
15.                }else if(window.ActiveXObject) {   
16.                    // IE浏览器   
17.                    try {   
18.                        xmlHttp = new ActiveXObject("Msxml2.XMLHTTP");   
19.                    }   (e) {   
20.                        try {   
21.                            xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");   
22.                        } catch (e) {   
23.                            //alert('创建失败');   
24.                        }   
25.                    }   
26.                }   
27.            }   
28.        }   
29.        function openAjax()   
30.        {     
31.            if( xmlHttp == null)   
32.            {                  
33.                createXMLHttpRequest();    
34.                if( xmlHttp == null)   
35.                {   
36.                    //alert('出错');   
37.                    return ;   
38.                }   
39.            }                          
40.              
41.            var val=document.getElementById('txt').value;              
42.                           
43.            xmlHttp.open("get","VerifyUserNameHandler.ashx?para="+val+"&date="+new Date(),true);               
44.            xmlHttp.onreadystatechange=xmlHttpChange;   
45.            xmlHttp.send(null);   
46.              
47.            document.getElementById('resultSpan').innerText='正在检查,请稍候...';   
48.        }   
49.          
50.        function xmlHttpChange()   
51.        {           
52.            if(xmlHttp.readyState==4)   
53.            {                               
54.                if(xmlHttp.status==200)   
55.                {            
56.                    var res=xmlHttp.responseText;                            
57.                    document.getElementById('resultSpan').innerText=res;   
58.                      
59.                    if(res=='恭喜,用户名可以使用。')   
60.                    {   
61.                        setTimeout("document.getElementById('resultSpan').innerText='';",2000);   
62.                    }   
63.                    else if(res=='抱歉,用户名已被使用。')   
64.                    {   
65.                        document.getElementById('txt').focus();   
66.                    }   
67.                }   
68.            }   
69.        }         
70.// --></script>  
71.</head>  
72.<body>  
73.    <form id="form1" runat="server">          
74.    用户名:<input type="text" id='txt' value="Sandy" οnblur="openAjax();" />  <span id="resultSpan"></span>  
75.    </form>  
76.</body>  
77.</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?

01.<%@ WebHandler Language="C#" class="VerifyUserNameHandler" %>   
02.using System;   
03.using System.Web;   
04.using System.Collections;   
05.using System.Collections.Generic;   
06.public class VerifyUserNameHandler : IHttpHandler {   
07.      
08.    public void ProcessRequest (HttpContext context) {   
09.        //context.Response.ContentType = "text/plain";   
10.        string _name = context.Request.QueryString["para"];   
11.        _name = string.IsNullOrEmpty(_name) ? "" : _name;              
12.        System.Threading.Thread.Sleep(3000);//用线程来模拟查询工作   
13.        string[] Names = new string[] { "Sandy", "阿非", "abc" };//这里用Names数组来代替数据库中的结果集   
14.        if (Array.IndexOf<string>(Names, _name) == -1)   
15.        {   
16.            context.Response.Write("恭喜,用户名可以使用。");   
17.        }   
18.        else  
19.        {   
20.            context.Response.Write("抱歉,用户名已被使用。");   
21.        }   
22.    }   
23.    
24.    public bool IsReusable {   
25.        get {   
26.            return false;   
27.        }   
28.    }   
29.}  
<%@ 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

转载地址:http://nvixx.baihongyu.com/

你可能感兴趣的文章
我的友情链接
查看>>
linux安全---cacti+ntop监控
查看>>
鸟哥的linux私房菜-shell简单学习-1
查看>>
nagios配置监控的一些思路和工作流程
查看>>
通讯组基本管理任务三
查看>>
Centos下基于Hadoop安装Spark(分布式)
查看>>
3D地图的定时高亮和点击事件(基于echarts)
查看>>
mysql开启binlog
查看>>
设置Eclipse编码方式
查看>>
分布式系统唯一ID生成方案汇总【转】
查看>>
并查集hdu1232
查看>>
Mysql 监视工具
查看>>
从前后端分离到GraphQL,携程如何用Node实现?\n
查看>>
Linux Namespace系列(09):利用Namespace创建一个简单可用的容器
查看>>
nginc+memcache
查看>>
php正则匹配utf-8编码的中文汉字
查看>>
linux下crontab实现定时服务详解
查看>>
Numpy中的random模块中的seed方法的作用
查看>>
用java数组模拟登录和注册功能
查看>>
关于jsb中js与c++的相互调用
查看>>