Ajax+js验证用户名是否存在

关于Ajax的原理和更为详细的创建步骤给大家推荐一篇博客
AJAX–XMLHttpRequest五步使使用方法 - cynchanpin - 博客园 https://www.cnblogs.com/cynchanpin/p/7039426.html
这里写图片描述

这里写图片描述
js文件


//浏览器一起动就判断浏览器 获取XMLHttpRequest
/*创建异步对象的函数    */
function createXMLHttpRequest() {
    try {
        return new XMLHttpRequest();//常用的浏览器创建

    } catch (e) {
        try {
            return ActiveXObject("Msxml2.XMLHTTP");//IE6.0  
        } catch (e) {
            try {
                return ActiveXObject("Micrsoft.XMLHTTP");//IE5.5 
            } catch (e) {
                alert("当前浏览器不支持异步操作!"); 
                throw e;
            }
        }
    }
}

//窗体加载的时候
window.onload = function() {
    var user = document.getElementById("name");
    user.onblur = function() {
        var xmlhttp = createXMLHttpRequest();//1.创建了一个xmlhttp
        xmlhttp.open("POST", "check", true);//2.打开和服务器
        xmlhttp.setRequestHeader("Content-type",
                "application/x-www-form-urlencoded");//3.设置响应头
        xmlhttp.send("username=" + user.value);//4.发送消息给服务器
        xmlhttp.onreadystatechange = function() {
            //alert("readyState:"+xmlhttp.readyState+"status:"+xmlhttp.status)
            if (xmlhttp.readyState == 4 && xmlhttp.status == 200) { //双重判断:xmlHttp的状态为4(服务器响应结束),以及服务器状态码为200(服务器响应成功)
                var text = xmlhttp.responseText;
                 var namespan=document.getElementById("namespan");
                    if(text=="true"){
                        namespan.innerHTML="<font color='red' size='3'>用户名已被使用</font>";

                    }else{
                         namespan.innerHTML="<font color='green' size='3'>用户名可用</font>";
                    }
            }
        }
    }
}

action:check

@ResponseBody   //将函数返回值作为请求返回值,没有这个注解的话,请求的响应应该是一个页面,不需要页面的话应该加上这个注解。
    @RequestMapping(value="check",method=RequestMethod.POST)
    public void check(TUser user) throws IOException {
        System.out.println("check"+user);
        if(userv.ExistUser(user)) {
            response.getWriter().print("true");
        }
        else {
            response.getWriter().print("false");
        }
    }

对于js,JQuery,Ajax这些东西感觉自己都不懂,看着大概能猜出来是个什么意思,折腾了好久才搞好,也算是学习了。
@ResponseBody //将函数返回值作为请求返回值,没有这个注解的话,请求的响应应该是一个页面,不需要页面的话应该加上这个注解。
刚开始没有加注解,一直没有效果,各种找错,最后alert后发现xmlhttp.status一直是404,最后百度发现要加上@ResponseBody将函数返回值作为请求返回值,还有readyState是undfined相当于0其实是自己readyState单词写错了,智障。

XMLHTTP 的 readyState 值含义:

0-未初始化,即尚未调用 open。
1-初始化,即尚未调用 send。
2-发送数据,即已经调用 send。
3-数据传送中。
4-完成。

版权声明:本文为flower_CSDN原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/flower_CSDN/article/details/81229491