十七 Ajax&校验用户名功能

Ajax：

即"Asynchronous JavaScript And XML"， 异步JavaScript和XML ， 是指一种创建的交互式页面应用的网页开发技术，它并不是新的技术

ajax 并非一种新的技术，而是几种原有技术的结合体。由以下几种技术组合而成：

• 1.使用CSS和XHTML来表示
• 2.使用DOM模型来交互和动态显示
• 3.XMLHTTPRequest来和服务器进行异步通信,是ajax的基础
• 4.使用JavaScript来绑定和调用

在以上所述技术中，除了XmlHttpRequest对象以外，其他所有的技术都是基于Web标准并且已经得到了广泛使用，XMLHTTPRequest虽然还没有被W3C采纳，但已经是一种事实的标准。

典例：

• 注册网站时，提示输入的用户名已经被注册

作用：

如果想要刷新网页局部内容，那么需要重新载入整个网页。Ajax解决了局部刷新的问题，提高了用户体验。

1 Ajax的简单使用

创建对象:

function ajaxFunction(){
       var xmlHttp;
       try{ // Firefox, Opera 8.0+, Safari
            xmlHttp=new XMLHttpRequest();
        }
        catch (e){
           try{// Internet Explorer
                 xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");
              }
            catch (e){
              try{
                 xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
              }
              catch (e){}
              }
        }

        return xmlHttp;
     }

发送请求：

     //执行get请求
     function get(){
         // 1 创建xmlhttprequest对象
          var request =  ajaxFunction()
         // 2 发送请求  参数一  请求类型  参数二 路径 参数三 是否异步
         request.open("GET","/8AjaxAndJquery/ServletDemo01",true);
         request.send();
     }

2 AJAX GET 向服务器发送数据，获取服务器响应的数据

/*     //向Servlet发送数据
     function get(){
         // 1 创建xmlhttprequest对象
          var request =  ajaxFunction()
         // 2 发送请求  参数一  请求类型  参数二 路径 参数三 是否异步
         request.open("GET","/8AjaxAndJquery/ServletDemo01?name=aa&age=18",true);
         request.send();
     } */

     //接收Servlet响应的数据
     function get(){
         // 1 创建xmlhttprequest对象
          var request =  ajaxFunction()
         // 2 发送请求  参数一  请求类型  参数二 路径 参数三 是否异步
         request.open("GET","/8AjaxAndJquery/ServletDemo01?name=aa&age=18",true);
         // 3 获取响应数据,注册监听的意思，如果状态改变，执行等号右边的方法
         request.onreadystatechange = function(){
             if(request.readyState == 4 && request.status == 200){
                 //弹出响应的信息
                 alert(request.responseText);
             }
         }
         request.send();
     }

3 AJAX POST 向服务器发送数据，获取服务器响应的数据

//1 创建对象
function ajaxFunction(){
       var xmlHttp;
       try{ // Firefox, Opera 8.0+, Safari
            xmlHttp=new XMLHttpRequest();
        }
        catch (e){
           try{// Internet Explorer
                 xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");
              }
            catch (e){
              try{
                 xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
              }
              catch (e){}
              }
        }

        return xmlHttp;
     }

 //2 发送请求
    function post(){
       // 1 创建对象
       var request = ajaxFunction();
       // 2 发送请求
       request.open("POST" ,"/8AjaxAndJquery/ServletDemo01" ,true);
      
      // 如果要获取数据，加一个状态的监听
       request.onreadystatechange = function(){
           if(request.readyState == 4 && request.status == 200){
               alert("post:"+request.responseText);
           }
       }
       // 3 带数据过去
       //如果是post请求，那么这里要添加请求头，说明提交的数据是一个经过url编码的form表单数据
       request.setRequestHeader("Content-type","application/x-www-form-urlencoded");
       //在send方法里面写表单数据
       request.send("name=aobama&age=29");
 }

4 Ajax实现校验用户名功能

1 DAO层校验用户名，用ScalarHandler获取聚合函数count()的数量值，＞0则用户名已经存在

@Override
    /**
     * 校验用户名是否存在
     */
    public boolean checkUsername(String name) throws SQLException {

        QueryRunner runner = new QueryRunner(JDBCUtil02.getDataSource());
        String sql = "select count(*) from test where name = ?";
        Long result = (Long) runner.query(sql,  new ScalarHandler() , name);
        return result>0;
    }

2 Servlet交互前后端数据

protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        try {
            //检测是否存在
            request.setCharacterEncoding("utf-8");
            response.setContentType("text/html;charset=UTF-8");
            String name = request.getParameter("name");
            System.out.println("name:"+name);
            UserDao dao = new UserDaoImpl();
            boolean isExist = dao.checkUsername(name);
            //通知页面
            if(isExist){
                response.getWriter().println(1);
            }else{
                response.getWriter().println(2);
            }
        } catch (SQLException e) {
            // TODO Auto-generated catch block
            e.printStackTrace();
        }
    }

3 前端JSP&AJAX实现异步校验功能，绑定onblur函数，失去焦点执行

<script type="text/javascript">
//1 创建对象
  function ajaxFunction(){
       var xmlHttp;
       try{ // Firefox, Opera 8.0+, Safari
            xmlHttp=new XMLHttpRequest();
        }
        catch (e){
           try{// Internet Explorer
                 xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");
              }
            catch (e){
              try{
                 xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
              }
              catch (e){}
              }
        }

        return xmlHttp;
     }

    function checkUserName(){
       //获取输入框的值
       var name =  document.getElementById("name").value;
//        alert(name);
       //1 创建对象
       var request = ajaxFunction();
       //2 发送请求
       request.open("POST","/8AjaxAndJquery/CheckUserNameServlet", true);
       //注册状态改变监听，获取服务器发送过来的数据
        request.onreadystatechange = function(){
             if(request.readyState == 4 && request.status == 200){
//                  alert(request.responseText);
                 var data = request.responseText;
                 if(data == 1){
                 document.getElementById("span01").innerHTML="<font color=red>用户名已存在</font>";
//                      alert("用户名已存在");
                 }else{
                     document.getElementById("span01").innerHTML="<font color=red>恭喜！用户名可以使用</font>";
//                      alert("恭喜！用户名可以使用")
                 }
             }
       }
       request.setRequestHeader("Content-type","application/x-www-form-urlencoded");
       request.send("name="+name);
    }
</script>