制作网站平台,玉器珠宝做网站,温州网页建站模板,网站备案登记表现在好多网站上的注册都用了无刷新验证用户名,这种效果咋看感觉很复杂很难实现,其实它里面用到了Ajax中的核心xmlHttpRequest这个类,如果只是单单想实现这个效果,压根就不用引用Ajax.Net中的组件,因为感觉有点大材小用,下面是具体实现这种效果的方法,希望能给初学Ajax的朋友带来…现在好多网站上的注册都用了无刷新验证用户名,这种效果咋看感觉很复杂很难实现,其实它里面用到了Ajax中的核心xmlHttpRequest这个类,如果只是单单想实现这个效果,压根就不用引用Ajax.Net中的组件,因为感觉有点大材小用,下面是具体实现这种效果的方法,希望能给初学Ajax的朋友带来一点帮助.首先建立一个注册与验证的页面xmlHttpRequest.aspx与Validate.aspx,因为仅仅是实现无刷新验证用户名,所以我们可以把其它项都撇开,Register.aspx中摆好div跟控件,具体如下:Codebody form idform1 runatserver div stylewidth: 100%; float: left; text-indent: 24px; font-size:12px div stylefloat:left 您的用户名asp:TextBox IDtxtUserName runatserver styleborder:1px solid #D4D8D9 onblurreturn ValidateUser();/asp:TextBox /div div iddefault /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 languagejavascript typetext/javascript function ValidateUser() { //获得用于显示验证是否通过的详细信息 var objdocument.getElementById(default); //获取用户输入的用户名的值 var strdocument.getElementById(txtUserName).value; //定义一个bool型变量 var chktrue; if (chk){ //因为输入的用户名可能含有中文,所以将其解码 var usernameescape(str); //用于验证用户名的后台页面 var usrurl/Validate.aspx?UserNameusername; //获取从验证页面中异步传输过来的值 var staGetResponseText(usrurl); //如果异步传输失败 if(stafalse){ chktrue; obj.classNamed_ok; obj.innerHTML该会员未能检测可以尝试注册。; } //异步传输成功 else{ //假如传过来的值的开始位置是regok,这个值是在验证页面Response.Write出来的值,如果是regok则表示验证通过,否则的话就是验证失败. if(sta.indexOf(regok)!-1){ //验证通过 chktrue; //用于显示验证是否通过的详细信息加上刚刚所定义正确时的样式 obj.classNameRight; obj.innerHTML该会员名可以注册。; }else{ //验证未通过 chkfalse; //用于显示验证是否通过的详细信息加上刚刚所定义错误时的样式 obj.classNameError; obj.innerHTML该会员名已经被注册。; } } }else{ obj.classNameError; } 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 else15 Response.Write(error);16 }17 }就这样一个简单的无刷新验证用户就完成啦...本机测试已通过.呵呵刚好最近一直在学习控件开发,下篇就将其封装成一个控件.源码下载转载于:https://www.cnblogs.com/yangjunwl/articles/1139048.html
