Ajax+asp.net无刷新验证用户名
注册用户页面代码如下
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:
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跟控件,具体如下:
<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>
然后我们可以写两个样式用于用户名通过验证或未通过验证的显示样式,未加入图片.
.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页面去.
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这句是用于获取验证用户名页面中异步传输过来的值..
上面的代码做了详细的注释,这里就不多做解释了..
接下来验证用户名的页面中接收传过来的值进行判断了...
...{
//获取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");
}
}
Ajax+asp.net无刷新验证用户名相关推荐
- Ajax+asp.net无刷新验证用户名的几种方法
Ajax+asp.net无刷新验证用户名 注册用户页面代码如下 <script language="javascript" type="text/javascrip ...
- AJAX(三)--实例无刷新验证用户名是否存在
我们知道在注册淘宝账户时,当我们注册的账户名与其他人同名的时候,系统会自动的给出提示,并且给出推荐使用的账户名,并没有完全的刷新整个页面,而是悄悄的向服务器端发送请求进行验证,让我们感觉很舒服,这就是 ...
- xmlHttpRequest无刷新验证用户名
现在好多网站上的注册都用了无刷新验证用户名,这种效果咋看感觉很复杂很难实现,其实它里面用到了Ajax中的核心xmlHttpRequest这个类,如果只是单单想实现这个效果,压根就不用引用Ajax.Ne ...
- 【转】无刷新验证用户名可用性
在用户注册时,我们经常需要检查用户名是否存在,本文就是实现无刷新验证用户名 打开开发环境VS 2005,新建项目(或打开现有项目),新建一个Web窗体,命名为 Default.aspx 代码如下: V ...
- XMLHttpRequest实现无刷新验证用户名
在用户注册时,我们经常需要检查用户名是否存在,本文就是实现无刷新验证用户名 打开开发环境VS 2005,新建项目(或打开现有项目),新建一个Web窗体,命名为 Default.aspx 代码如下: & ...
- JQuery Ajax后台无刷新验证用户名重复,前台验证两次密码一致,后台创建并验证 验证码
写在前面 写web 的人,我想最先要解决的就是注册登录的界面了,一个小小的界面却包含着各种基本的知识,让我这个新手摸了一天. 效果图 知识 1.bootstrap渲染表单 2.JQuery ajax验 ...
- Ajax+Asp.Net无刷新分页
1.新建解决方案,并建立四个项目BLL,DAL,Model,PagerTest,如图所示: 2.Model代码 using System; using System.Collections.Gener ...
- AJAX+JavaScript无刷新检查用户名
AJAX+JavaScript无刷新检查用户名是否可用2009-04-20 16:26 JavaScript 和 Ajax 代码 <script language="javascr ...
- ajax用户名注册自动刷新,ajax+jsp实现 无刷新页面下注册时检测用户名是否已存在...
当前位置:编程学习 > JAVA >> ajax+jsp实现 无刷新页面下注册时检测用户名是否已存在 如题:ajax+jsp实现 无刷新页面下注册时检测用户名是否已存在 求大神们赐教 ...
最新文章
- UI设计学习的对比原则怎么运用?
- R语言使用ggplot2包使用geom_density()函数绘制基础密度图实战(density plot)
- grafana 画拓扑图 能不能_Grafana之ImageIt实现动态可感知网络拓扑(第十七篇)
- FlinkX 如何读取和写入 Clickhouse?
- linux crontab工作日志,linux使用crontab执行定时任务
- Git 与 Github 基础(二)—— Git for Windows
- 第 39 级台阶 蓝桥杯
- NSAssert与assert断言
- java mybatis缓存机制_mybatis缓存机制与陷阱
- Jquery 判断IE
- 二分图最大权匹配:Kuhn-Munkres算法
- NLP ---文本情感分析
- 数模学习(模糊数学篇)——模糊聚类(python实现)
- matlab实例一之Forward Collision Warning Using Sensor Fusion (视觉和毫米波雷达)
- Codeforces300D Painting Square
- JIRA 6.3.6 详细安装图解
- Oracle项目管理系统之项目投议标
- C++、高响应比优先算法
- Matlab2014b GUI封装exe方法
- 一阶微分方程的物理意义_微分方程建模课堂讨论之一_利用导数的几何及物理意义建模....