利用Ajax检测帐户是否存在.
2008-06-30 19:37
344 查看
为不刷新页面,检测输入的用户名是否已经注册,示例如下:
脚本如下:
2、注册页面Default.aspx(无后台代码)
3、验证用户帐户是否存在数据库Demo.aspx.cs(无前台代码)
脚本如下:
/*-------------------------------------- Name:AJAXRequest Version:0.8.06 Author:xujiwei E-mail:vipxjw@163.com Website:http://www.xujiwei.cn/ License: http://www.gnu.org/licenses/gpl.htmlGPL Copyright(c)2006-2008,xujiwei,AllRightsReserved AjaxRequestDeveoperManual: http://ajax.xujiwei.cn/ --------------------------------------*/ /** *AJAXRequest类 *@author xujiwei *@constructor *@class AJAXRequest *@param {Object} [initObj] 初始化参数对象 *@param {String} [initObj.url=""] 要请求的Url *@param {String} [initObj.content=""] 要发送的内容 *@param {String} [initObj.method="GET"] 请求方法,GET或 POST *@param {String} [initObj.charset] 发送数据时使 用的编码 *@param {Boolean} [initObj.async=true] 请求类型,true为异 步,false为同步 *@param {Number} [initObj.timeout=3600000] 请求超时时间,单位为 毫秒 *@param {function} [initObj.ontimeout] 请求超时时的 回调函数 *@param {function} [initObj.onrequeststart] 请求开始时的 回调函数 *@param {function} [initObj.onrequestend] 请求结束时的回调函数 *@param {function} [initObj.oncomplete] 请求正确完成时的回调 函数 *@param {function} [initObj.onexception] 请求发生异常时的回调 函数 *@property {String} url 要请求的Url *@property {String} content 要发送的内容 *@property {String} method 请求方法,GET或POST *@property {String} charset 发送数据时使用的编码 *@property {Boolean} async 请求类型,true为异步,false为同步 *@property {Number} timeout 请求超时时间,单位为毫秒 *@property {function} ontimeout 请求超时时的回调函数 *@property {function} onrequeststart 请求开始时的回调函数 *@property {function} onrequestend 请求结束时的回调函数 *@property {function} oncomplete 请求正确完成时的回调函数 *@property {function} onexception 请求发生异常时的回调函数 *@example *varajax1=newAJAXRequest(); *varajax2=newAJAXRequest({ * url:"getdata.asp", //从getdata.asp获取数据 * method:"GET", //GET方式 * oncomplete:function(obj){ * alert(obj.responesText); //显示getdata.asp输出的内容 *}); */ functionAJAXRequest(){ varxmlPool=[],objPool=[],AJAX=this,ac=arguments.length,av=arguments; varxmlVersion=["MSXML2.XMLHTTP","Microsoft.XMLHTTP"]; varec=emptyFun=function(){}; av=ac>0?typeof(av[0])=="object"?av[0]:{}:{}; varencode=$GEC(av.charset+""); varprop= ['url','content','method','async','timeout','ontimeout','onrequeststart','onrequestend','onc omplete','onexception']; vardefval=['','','GET',true,3600000,ec,ec,ec,ec,ec],l=prop.length; while(l--){this[prop[l]]=getp(av[prop[l]],defval[l]);} if(!getObj())returnfalse; functiongetp(p,d){returnp!=undefined?p:d;} functiongetObj(){ vari,j,tmpObj; for(i=0,j=xmlPool.length;i<j;i++)if(xmlPool[i].readyState==0||xmlPool [i].readyState==4)returnxmlPool[i]; try{tmpObj=newXMLHttpRequest;} catch(e){ for(i=0,j=xmlVersion.length;i<j;i++){ try{tmpObj=newActiveXObject(xmlVersion[i]);}catch(e2){ continue;} break; } } if(!tmpObj)returnfalse; else{xmlPool[xmlPool.length]=tmpObj;returnxmlPool[xmlPool.length-1];} } function$(id){returndocument.getElementById(id);} function$N(d){varn=d*1;return(isNaN(n)?0:n);} function$VO(v){return(typeof(v)=="string"?(v=$(v))?v:false:v);} function$GID(){return((newDate)*1);} function$SOP(id,ct){objPool[id+""]=ct;} function$LOP(id){return(objPool[id+""]);} function$SRP(f,r,p){return(function(s){s=f(s);for(vari=0;i<r.length;i++) s=s.replace(r[i],p[i]);return(s);});} function$GEC(cs){ if(cs.toUpperCase()=="UTF-8")return(encodeURIComponent); elsereturn($SRP(escape,[//+/g],["%2B"])); } function$ST(obj,text){ varnn=obj.nodeName.toUpperCase(); if("INPUT|TEXTAREA|OPTION".indexOf(nn)>-1)obj.value=text; elsetry{obj.innerHTML=text;}catch(e){}; } function$CB(cb){ if(typeof(cb)=="function")returncb; else{ cb=$VO(cb); if(cb)return(function(obj){$ST(cb,obj.responseText);}); elsereturnthis.oncomplete;} } function$GP(p,v,d,f){ vari=0; while(i<v.length){p[i]=v[i]?f[i]?f[i](v[i]):v[i]:d[i];i++;} while(i<d.length){p[i]=d[i];i++;} } functionsend(purl,pc,pcbf,pm,pa){ varct,ctf=false,xmlObj=getObj(),ac=arguments.length,av=arguments; if(!xmlObj)returnfalse; varpmp=pm.toUpperCase()=="POST"?true:false; if(!pm||!purl)returnfalse; varev={url:purl,content:pc,method:pm}; purl+=(purl.indexOf("?")>-1?"&":"?")+"timestamp="+$GID(); xmlObj.open(pm,purl,pa); AJAX.onrequeststart(ev); if(pmp)xmlObj.setRequestHeader("Content-Type","application/x-www-form- urlencoded"); ct=setTimeout(function(){ctf=true;xmlObj.abort();},AJAX.timeout); varrc=function(){ if(ctf){AJAX.ontimeout(ev);AJAX.onrequestend(ev);} elseif(xmlObj.readyState==4){ ev.status=xmlObj.status; try{clearTimeout(ct);}catch(e){}; try{if(xmlObj.status==200)pcbf(xmlObj);else AJAX.onexception(ev);} catch(e){AJAX.onexception(ev);} AJAX.onrequestend(ev); } } xmlObj.onreadystatechange=rc; if(pmp)xmlObj.send(pc);elsexmlObj.send(""); if(pa==false)rc(); returntrue; } /** *设置发送请求时使用的编码 *@param {String} charset 编码名称,UTF-8或GB2312,或者其他 *@example *varajax=newAJAXRequest(); *ajax.setcharset("GB2312"); */ this.setcharset=function(cs){encode=$GEC(cs);} /** *使用GET方法请求指定的Url *@param {String} [url] 要请求的Url *@param {function|Object|String} [oncomplete] 正确返回时的回调函数 ,或者要更新的对象,或者要更新对象的ID *@example *varajax=newAJAXRequest(); *ajax.get("getdata.asp",function(obj){ * alert(obj.responseText); //显示从getdata.asp得到的数据 *}); *ajax.get("getdata.asp","txtData"); //将从getdata.asp得到的数据更新到ID为 txtData的HTML元素 */ this.get=function(){ varp=[],av=arguments; $GP(p,av,[this.url,this.oncomplete],[null,$CB]); if(!p[0]&&!p[1])returnfalse; return(send(p[0],"",p[1],"GET",this.async)); } /** *按一定时间间隔请求指定的Url并更新指定的对象 *@param {function|Object|String} oncomplete 正确返回时的回调函数 ,或者要更新的对象,或者要更新对象的ID *@param {String} url 请求的Url *@param {Number} interval 发送请求的时间间隔 *@param {Number} times 发送请求的次数 *@return {String} update过程的标识符,用于停止update *@see AJAXRequest#stopupdate *@example *varajax=newAJAXRequest(); *ajax.update(function(obj){ * alert(obj.responseText); * }, * "getdata.asp", //从getdata.asp获取数据 * 1000, //每1秒更新一将 * 3 //更新3次 *); */ this.update=function(){ varp=[],purl,puo,pinv,pcnt,av=arguments; $GP(p,av,[this.oncomplete,this.url,-1,-1],[$CB,null,$N,$N]); if(p[2]==-1)p[3]=1; varsf=function(){send(p[1],"",p[0],"GET",AJAX.async);}; varid=$GID(); varcf=function(cc){ sf();cc--;if(cc==0)return; $SOP(id,setTimeout(function(){cf(cc);},p[2])); } cf(p[3]); returnid; } /** *停止更新对象 *@param {String} update_id update方法返回的标识符 *@see AJAXRequest#update *@example *varajax=newAJAXRequest(); *varup=ajax.update("txtData","getdata.asp"); *ajax.stopupdate(up); */ this.stopupdate=function(id){ clearTimeout($LOP(id)); } /** *发送数据到指定Url *@param {String} [url] 请求的Url *@param {String} [content] 要发送的数据 *@param {function|Object|String} [oncomplete] 正确返回时的回调函数 ,或者要更新的对象,或者要更新对象的ID *@see AJAXRequest#postf *@example *varajax=newAJAXRequest(); *ajax.post("postdata.asp","thedatatopost",function(){}); */ this.post=function(){ varp=[],av=arguments; $GP(p,av,[this.url,this.content,this.oncomplete],[null,null,$CB]); if(!p[0]&&!p[2])returnfalse; return(send(p[0],p[1],p[2],"POST",this.async)); } /** *发送指定的表单到指定的Url *@param {String|Object} formObject 表单对象或表单对象的ID *@param {function|Object|String} [oncomplete] 正确返回时的回调函数 ,或者要更新的对象,或者要更新对象的ID *@see AJAXRequest#post *@example *varajax=newAJAXRequest(); *ajax.postf("dataForm",function(obj){ * alert(obj.responseText); *}); */ this.postf=function(){ varp=[],fo,vaf,pcbf,purl,pc,pm,ac=arguments.length,av=arguments; fo=ac>0?$VO(av[0]):false; if(!fo||(fo&&fo.nodeName!="FORM"))returnfalse; vaf=fo.getAttribute("onvalidate"); vaf=vaf?(typeof(vaf)=="string"?newFunction(vaf):vaf):null; if(vaf&&!vaf())returnfalse; $GP(p,[av[1],fo.getAttribute("action"),fo.getAttribute("method")], [this.oncomplete,this.url,this.method],[$CB,null,null]); pcbf=p[0];purl=p[1]; if(!pcbf&&!purl)returnfalse; pc=this.formToStr(fo);if(!pc)returnfalse; if(p[2].toUpperCase()=="POST") return(send(purl,pc,pcbf,"POST",true)); else{ purl+=(purl.indexOf("?")>-1?"&":"?")+pc; return(send(purl,"",pcbf,"GET",true)); } } /** *将表单对象转换化UrlEncode的字符串 *@author SurfChen<surfchen@gmail.com> *@link http://www.surfchen.org/ *@param {Object}formObject *@returns{String}表单字符串 *@see AJAXRequest#postf *@ignore */ this.formToStr=function(fc){ vari,qs="",and="",ev=""; for(i=0;i<fc.length;i++){ e=fc[i]; if(e.name!=''){ if(e.type=='select-one'&&e.selectedIndex>-1)ev=e.options [e.selectedIndex].value; elseif(e.type=='checkbox'||e.type=='radio'){ if(e.checked==false)continue; ev=e.value; } elseev=e.value; ev=encode(ev);qs+=and+e.name+'='+ev;and="&"; } } returnqs; } }
2、注册页面Default.aspx(无后台代码)
<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <htmlxmlns="http://www.w3.org/1999/xhtml"> <head> <metahttp-equiv="Content-Type"content="text/html;charset=utf-8"/> <metahttp-equiv="Content-Language"content="utf-8"/> <title>Test</title> </head> <body> <divid="container"><styletype="text/css"> #nav{margin:1emauto;width:700px;height:2em;} #navulli{list-style-type:none;float:left;margin:00.5em;} #demoContent{margin:1emauto;width:700px;text-align:left;} #demoContentfieldset{padding:1em;} #demoContentinput{font-size:12px;} </style> <scripttype="text/javascript"src="ajaxrequest.js"></script> <scripttype="text/javascript"> varajax=newAJAXRequest; </script> <divstyle="clear:both;"></div> <scripttype="text/javascript"> functioncheckUser(){ varun=document.getElementById("username"); varum=document.getElementById("usermsg"); if(!un.value){ um.innerHTML="<spanstyle='color:red;'>请输入用户名</span>"; returnfalse; } um.innerHTML="正在检测,请稍候"; ajax.get("demo.aspx?case=regcheck&username="+un.value, function(obj){ if(obj.responseText=="true") um.innerHTML="<spanstyle='color:red;'>对不起,这个用户名已经有人注册了,请换一个</span>"; else um.innerHTML="<spanstyle='color:green;'>恭喜,用户名可用</span>"; } ); } functioncp1(obj){ varpm=document.getElementById("passmsg"); if(!obj.value){ pm.innerHTML="<spanstyle='color:red;'>请输入密码</span>"; returnfalse; } else{ pm.innerHTML=""; checkPass(); } } functioncp2(obj){ varpm=document.getElementById("pwcfmsg"); if(!obj.value){ pm.innerHTML="<spanstyle='color:red;'>请输入确认密码</span>"; returnfalse; } else{ pm.innerHTML=""; checkPass(); } } functioncheckPass(){ varp1=document.getElementById("password"); varp2=document.getElementById("pwconfirm"); varpm=document.getElementById("passmsg"); if(p1.value!=p2.value) pm.innerHTML="<spanstyle='color:red;'>两次输入密码不一致,请重新输入</span>"; else pm.innerHTML=""; } functionfSubmit(){ returnfalse; } </script> <divid="demoContent"> <formonsubmit="fSubmit();returnfalse;"> <fieldset> <legend>注册用户</legend> <labelfor="username">用户名: </label><inputonblur="checkUser();"type="text"size="20"id="username"name="username"/><spanid="usermsg"></span><br/> <labelfor="password">密码: </label><inputonblur="cp1(this);"type="password"size="20"id="password"name="password"/><spanid="passmsg"></span><br/> <labelfor="pwconfirm">确认密码:</label><inputonblur="cp2(this);"type="password"size="20"id="pwconfirm"name="pwconfirm"/><spanid="pwcfmsg"></span><br/> <inputtype="submit"value="注册"/><inputtype="reset"value="重置注册信息"/><br/> </fieldset> </form> </div> </div> </body> </html>
3、验证用户帐户是否存在数据库Demo.aspx.cs(无前台代码)
usingSystem; usingSystem.Data; usingSystem.Configuration; usingSystem.Collections; usingSystem.Web; usingSystem.Web.Security; usingSystem.Web.UI; usingSystem.Web.UI.WebControls; usingSystem.Web.UI.WebControls.WebParts; usingSystem.Web.UI.HtmlControls; publicpartialclassDemo:System.Web.UI.Page { protectedvoidPage_Load(objectsender,EventArgse) { stringresult=Request.QueryString["username"]; if(IsExitUserName(result)) { Context.Response.Write("true"); } else { Context.Response.Write("false"); } } publicboolIsExitUserName(stringUsername) { StringDBConnStr; DataSetMyDataSet=newDataSet(); System.Data.SqlClient.SqlDataAdapterDataAdapter=newSystem.Data.SqlClient.SqlDataAdapter(); DBConnStr=System.Configuration.ConfigurationSettings.AppSettings["DBConnectString"]; System.Data.SqlClient.SqlConnectionmyConnection=newSystem.Data.SqlClient.SqlConnection(DBConnStr); if(myConnection.State!=ConnectionState.Open) { myConnection.Open(); } System.Data.SqlClient.SqlCommandmyCommand= newSystem.Data.SqlClient.SqlCommand("Selectcount(1)ascountuserFROMuserinfowhereusername='"+Username+"'",myConnection); myCommand.ExecuteNonQuery(); DataAdapter.SelectCommand=myCommand; if(MyDataSet!=null) { DataAdapter.Fill(MyDataSet,"table"); } if(myConnection.State==ConnectionState.Open) { myConnection.Close(); } return(int)MyDataSet.Tables[0].Rows[0]["countuser"]>0?true:false; } }
4、数据库结构如下:(测试已经注册:zlp,zs,ls,其它以外帐户都可以注册)
createtableuserinfo(idintidentity(1,1),usernamevarchar(20)) go insertintouserinfo(username) select'zlp' unionall select'zs' unionall select'ls'
5、使用后截图如下(由于刷新数据比较快,截取的图为最终结果,感兴趣的同学,可以按照这个步骤自己测试)
相关文章推荐
- 利用ajax检测用户名是否存在
- Ajax检测注册用户是否存在
- ASP.NET自动检测用户名是否注册(利用微软AJAX控件技术)
- Ajax简单应用,Ajax检测用户名是否存在
- Ajax入门----检测用户ID是否存在
- 利用ajax判断用户名是否存在
- Ajax js 使用Ajax检测用户名是否存在
- 利用jQuery实现的Ajax 验证用户名是否存在
- (2010-08-22)利用jQuery实现的Ajax 验证用户名是否存在
- 利用jQuery实现的Ajax 验证用户名是否存在
- 利用jQuery实现的Ajax 验证用户名是否存在
- 毕业设计(十)---用DWR实现 代替AJAX 用户注册检测用户名是否已经存在
- 使用jquery+ajax方式实现用户注册时,检测用户名是否存在
- 利用ajax技术验证数据是否存在的一个简单例子
- 应用ajax实现检测注册用户名是否已经存在
- php利用jquery进行会员是否存在ajax验证
- 注册页中检测用户是否存在(简单的JQ版Ajax应用)
- 使用Ajax实时检测"用户名、邮箱等"是否已经存在
- ajax检测账户是否存在
- jquery与php交互的ajax应用第一课:检测用户注册时用户名是否存在