AJAX之XMLHttpRequest--验证（一）

* 概述

       AJAX是“Asynchronous Javascript And XML”的缩写，中文译作“异步JavaScript和XML”。使用AJAX可以通过HTTP协议与服务器交互数据，可以在在不重新加载整个网页的情况下，对网页的某部分进行更新。
      XMLHttpRequest(XHR)是一个API对象,其中的方法可以用来在浏览器和服务器端传输数据。
     为了实现AJAX技术，早期微软的IE5、IE6浏览器内嵌了XMLHTTP组件，其它浏览器比如Opera、Mozila的早期版本则内嵌了XMLHttpRequest组件。XMLHTTP与XMLHttpRequest有很多相同的属性和方法，因此XMLHTTP也被一起叫做XMLHttpRequest，简称XHR。后来XHR被W3C组织标准化。各浏览器也逐渐按照W3C制定的标准来实现XHR，到目前为止，仍然有部分的属性和方法不被部分浏览器支持。不过笔者认为，老版本浏览器的占有量会越来越少，新版本的浏览器可能会更加严格的按照W3C制定的标准来实现XHR，兼容性问题就会被慢慢淡化，Jquery框架在2.2的版本在实例化XHR时就不考虑IE5、IE6的兼容性问题了。

---

* 实例分析

       在jsp页面中，我们创建XMLHttpRequest对象，向服务器请求数据，完成数据加载，实现局部更新。

/**
     * 输入用户名失去焦点事件
     * 检查用户名是否重复
     */
    function checkUserName(){
   

        //获得文本框的值
       var username= document.getElementById("username").value;
        //1.创建异步交互对象
        var xhr =createXmlHttp();
        //2.设置监听
        xhr.onreadystatechange=function () {
   
            if (xhr.readyState== 4){ //TODO:
                if (xhr.status==200){
                    document.getElementById("userNameValid").innerHTML=xhr.responseText;
                }
            }
        }
        //3.打开连接
        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{ // 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;
    }

       上面提到的checkUserName方法，是在input输入框失去焦点时触发的，那么根据action（user_findByName.action），我们可以继续追寻：

/**
     * AJAX进行一步校验用户名的执行方法
     * @throws IOException
     */
    public String findByName() throws IOException  {