SSM整合之后，用ajax异步提交验证用户名。

SSM整合之后，用ajax异步提交验证用户名。

这个是jsp前台的代码，html代码就不写了，比较简单。后台的controller用的都是注解的形式

  <script type="text/javascript">
       var xmlHttp;
    //创建XMLHttpRequest对象
    function createXMLHttpRequest() {
        if (window.ActiveXObject) {//是不是IE
            xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
        } else if (window.XMLHttpRequest) {
            xmlHttp = new XMLHttpRequest();
        }
    }
    function validate() {
        //创建xmlHttpRequest对象
        createXMLHttpRequest();
        //使用DOM，取HTML标签的账户--根据id值是userNm的标签对象
        var userNm = document.getElementById("username").value;
        if (userNm == "") {
            document.getElementById("td1").innerHTML = "用户名不能为空";
            return;
        }
        var url = "checkName.action?ajax=ajax&userNm=" + escape(userNm);
        //向服务器端的LoginServlet发送异步GET请求
        xmlHttp.open("GET", url, true);//1
        //当状态有变化的时候，调用callback方法
        xmlHttp.onreadystatechange = callback;
        xmlHttp.send(null);
    }
    function callback() {
        //当客户端完全接收完服务器的响应后，并且状态为200，也就是正常
        if (xmlHttp.readyState == 4) {
            if (xmlHttp.status == 200) {
                //使用responseXML属性，接收服务器端返回的的XML文件 ，使用DOM解析XML
               backData = xmlHttp.responseText;
                //var backData = xmlHttp.responseXML.getElementsByTagName("response")  [0].firstChild.firstChild.data; //后台传入XML时使用这个
                setMessage(backData);
            }
        }
    }
    function setMessage(backDate) {
        //使用DOM得到id值为userNmDiv的域，用来显示提示信息    
        var userNmDiv = document.getElementById("td1");
        if (backDate == "true") {
            userNmDiv.innerHTML = "有此用户";
        } else {
            userNmDiv.innerHTML = "无此用户";
        }
</script>

这个是UserController，后台代码，传的是一个txt，也可以往前台传一个xml，不过写法不同，

往前台传txt
    @RequestMapping("/checkName")
    public void checkName(HttpServletRequest request,
            HttpServletResponse response) {

        String userNm = request.getParameter("userNm");
        String ajax = request.getParameter("ajax");

        if (ajax != null || ajax != "") {
            try {
                Boolean cn = us.checkUserName(userNm);
                response.setContentType("text/html;charset=utf-8");
                PrintWriter out;
                out = response.getWriter();
                out.print(cn);
                out.flush();
                out.close();
                } catch (IOException e) {
                    e.printStackTrace();
                }

传xml

 @RequestMapping("/checkName")
    public void checkName(HttpServletRequest request,
            HttpServletResponse response) {
    response.setContentType("application/xml;charset=utf-8");//定义输出文本的格式
          String userNm = request.getParameter("userNm");
          String ajax = request.getParameter("ajax");

        if (ajax != null || ajax != "") {
            try {
                PrintWriter out = response.getWriter();
                response.setHeader("Cache-Control","no-cache");
                out.print("<?xml version='1.0' encoding='"+"utf-8"+"' ?>");
                out.print("<response>");
                out.print("<backData>"+ Boolean.toString(rv)+ "</backData>");
                out.print("<backData2>你好</backData2>");
                out.print("</response>");
                out.flush();
                out.close();

                } catch (Exception e) {
                    e.printStackTrace();
                }
        }

下面是jQuery的写法

前台代码

function validate2() {

        var userNm = $("#userNm2").val();
        if (userNm == "")
            return;

        $.ajax({
            url : "LoginServlet?ajax=ajax&userNm=" + escape(userNm),
            async : true,
            type: "GET",
            datatype:"xml",//datatype:"json"
            success : function(xml){
                //json写法
                //var obj = eval ("(" + xml + ")");
                //setMessage(obj.response[0].backData);
                $(xml).find("response").each(function(i)
                {
                    setMessage($(this).children("backData").text());
                });
                //setMessage(xml.getElementsByTagName("response")[0].firstChild.firstChild.data);
            }
        });

后台

if (ajax != null || ajax != ""){
LoginService ls = new LoginServiceImp();
            String userNm = request.getParameter("userNm");
            boolean rv = ls.checkUserNm(userNm);
'{ "response" :[ '{ "backData" : "true" , "backData2"：你好 } ,{ "backData" : "false" , "backData2"：你好1 }']}'

            <?xml version='1.0' encoding='"+"utf-8"+"' ?>
            <response>
                <backData>true</backData>
            </response>
            }

jQuery的后台可能有错误，没有运行