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的後臺可能有錯誤，沒有運行