利用ajax验证用户名,3.6.2 利用Ajax验证注册用户名（1）

3.6.2  利用Ajax验证注册用户名(1)

由于注册的用户比较多，如果能在客户端还没提交注册表单之前验证用户名是否可用，如果不可用则禁止提交，这样将大大减少网络流量和服务器负载。本节将介绍如何利用Ajax验证用户名唯一性。

利用Ajax向服务器发送异步的请求，要先创建一个xmlHttpRequest对象，并得到用户填写的注册用户名，然后向服务器端发送验证请求。下面给出其JavaScript代码。

代码位置：见光盘本章源代码的reg.js文件。1var xmlHttp;//声明xmlHttpRequest对象

2var result =false;//声明验证结果并初始化为false

3function checkUid(){//验证用户名的方法

4var uname = document.all.uname.value.trim();//得到用户输入的用户名值

5if(uname.length<3){//如果长度小于3

6document.all.unameMsg.innerHTML=""+

7"对不起，您输入的用户名长度小于3个字符, 请输入一个较长的用户名。";

8returnfalse;//返回false

9}

10else{

11document.all.unameMsg.innerHTML=" Loading...";

12if(window.ActiveXObject){//如果是IE浏览器

13xmlHttp =newActiveXObject("Microsoft.XMLHTTP");

14}

15elseif(window.XMLHttpRequest){//IE之外的浏览器

16xmlHttp =newXMLHttpRequest();//创建XMLHttpRequest对象

17}

18var uri ="UUAction.action?uname="+uname;//发送请求的uri

19uri = encodeURI(uri);//对uri进行编码

20uri = encodeURI(uri);

21xmlHttp.open("POST",uri,true);//发送请求

22xmlHttp.onreadystatechange = function(){//挂接处理方法

23if(xmlHttp.readyState==4){

24if(xmlHttp.status==200){

25var flag = xmlHttp.responseText;//得到验证结果字符串

26if(flag.trim()=="true"){//用户名已经存在

27document.all.unameMsg.innerHTML="

src='images/check_ error.gif'/>"+

28"对不起，您输入的用户名

color='black'>《"+uname+"》"+

29"

已经有人注册, 请输入一个新的用户名。";

30result =false;//result置为false

31}

32else{//用户名可用

33document.all.unameMsg.innerHTML="

";

34result =true;//result置为ture

35}}}}

36xmlHttp.send(null);

37}}

第1～2行声明了xmlHttpRequest对象和验证结果标志，第4～9行先对用户输入的用户名进行本地验证，如果长度小于3，就不发送到服务器端验证而直接返回失败结果。

第11～17行为通过了本地验证后，根据用户浏览器的不同创建xmlHttpRequest对象，并在此过程中在用户页面上显示一幅加载的Loading…图片，体现良好的交互性。

第18～36行利用xmlHttpRequest对象向服务器端发送请求并得到处理结果，根据结果进行不同的处理，如验证用户名已占用则在相应位置给出红色字体提示。由于注册用户名可能是中文，所以对发送请求的字符串uri进行了两次编码，到服务端再解码处理，即可解决中文乱码的问题。

开发完客户端发送请求的JavaScript代码后，下面将介绍服务器端该如何对其进行处理，其实就是查询数据库中有无该用户名存在，具体代码如下所示。

代码位置：见光盘本章源代码的UnameUniqueAction.java类。1publicclassUnameUniqueActionextendsDYBaseAction{

2protectedString uname;//要验证的用户名

3protectedString pwd;//用户注册的密码

4protectedString sql;//声明SQL语句引用

5protectedString valcode;//用户输入的验证码

6publicvoidsetUname(String uname){

7try{

8this.uname = URLDecoder.decode(uname,"utf-8");

//服务器端对用户名进行解码

9}

10catch(Exception e){e.printStackTrace();}    /捕获异常并打印

11}

12publicvoidsetValcode(String valcode) {//设置验证码属性的方法

13this.valcode = valcode.toUpperCase();//并转大写

14}

15//该处省略了一些获取和设置属性值的方法

16publicbooleangetFlag(){//返回是否可注册的标志位

17sql ="select UID from DY_User where UName='"+uname+"'";

//true为用户不存在

18returndbu.isExist(sql);//返回验证结果

19}

20@Override//重写execute方法

21publicString execute()throwsException{

22returnSUCCESS;//返回SUCCESS视图

23}}

第2～5行为该action类的一些属性，如接收到的用户名、密码和验证码等，其实该类也是一个基类Action，用于被注册和登录的Action类继承，这一点后面将会讲到。

第6～11行为接受客户端发过来的Ajax请求里的uname参数，调用URLDecoder类的decode方法进行解码。第12～14行为验证码的setter方法，将验证码全转换为大写，因为本应用的验证码不区分大小写，所以全转换为大写进行处理。

第16～19行为验证用户名唯一性的方法，返回查询数据库的结果，isExist方法为查看某一条SQL语句所表述的记录是否存在的数据库方法。第20～23行为重写execute方法，该方法返回SUCCESS视图。

验证唯一性必须要查询数据库，所以用到了查询数据库的方法，本项目中所有用到的数据库方法均位于DBUtil类中，上述代码用的方法代码如下所示。

代码位置：见光盘本章源代码的DBUtil.java类。

【责任编辑：云霞 TEL：(010)68476606】

点赞 0