Ajax技术验证用户名是否可用,简单实现

页面内容:

 

 

function getXMLHttpRequest()

       {

              var xmlhttp;

              if(window.XMLHttpRequest)// 其他浏览器中 XMLHttpRequest 的创建

              {

                     xmlhttp = new XMLHttpRequest();

                       if(xmlhttp.overrideMimeType)// 解决部分版本的 Mozilla bug

                       {

                         xmlhttp.overrideMimeType("text/xml");

                       }

              } else if (window.ActiveXObject) //IE6.0 及以下版本中 XMLHttpRequest 的创建

              {

                     var MSXML =

                     ['MSXML2.XMLHTTP.6.0','MSXML2.XMLHTTP.5.0',

                     'MSXML2.XMLHTTP.4.0','MSXML2.XMLHTTP.3.0',

                     'MSXML2.XMLHTTP','Microsoft.XMLHTTP'];

                       for(var n = 0; n < MSXML.length; n ++)

                       {

                         try{

                           xmlhttp = new ActiveXObject(MSXML[n]);

                           break;

                         }catch(e){}

                       }

              }

              return xmlhttp;

       }

       function check()

       {

              resultNode=document.getElementById("result");

              //1. 获取用户名的值

              var username=document.getElementById("username").value;

              //2. 获取内置对象 xmlHttpRequest

              xmlHttpRequest=getXMLHttpRequest();// 获取 xmlHttpRequest 内置对象

              //3. 设置回调函数

              xmlHttpRequest.onreadystatechange=callback;// 设置回调函数

              //4. 向服务器发送请求

              xmlHttpRequest.open("GET","ajaxdemo.do?username=" + encodeURI(encodeURI(username))+"&time="+new Date().getTime(),true);

              xmlHttpRequest.send(null);// 发送请求

       }

       function callback()

       {

              //5. 回调函数中处理服务器返回的数据

              if(xmlHttpRequest.readyState == 4)// 请求的状态。有 5 个值 0= 未初始化, 1= 正在加载, 2= 已加载, 3= 交互中, 4= 完成

              {

                  if(xmlHttpRequest.status == 200)

                  {

                         var test=xmlHttpRequest.responseText;// 接受服务器返回的数据

                        resultNode.innerHTML = test;

                  } else

                  {

                        resultNode.innerHTML = " 服务器故障 ";

                  }

              }

             

       }

 

 

<form name="myform" action="login.do" method="get">

              请输入姓名 :<input type="text" id="username" name="name" onBlur="check()"/> <input type="button" onClick="check()" value=" 校验用户名 "><br>

              <div id="result"></div>

              请输入地址 :<input type="text" name="address"/><br>

              请输入年龄 :<input type="text"/><br>

              <input type="submit" value=" 提交 "><input type="reset" value=" 重置 ">

       </form>

 

 

 

 

请输入姓名:     
请输入地址:
请输入年龄:

Servlet处理端: public void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {

 

 response.setContentType("text/html;charset=utf-8");

 String username=request.getParameter("username");

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

UserDao dao=new UserDao(); boolean flag=dao.checkUserName(username); //这是DAO层的数据库查询方法 ,查询username是否已存在。

PrintWriter out=response.getWriter();

if(flag) {

 out.println("此用户名可以使用! ");

} else {

 out.println("此用户名已经被占用,请更换一个用户名! ");

}

 

}

 

 

 

 

 

 

 

 以上的是源码。以前做的练习,没有经过整理,有点繁杂,不过很详细。还有因为我是直接将代码粘贴上来的,csdn直接将代码生成了页面,最后不得不有所删减,所以页面上的内容只写了js的一些方法,其实最主要的就是这些,其他的内容大家都懂,

 

 

评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值