xmlHttpRequest无刷新验证用户名

现在好多网站上的注册都用了无刷新验证用户名,这种效果咋看感觉很复杂很难实现,其实它里面用到了Ajax中的核心xmlHttpRequest这个类,如果只是单单想实现这个效果,压根就不用引用Ajax.Net中的组件,因为感觉有点大材小用,下面是具体实现这种效果的方法,希望能给初学Ajax的朋友带来一点帮助.



首先建立一个注册与验证的页面xmlHttpRequest.aspxValidate.aspx,因为仅仅是实现无刷新验证用户名,所以我们可以把其它项都撇开,Register.aspx中摆好div跟控件,具体如下:
Code
<body>
    
<form id="form1" runat="server">
        
<div style="width: 100%; float: left; text-indent: 24px; font-size:12px">
            
<div style="float:left">
                您的用户名:
<asp:TextBox ID="txtUserName" runat="server" style="border:1px solid #D4D8D9" onblur="return ValidateUser();"></asp:TextBox>
                
</div> <div id="default" ></div>
        
</div>
    
</form>
</body>

然后我们可以写两个样式用于用户名通过验证或未通过验证的显示样式,未加入图片.
Css
 .Error{ border:1px solid #A2553B;background-color:#FEF1E1;width:140px;float:left;height:18px;line-height:18px;margin-left:24px;color:#4F4F4F;text-indent:12px;}
 .Right
{ border:1px solid #419041;background-color:#EDFCE7;width:140px;float:left;height:18px;line-height:18px;margin-left:24px;color:#4F4F4F;text-indent:12px;}

这两个样式你可以把它放到样式表中也可以将它放到<head></head>当中.
接下来只需敲一段脚本到注册的xmlHttpRequest.aspx页面去.
脚本
<script language="javascript" type="text/javascript">
  function ValidateUser()
  
{
     
//获得用于显示验证是否通过的详细信息
     var obj=document.getElementById("default");
     
//获取用户输入的用户名的值
     var str=document.getElementById("txtUserName").value;
     
//定义一个bool型变量
     var chk=true;
    
if (chk){
       
//因为输入的用户名可能含有中文,所以将其解码
        var username=escape(str);
        
//用于验证用户名的后台页面
        var usrurl="/Validate.aspx?UserName="+username;
        
//获取从验证页面中异步传输过来的值
        var sta=GetResponseText(usrurl);
        
//如果异步传输失败         
        if(sta==false){
            chk
=true;
            obj.className
="d_ok";
            obj.innerHTML
='该会员未能检测,可以尝试注册。';
        }

        
//异步传输成功
        else{
              
//假如传过来的值的开始位置是"regok",这个值是在验证页面Response.Write出来的值,如果是regok则表示验证通过,否则的话就是验证失败.
            if(sta.indexOf("regok")!=-1){
               
//验证通过
                chk=true;
                
//用于显示验证是否通过的详细信息加上刚刚所定义正确时的样式
                obj.className="Right";
                obj.innerHTML
='该会员名可以注册。';
            }
else{
                
//验证未通过
                chk=false;
                
//用于显示验证是否通过的详细信息加上刚刚所定义错误时的样式
                obj.className="Error";
                obj.innerHTML
='该会员名已经被注册。';
            }

        }

    }
else{
        obj.className
="Error";
    }

    
return chk;
  }

  function GetResponseText(url)
  
{
      
//定义一个http_request变量
       var http_request;
        
if (window.XMLHttpRequest) {
                
//对于Mozilla、Netscape、Safari等浏览器,创建XMLHttpRequest对象
                http_request = new XMLHttpRequest();
                
if (http_request.overrideMimeType) {
                        
//如果服务器响应的header不是text/xml,可以调用其它方法修改该header
                        http_request.overrideMimeType('text/xml');
                }

        }
 else if (window.ActiveXObject) {
                
// 对于Internet Explorer浏览器,创建XMLHttpRequest
                try {
                        http_request 
= new ActiveXObject("Msxml2.XMLHTTP");
                }
 catch (e) {
                        
try {
                                http_request 
= new ActiveXObject("Microsoft.XMLHTTP");
                        }
 catch (e) {}
                }

        }

        
//打开验证页面的地址
       http_request.open('GET', url, false);
       http_request.send(
null);
           
if (http_request.readyState == 4)
           
{
               
// 收到完整的服务器响应
                   if (http_request.status == 200{
                          
//HTTP服务器响应的值OK
                             var requestdoc = http_request.ResponseText;
                }

                  
else {
              requestdoc 
= "error";
          }

    }

    
return requestdoc;
  }

</script>
核心代码:
http_request.ResponseText这句是用于获取验证用户名页面中异步传输过来的值..
上面的代码做了详细的注释,这里就不多做解释了..
接下来验证用户名的页面中接收传过来的值进行判断了...
Code
 1    public partial class Validate : System.Web.UI.Page
 2    {
 3        //获取url传过来的值
 4        private string UserName
 5        {
 6            get return Request.QueryString["UserName"].ToString(); }
 7        }

 8        protected void Page_Load(object sender, EventArgs e)
 9        {
10            //这里你可以连至用户表检查是否存在这个用户名,当然如果你用membership中的验证方法会更简洁.
11            if (Server.HtmlEncode(UserName) =="123456")
12                //还记得脚本中的if(sta.indexOf("regok")!=-1)这句吗,regok就是这里的啦..
13                Response.Write("regok");
14            else
15                Response.Write("error");
16        }

17    }
就这样一个简单的无刷新验证用户就完成啦...本机测试已通过.呵呵刚好最近一直在学习控件开发,下篇就将其封装成一个控件.
源码下载

转载于:https://www.cnblogs.com/yangjunwl/articles/1139048.html

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/496868.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

C++学习之路 | PTA乙级—— 1051 复数乘法 (15 分)(精简)

1051 复数乘法 (15 分) 复数可以写成 (ABi) 的常规形式&#xff0c;其中 A 是实部&#xff0c;B 是虚部&#xff0c;i 是虚数单位&#xff0c;满足 i ​2 ​​ −1&#xff1b;也可以写成极坐标下的指数形式 (Re ​(Pi) ​​ )&#xff0c;其中 R 是复数模&#xff0c;P 是辐角…

如何理解和评价机器学习中的表达能力、训练难度和泛化性能

来源&#xff1a; Eric Jang 的个人博客非常感谢王家兴 (Jiaxing Wang) 把这个博客文章翻译成中文。当我在阅读机器学习相关文献的时候&#xff0c; 我经常思考这项工作是否&#xff1a;提高了模型的表达能力&#xff1b;使模型更易于训练&#xff1b; 提高了模型的泛化性能。在…

数据库连接 未将对象引用到实例

原来的连接server.;databasetest;uidsa;pwdsa;解决方案"Data Source数据库地址;Initial Catalog数据库名;User ID用户名;Password密码";不知道原因&#xff0c;谁知道告诉我&#xff01;谢谢&#xff01; 转载于:https://www.cnblogs.com/cangqiong/archive/2008/04/…

C++学习之路 | PTA乙级—— 1052 卖个萌 (20 分)(精简)

1052 卖个萌 (20 分) 萌萌哒表情符号通常由“手”、“眼”、“口”三个主要部分组成。简单起见&#xff0c;我们假设一个表情符号是按下列格式输出的&#xff1a; 左手[右手] 现给出可选用的符号集合&#xff0c;请你按用户的要求输出表情。 输入格式&#xff1a; 输入首先在前…

谷歌公布72位量子比特处理器,吹响量子霸权冲锋号

作者&#xff1a;杨晓凡谷歌量子 AI 实验室今天发布了新的 72 位量子比特的量子处理器 Bristlecone。虽然目前还没有看到具体的实验结果&#xff0c;但这块芯片的未来有很大潜力&#xff0c;很有可能达成量子计算领域内的重要里程碑。谷歌量子 AI 实验室&#xff08;Google Qua…

oracle查询语句大全(oracle 基本命令大全一)

来源&#xff1a;http://www.jb51.net/article/40467.htm 1.create user username identified by password;//建用户名和密码oracle ,oracle 2.grant connect,resource,dba to username;//授权 grant connect,resource,dba,sysdba to username; 3.connect username/password/…

掌控谈话~拔刺(说出你对我的指控)

适用于发生重大错误的时候&#xff0c;尤其是责任都在自己身上的情况。 在出现重大错误的时候&#xff0c;在谈话的开始&#xff0c;就直接讲明错误的具体情况&#xff0c;给对方带来的损失&#xff0c;把问题分析透彻&#xff0c;主动承认自己的各种问题和错误&#xff0c;主…

数组竟然可以这样定义

//这是常规思路: constarr: array[0..1] of Char (A,B); beginShowMessage(arr); {AB}ShowMessage(IntToStr(Length(arr))); {2} end;//没想到可以这样: constarr: array[Boolean] of Char (A,B); beginShowMessage(arr); {AB}ShowMessa…

C++学习之路 | PTA乙级—— 1055 集体照 (25 分)(精简)

1055 集体照 (25 分) 拍集体照时队形很重要&#xff0c;这里对给定的 N 个人 K 排的队形设计排队规则如下&#xff1a; 每排人数为 N/K&#xff08;向下取整&#xff09;&#xff0c;多出来的人全部站在最后一排&#xff1b; 后排所有人的个子都不比前排任何人矮&#xff1b; 每…

AI可以在游戏里称霸,但是解决现实问题太难了

来源&#xff1a;36氪据《大西洋月刊》报道&#xff0c;直到最近&#xff0c;那些能在各类游戏中击败人类冠军的机器&#xff0c;解决现实问题太难了。1997年&#xff0c;为了在国际象棋中击败象棋大师加里卡斯帕罗夫&#xff08;Garry Kasparov&#xff09;&#xff0c;IBM的工…

C++常用字符串分割方法

From&#xff1a;http://www.jb51.net/article/55954.htm 1. 用strtok函数进行字符串分割 原型&#xff1a; char *strtok(char *str, const char *delim); 功能&#xff1a; 分解字符串为一组字符串。 参数说明&#xff1a;str为要分解的字符串&#xff0c;delim为…

C# 根据中文得到全拼

C#源码下载转载于:https://www.cnblogs.com/goldnet/archive/2008/04/25/1170420.html

软件系统架构~软件架构概念

1、系统的架构定义了它的静态结构、动态结构、外部可见行为、质量属性以及应该引导其设计和发展的原则&#xff1b; 2、系统的候选架构是有可能展现出系统所需要的外部可见行为和质量属性的架构。选择最佳方案则是架构师的职责所在&#xff1b; 3、架构元素时系统的组成部分&…

C++学习之路 | PTA乙级—— 1056 组合数的和 (15 分)(精简)

1056 组合数的和 (15 分) 给定 N 个非 0 的个位数字&#xff0c;用其中任意 2 个数字都可以组合成 1 个 2 位的数字。要求所有可能组合出来的 2 位数字的和。例如给定 2、5、8&#xff0c;则可以组合出&#xff1a;25、28、52、58、82、85&#xff0c;它们的和为330。 输入格式…

大话设计模式-策略模式与简单工厂模式

来源&#xff1a;http://blog.csdn.net/wulingmin21/article/details/6712684 策略模式定义了一系列的算法&#xff0c;并将每一个算法封装起来&#xff0c;而且使它们还可以相互替换。策略模式让算法独立于使用它的客户而独立变化。 例如&#xff1a; CashNormal、CashRebate…

任务太多?学着突破重围

任务太多&#xff1f;学着突破重围 周银辉不知算是我的一个缺点&#xff0c;还是大都这样&#xff1a;如果有10个任务一次性地推给我&#xff0c;我完成任务的效率会明显低于一个一个地指派任务。这里的任务&#xff0c;是…

全球知识图谱专家分布、研究流派(附学者名单)

来源&#xff1a; THU数据派概要&#xff1a;在维基百科的官方词条中&#xff1a;知识图谱是Google用于增强其搜索引擎功能的知识库。什么是知识图谱&#xff1f;在维基百科的官方词条中&#xff1a;知识图谱是Google用于增强其搜索引擎功能的知识库。本质上, 知识图谱旨在描述…

软件系统架构~思维导图

#原图 System.out.println("https://www.processon.com/view/link/6194f2740e3e7409b9c2f3df")

C++学习之路 | PTA乙级—— 1057 数零壹 (20 分)(精简)

1057 数零壹 (20 分) 给定一串长度不超过 10 ​5 ​​ 的字符串&#xff0c;本题要求你将其中所有英文字母的序号&#xff08;字母 a-z 对应序号 1-26&#xff0c;不分大小写&#xff09;相加&#xff0c;得到整数 N&#xff0c;然后再分析一下 N 的二进制表示中有多少 0、多少…

创建型、结构型、行为型模式(1)

来源&#xff1a;http://blog.csdn.net/wulingmin21/article/details/6753363 目的 创建型模式 Creational Pattern 结构型模式 Structural Patterns 行为型模式 Behavioral Pattern 概念 创建型模式&#xff0c;就是创建对象的模式&#xff0c;抽象了实例化的过程。…