AJAX--异步校验实现

前言：

     现在软件很讲究用户体验度，当我们在注册的时候，你是希望当你填完一系列信息之后点击注册时系统提示你用户名已经注册过，然后重新填写一遍信息，还是当你填完用户名就给提示？？懒人都会选择后者对吧，来看看怎么实现的！

介绍：

    这个效果的实现用到了AJAX，当用户离开用户名文本框输入时开始校验，需要在用户名标签中添加onblur事件，如下图：

接下来就需要在js中编写checkUsername（）方法

js方法:

function checkUsername(){      //获取文本框值     var username=document.getElementById("username").value;      //1.创建Ajax核心对象XMLHttpRequest     var xhr=createXmlHttp();     //2.设置监听     xhr.onreadystatechange = function(){       //Ajax引擎状态为成功   if(xhr.readyState == 4){       //HTTP协议状态为成功   if(xhr.status == 200){            //显示返回结果信息document.getElementById("span1").innerHTML = xhr.responseText;//请求结果内容} }  }     //3.打开连接       //设置请求方式为Get，设置请求的URL，设置为异步提交（true）       xhr.open("GET","${pageContext.request.contextPath}/user_findByName.action?time="+ new Date().getTime()+"&username="+username,true);     //4.发送        xhr.send(null); }  function createXmlHttp(){     var xmlHttp;     try{//非IE浏览器，如Firefox          xmlHttp=new XMLHttpRequest();     }     catch(e){       try{//IE           xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");       }       catch(e){           try{                xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");           }           catch(e){}       }    }    return xmlHttp;}

异步校验四步走：

 1、创建Ajax核心对象XHR

 2、设置监听

 3、打开连接

 4、发送

几个关键点：

1、创建XHR对象时需要考虑浏览器的兼容性，IE和其他浏览器不同，如上面的方法createXmlHttp()；

2、关于ajax引擎的状态和Http协议状态，在介绍XHR对象时有介绍，在这里不重复，博客地址：点击打开链接

    当readyState为4且status为200时，表示响应已经就绪。

3、请求方式为GET还有一种是POST，Get相对于POST来说更简单更快一些，大部分情况下都能用，以下几种情况用POST请求 

    (1)无法使用缓存文件（更新服务器上的文件或数据库）

    (2)向服务器发送大量数据（POST 没有数据量限制）

    (3)发送包含未知字符的用户输入时，POST 比 GET 更稳定也更可靠

4、请求URL中不仅有要查询的username参数，还添加了时间戳GETTIME().是为了避免缓存对查询结果的影响。

5、异步提交时在打开连接中写的是true，代表当我们发送了请求后，处理过程中我们可以进行别的框的输入，填写邮箱、地址之类的信息，如果是false，发送了请求我们必须等待请求结果返回后才能进行其他框的输入；我们一般都是用true，用户体验稍微好些，如果填写一个框后其他框动不了，用户不知道发生了什么事，增加焦虑感。

6、请求结果的显示用的是span标签（div需要换行，span不需要，可以在用户名框后面提示）

  当时自己照着视频敲，把这给掉了，怎么都显不出来，调了半天~

7、请求结果上面代码用到了xhr对象的responseTest方法，对象的内容是在请求路径中的方法中写的，在SSH网上商城中是在UserAction中：如下

/** * AJAX进行异步校验用户的执行方法 * @return */    public String findByName() throws IOException{        //调用Service进行查询    User exitUser= userService.findByUsername(user.getUsername());    //获得response对象，页面输出    HttpServletResponse response = ServletActionContext.getResponse();response.setContentType("text/html;charset=UTF-8");    //判断    if(exitUser!=null){    //查询到该用户：用户名已经存在    response.getWriter().println("<font color='red'>用户名已经存在</font>");    }else{    //没查询到该用户：用户名可以使用    response.getWriter().println("<font color='grean'>用户名可以使用</font>");    }    return NONE;    }

   后面Service和Dao的代码就省略了，相当于我们的三层查询一遍数据库看是否存在。

总结：

    看到DRP时也有这个功能的实现，想起来SSH的时候出现点问题，学习了两遍才明白这个套路，其实挺简单的，主要还是缺乏及时总结，以后多写总结，加油！