关于用ajax实现异步检测用户名有效性失败问题

今天在学一个小知识：ajax实现异步请求，实验案例是用户注册账号时异步检测账号的有效性，实验准备如下：

一个登陆页面register.jsp

<h3>用户注册</h3>
    <form action="" method="post">
        <p>账号:<input type="text" id="userName">
            <input type="button" value="检测" onclick="checkUserName()"></p>
        <p>密码:<input type="password"></p>
        <p>确认密码:<input type="password"></p>
        <p>姓名:<input type="text"></p>
        <p>电话:<input type="text"></p>
        <p><input type="submit" value="提交"></p>
    </form>

一个用户名有效性检测的servlet：CheckUserNameServlet

@WebServlet("/CheckUserNameServlet")
public class CheckUserNameServlet extends HttpServlet {
    @Override
    protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        doPost(req,resp);
    }

    @Override
    protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        //1 接受用户名
        String userName = req.getParameter("userName");
        //2 检查用户名是否存在
        //测试规则，只要用户名不是以admin开头都可以使用
        boolean r = !userName.startsWith("admin");
        //3 响应ajax请求，通过response输出流去响应
        resp.setCharacterEncoding("utf-8");
        PrintWriter out = resp.getWriter();
        String str = r?"<label style='color:green'>用户名可用</label>":"<label style='color:red'>用户不名可用</label>";
        out.println(str);
        out.flush();
        out.close();

    }
}

最后是一个js文件写ajax代码：

var ajaxReq;

function checkUserName(){
     if(window.XMLHttpRequest){
         ajaxReq = new XMLHttpRequest();
     }else {
         ajaxReq = new ActiveXObject("Microsoft.XMLHTTP");
     }
     var userName = document.getElementById("userName").value;
     var method = "GET";
     var url = "CheckUserNameServlet?userName="+userName;
     var async = true;
     ajaxReq.open(method,url,async);

   
     ajaxReq.onreadystatechange = callback;

    ajaxReq.send(null);

 }

//回调函数:处理结果
function callback (){
 
    if(ajaxReq.readyState==4 && ajaxReq.status==200){
       
        var result = ajaxReq.responseText;

        document.getElementById("tipsLabel").innerHTML = result;
    }
}

以上三个文件写好后在最后一步实验时发现并没有出现想要的功能，于是开始了拍错历程：

首先是在servlet里打断点，看看前端输入的数据有没有被封装好且传入，调试后发现没问题，前端输入的数据都成功接到，并且servlet的响应也符合预期，接下来想在js代码的callback（）函数哪里打断点看看最后封装是否出问题，最后发现在js打断点调试程序没办法进去，只得作罢，换一种蠢方法，在callback函数里加上console语句去打印result看回调是否正常进行，打印结果如下：

[Log] nihao (test.js, line 41)
[Log] <label style='color:green'>用户名可用</label> (test.js, line 45)

[Error] TypeError: null is not an object (evaluating 'document.getElementById("tipsLabel").innerHTML = result')
    callback (test.js:49)

回调方法成功进入，结果也成功打印，但是报了一个错，居然是空，那推测是.getElementById没有拿到对象，在底下alert以下拿到的这个对象，看有没有消息框弹出，实验后弹出null，那说明tipsLabel没有拿到，回去检查登陆页面，果然，账号后面没有<label>标签，加上后即可实现功能，修改后的代码如下：

<h3>用户注册</h3>
    <form action="" method="post">
        <p>账号:<input type="text" id="userName"><label id="tipsLabel"></label>
            <input type="button" value="检测" onclick="checkUserName()"></p>
        <p>密码:<input type="password"></p>
        <p>确认密码:<input type="password"></p>
        <p>姓名:<input type="text"></p>
        <p>电话:<input type="text"></p>
        <p><input type="submit" value="提交"></p>
    </form>

实在是被自己蠢到了。——_——