Ajax+asp.net无刷新验证用户名的几种方法

最新推荐文章于 2024-04-24 11:53:19 发布
最新推荐文章于 2024-04-24 11:53:19 发布
阅读量1.5k 收藏 3
点赞数
分类专栏： ajax 文章标签： asp.net ajax xmlhttprequest http服务器 textbox function
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/nply2008/article/details/2271114
版权

Ajax+asp.net无刷新验证用户名

注册用户页面代码如下

<script language="javascript" type="text/javascript">
var xmlHttp = false ;
try  {
   xmlHttp = new ActiveXObject("Msxml2.XMLHTTP");
}  catch (e)  {
   try {
     xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
   } catch (e2) {
     xmlHttp = false;
   }
}
if (!xmlHttp && typeof XMLHttpRequest != 'undefined')  {
   xmlHttp = new XMLHttpRequest();
}
function callServer()  {
   var u_name = document.getElementById("tbUserName").value;
   if ((u_name == null) || (u_name == "")) return;
   var url = "CheckUser.aspx?name=" + escape(u_name);
   xmlHttp.open("GET", url, true);
   xmlHttp.onreadystatechange = updatePage;
   xmlHttp.send(null);  
}
function updatePage()  {
   if (xmlHttp.readyState < 4) {
test1.innerHTML="loading...";
   }
   if (xmlHttp.readyState == 4) {
     var response = xmlHttp.responseText;
test1.innerHTML=response;
   }
//   if (test1.innerHTML=="已被注册"){
// document.form1.submit.disabled=true}else{
// document.form1.submit.disabled=false
//   }
}
</script>
<span id="test1"></span>

CheckUser.aspx:
asp.net页面代码如下:
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="CheckUser.aspx.cs" Inherits="CheckUser" %>
<!--这个页里只能有上面的一行.不然不会返回数据-->
CheckUser.aspx.CS:

using *.* ;
public partial class  CheckUser : System.Web.UI.Page
 {
     protected void Page_Load(object sender, EventArgs e)
     {
         string nam = Request.QueryString["name"].ToString();
         string sql = "select id from Users where username='" + nam + "'";
         SqlDataReader dr = DBHelper.ExecuteReader(sql);
         if (dr.Read())
         {
             Response.Write("此用户名已经被注册");
         }
         else
         {
             Response.Write("此用户名可以使用");
         }
         dr.Close();
     }
}

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



首先建立一个注册与验证的页面xmlHttpRequest.aspx与Validate.aspx,因为仅仅是实现无刷新验证用户名,所以我们可以把其它项都撇开,Register.aspx中摆好div跟控件,具体如下:

<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>

然后我们可以写两个样式用于用户名通过验证或未通过验证的显示样式,未加入图片.

.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这句是用于获取验证用户名页面中异步传输过来的值..
上面的代码做了详细的注释,这里就不多做解释了..
接下来验证用户名的页面中接收传过来的值进行判断了...

public partial class  Validate : System.Web.UI.Page
     {
         //获取url传过来的值
         private string UserName
         {
             get { return Request.QueryString["UserName"].ToString(); }
         }
         protected void Page_Load(object sender, EventArgs e)
        {
            //这里你可以连至用户表检查是否存在这个用户名,当然如果你用membership中的验证方法会更简洁.
            if (Server.HtmlEncode(UserName) =="123456")
               //还记得脚本中的if(sta.indexOf("regok")!=-1)这句吗,regok就是这里的啦..
                Response.Write("regok");
            else
                Response.Write("error");
        }
    }



Trackback: http://tb.blog.csdn.net/TrackBack.aspx?PostId=2158935

 
nply2008
关注
  • 0
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 3
    评论
