使用ajax實現驗證碼

java后台的servlet：

@WebServlet(value = "/login.love",name = "AjaxLoginServlet")
public class AjaxLoginServlet extends HttpServlet {

    @Override
    protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        super.doPost(req, resp);
    }

    @Override
    protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {

        ResultMsg rm=new ResultMsg();
        PrintWriter out=resp.getWriter();
        Gson gson=new Gson();

        //1 獲取前台來的驗證碼
        //2 獲取session里面的驗證碼
        //3 校驗

        String vcode=req.getParameter("vcode");
        String code= (String) req.getSession().getAttribute("code");

        if (null==vcode||null==code){
            rm.setResult("0002");
            rm.getMsg("驗證碼為空");

            out.println(gson.toJson(rm));
            return;
        }
        if (vcode.equalsIgnoreCase(code)){
            rm.setResult("0000");
            out.println(gson.toJson(rm));
        }else {
            rm.setResult("0001");
            rm.getMsg("驗證碼錯誤");
            out.println(gson.toJson(rm));
        }


    }

前端的jsp：

<!-- 提交的方式； get  post -->


    <form action="login.love" method="post">

        <!-- name : 對應我們servlet去獲取前台文本框的值的 key -->
        用戶名：<input id="nm" name="userName" type="text" value="${userName}" /> 
        密碼：<input name="userPass" type="password" />
        驗證碼：<input id="vcode" name="vcode" type="text"><img id="img1"  alt="" src="image.do" onclick="flash(this)">

        <!-- 默認是submit； -->
        <button type="button" onclick="login()">登錄</button>

        <label id="lab1"></label>

    </form>
</body>
<script type="text/javascript">

    function login(){
        var  xhr=XMLHttpRequest();
        xhr.open("POST","login.love",true);
        xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded");
        xhr.send("vcode="+document.getElementById("vcode").value);
        
        xhr.onreadystatechange=function () {
            
            //請求成功
            if (xhr.readyState==4&&xhr.status==200){
                var  obj=JSON.parse(xhr.responseText);
                
                if (obj.result=="0000"){
                    alert("驗證碼正確");
                } else if(obj.result=="0002"){
                    alert("驗證碼為空")
                    flash(document.getElementById("img1"))
                }else {
                    alert("驗證碼錯誤");
                    flash(document.getElementById("img1"));
                }
            } 
        }
    }
    function flash(obj){
        obj.src = "code.do?"+Math.random();
        console.info(obj.src);
    }
</script>