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的一些方法，其实最主要的就是这些，其他的内容大家都懂，