专栏目录
注册用户名检测（无刷新，无提交，填写完毕自动检测数据库是否存在相同用户名。带数据库，可直接使用）
09-27
注册用户名检测，无刷新，无提交，填写完毕自动检测数据库是否存在相同用户名。带数据库，可直接使用。 log.htm ---------- 测试页 y.asp ---------- 检测数据库页 ab.asp ---------- 接收提交的用户名及密码页
利用ajax无刷新验证注册信息
_ACME_的博客
07-11 9403
其大概思路如下: 一.把注册的html页面做好(html+css) 1.不需要form表单，直接用div包着 2.需要四个标签来显示正确、错误的信息显示 3.不用submit提交按钮，直接用button 如图： 二.把ajax做成一个函数，通过传简单的参数可以与服务器进行数据交换. 1.这个ajax函数前面有一篇如何处理利用ajax处理返回数据的文章中详细说明了。 2.ajax函
使用ASP.NET AJAX无刷新验证用户的代码
凤凰涅磐，做不老的程序员
09-17 94
function Login() { var uid = $get("txtUserName").value; var pwd = $get("txtPassword").value; Sys.Services.AuthenticationService.login( uid,pwd,false,null,null, OnLoginCompleted,OnLoginFail...
利用Ajax实现无刷新验证用户名和密码是否正确
09-15
利用Ajax实现无刷新验证用户名和密码是否正确，其中是通小图片来显示结果的。
AJAX+ASP.NET 无刷新检测用户名
03-16
内容索引:.NET源码,Ajax相关,AJAX,无刷新检测用户名　环境下结合AJAX技术编写的用户名检测程序，用于用户注册表单的无刷新用户名检测，用户名是否占用或输入是否正确即时给出提示信息，程序基于+ACCESS数据库，适合...
jQuery+ajax+asp.net获取Json值的方法
11-24
本文实例讲述了jQuery+ajax+asp.net获取Json值的方法。分享给大家供大家参考，具体如下： <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>jQueryAjaxJson取值示例</title> ...
AJAX+ASP.NET无刷新提交读取数据实例
03-16
内容索引:.NET源码,Ajax相关,无刷新提交,Ajax　很不错的一个学习AJAX的实例程序，平台，程序实现每隔一段时间自动从数据库读取数据，而不刷新页面，还有一个无刷新添加的实例，对于初学者绝对实用。
ajaxReg【AJAX+ASP.NET 无刷新检测用户名】
06-23
ajaxReg【AJAX+ASP.NET 无刷新检测用户名】.rarajaxReg【AJAX+ASP.NET 无刷新检测用户名】.rar
ajax+asp.net+mssql无刷新聊天室.rar
04-12
ajax+asp.net+mssql无刷新聊天室.rar
asp.net ajax 无刷新验证注册名
01-26
ajax 注册验证用户名是一般性网站必须要用到的小技术，拿起来就可以用
asp.net+ajax 写的无刷新登录技术（没有使用C#的控件）
03-23
asp.net+ajax 写的无刷新登录技术的例子，没有使用C#的控件，代码很完整，可以直接使用，//声明XMLHttpRequest对象 var xmlHttp;//创建XMLHttpRequest对象 function createXMLHTTP()
使用Ajax检查用户名是否存在（光标移走就提示）（get方法）
NewBeeMu的博客
08-21 439
效果图： 代码： 结构图： index.html： <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Insert title here</title> <script type="text/javascript" src="/day18/js/...
ASP.NET教务平台—学籍管理模块开发与设计
最新发布
大叔_爱编程 的博客
04-24 982
教务平台之学籍管理模块是根据高校教务管理的实际需求，采用微软的.NET Framework2.0作为开发平台，使用SQL Server 2005来设计数据库，以ASP.NET和C#作为前台的开发语言，来完成学生学籍的管理。该设计是基于B/S模式的信息管理系统，主要实现用户管理、学生注册、学籍异动，学生花名册查看和打印等主要功能。同时为了保证后台代码和数据的保护性、密封性，使用了一个中间层分离开前台页面和后台数据的交互操作，使该系统层次清晰，便于开发，维护。通过该系统的应用，可以满足高校教务学籍管理工作的高效
asp.net利用ajax实现无刷新页面
05-28
ASP.NET可以利用Ajax技术实现无刷新页面。Ajax是一种异步的JavaScript和XML通信技术，它可以在不刷新整个页面的情况下，向服务器提交或获取数据，并将返回的数据局部地更新到页面上。在ASP.NET中，可以通过以下步骤来实现无刷新页面： 1. 引入jQuery库。 在ASP.NET页面中，需要通过<script>标签引入jQuery库，例如： ``` <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script> ``` 2. 编写JavaScript代码。 通过jQuery库提供的$.ajax()方法，可以向服务器提交或获取数据，并在成功返回数据后更新页面。例如，下面的代码用于向服务器提交数据： ``` $.ajax({ type: "POST", url: "Handler.ashx", data: { name: "张三", age: 18 }, success: function (data) { $("#result").html(data); } }); ``` 其中，type表示提交数据的方式，可以是POST或GET；url表示提交数据的目标地址；data表示提交的数据，可以是JSON对象、字符串或FormData对象；success表示成功返回数据后的回调函数，data参数表示服务器返回的数据。 3. 编写服务器端代码。 在ASP.NET中，可以通过Generic Handler（通用处理程序）来处理Ajax请求。Generic Handler是一种不包含HTML标记的ASP.NET页面，可以处理各种类型的请求。例如，下面的代码用于处理上面的Ajax请求： ``` public class Handler : IHttpHandler { public void ProcessRequest(HttpContext context) { string name = context.Request.Form["name"]; int age = int.Parse(context.Request.Form["age"]); // 处理请求，返回数据 context.Response.Write("提交成功！"); } public bool IsReusable { get { return false; } } } ``` 在该代码中，通过Request.Form[]属性获取提交的数据，处理请求后通过Response.Write()方法返回数据。 通过以上步骤，就可以在ASP.NET中利用Ajax技术实现无刷新页面了。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 3
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值