AJAX基础与注册用户名检查

AJAX

1. 简介

Asynchronous Javascript And XML （异步javascript和xml）。这玩意干啥的呢，简单说就是向服务器发送请求的，然后得到响应，更新部分网页，但是不需要重新加载整个页面。本质上呢就是javascript。

2. 场景

想几个很简单的场景，你在注册的时候，输入完用户名，然后就会得到提示，该用户名已被注册，这就很舒服，因为不需要重新加载页面。有种即插即用的赶脚，大概就这个意思，咱们分批的玩。或者说你在百度搜索时候，你输入“李小璐“，搜索栏底下会出现类似”PGONE“这种，那就是和后台交互了呗，不然浏览器哪里知道你输入的是个啥，服务器也没法给你回。

3. 就学一个XMLHttpRequest对象。

创建对象

var xmlhttp;
if (window.XMLHttpRequest)
  {// code for IE7+, Firefox, Chrome, Opera, Safari
  xmlhttp=new XMLHttpRequest();
  }
else
  {// code for IE6, IE5
  xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
  }
  //针对不同的浏览器，所以copy一下完事

发送请求
```
 xmlhttp.open("GET","test1.txt",true);
 xmlhttp.send();
```
一般就是用get方式提交就搞定，默认async的值是true，不用写。send方法传一个null
接收响应

responseText就是响应的正文，常用
事件与属性

onreadystatechange事件是监听XMLHttpRequest对象的readyState状态，从0到4改变的时候就会被调用。我们一般判断 readyState==4 && status == 200，说明一切正常，再对响应进行操作。

4. 注册用户名例子

当输入完用户名之后，离开输入框，触发onblur事件，创建XMLHttpRequest对象，并发送异步请求到服务器，通过get方式把username传给一个servlet，一切正常得到响应正文，进行判断是否已经被注册，给出提示。

function getXMLHttpRequest() {
    var xmlhttp;
    if (window.XMLHttpRequest) { // code for IE7+, Firefox, Chrome, Opera, Safari
        xmlhttp = new XMLHttpRequest();
    } else { // code for IE6, IE5
        xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
    }
    return xmlhttp;
}

<script type="text/javascript">
    window.onload = function() {
        //得到input元素
        var nameElement = document.getElementsByName("username")[0]; 
        //注册onblur事件
        nameElement.onblur = function() {     
            var name = this.value;
            //创建XMLHttpRequest()
            var req = getXMLHttpRequest();   
            //注册监听事件，此事件一般写在open()和send()方法之前，
            //因为对象一经创建，readyState就会改变
            req.onreadystatechange = function() {
                //判断是否一起正常
                if (req.readyState == 4) {
                    if (req.status == 200) {
                        var msg = document.getElementById("msg");
                        if (req.responseText == "true") {
                            msg.innerHTML = "<font color='red'>傻逼，已经被注册了！</font>"
                        } else {
                            msg.innerHTML = "nice,可以用！"
                        }
                    }
                }
            }
            //提交请求到一个servlet，带着username
            req.open("get", "${pageContext.request.contextPath }/servlet/checkNameServlet?username=" + name);
            //空值即可
            req.send(null);
        }
    }
</script>
</head>
<body>
    用户名：<input type="text" name="username"><span id="msg"></span><br> 
    密码：<input type="password">
</body>

    protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        req.setCharacterEncoding("UTF-8");
        resp.setContentType("text/html;charset=UTF-8");
        PrintWriter out = resp.getWriter();

         //判断输入的是不是tom，输出响应正文
        if("tom".equals(req.getParameter("username"))) {
            out.print("true");
        } else {
            out.print("false");
        }
    }

效果如下：

这里写图片描述