ajax的get與post提交方式

標籤：

Get方式的使用者名稱驗證

1、編寫html代碼

    <form>        使用者名稱[GET]：<input id="usernameID" type="text" name="username" maxlength="4"/>        游標移出後，立即檢查結果    </form>    <hr/>    <span id="resID"></span>

2、編寫ajax.js檔案

//建立AJAX非同步對象，即XMLHttpRequestfunction createAJAX(){    var ajax = null;    try{        ajax = new ActiveXObject("microsoft.xmlhttp");    }catch(e1){        try{            ajax = new XMLHttpRequest();        }catch(e2){            alert("你的瀏覽器不支援ajax，請更換瀏覽器");        }    }    return ajax;}

3、HTML代碼中引入js檔案

 <script type="text/javascript" src="js/ajax.js"></script>

4、get方式判斷

    <script type="text/javascript">        //定位文字框，同時提供焦點失去事件        document.getElementById("usernameID").onblur = function(){            //擷取文字框中輸入的值            var username = this.value;            //如果使用者沒有填內容            if(username.length == 0){                //提示                 document.getElementById("resID").innerHTML = "使用者名稱必填";            }else{                //對漢字進行UTF-8(U8)的編碼                username = encodeURI(username);                //NO1)                var ajax = createAJAX();                //NO2)                var method = "GET";                var url = "${pageContext.request.contextPath}/UserServlet?time="+new Date().getTime()+"&username=" + username;                ajax.open(method,url);                //NO3)                ajax.send(null);                                //--------------------------------------------------------等待                                //NO4)                ajax.onreadystatechange = function(){                    if(ajax.readyState == 4){                        if(ajax.status == 200){                            //NO5)                            var tip = ajax.responseText;                            //NO6)                            document.getElementById("resID").innerHTML = tip;                        }                    }                }            }        }    </script>

    public void doGet(HttpServletRequest request, HttpServletResponse response)throws ServletException, IOException {        String username = request.getParameter("username");        byte[] buf = username.getBytes("ISO8859-1");        username = new String(buf,"UTF-8");        System.out.println("username=" + username);        String tip = "<font color=‘green‘>可以註冊</font>";        if("傑克".equals(username)){            tip = "<font color=‘red‘>該使用者已存在</font>";        }        response.setContentType("text/html;charset=UTF-8");        PrintWriter pw = response.getWriter();        pw.write(tip);        pw.flush();        pw.close();    }

5、post方式判斷

    <script type="text/javascript">        document.getElementById("usernameID").onblur = function(){            var username = this.value;//傑克            //NO1)            var ajax = createAJAX();            //NO2)            var method = "POST";            var url = "${pageContext.request.contextPath}/UserServlet?time="+new Date().getTime();            ajax.open(method,url);            //設定AJAX要求標頭為POST，他會將請求體中的漢字自動進行UTF-8的編碼            ajax.setRequestHeader("content-type","application/x-www-form-urlencoded");            //NO3)            var content = "username=" + username;            ajax.send(content);                                    //===========================================等待                                    //NO4)            ajax.onreadystatechange = function(){                if(ajax.readyState == 4){                    if(ajax.status == 200){                        //NO5)                        var tip = ajax.responseText;                                            //NO6)                        //建立img標籤                        var imgElement = document.createElement("img");                        //設定img標籤的src/width/height的屬性值                        imgElement.src = tip;                        imgElement.style.width = "12px";                        imgElement.style.height = "12px";                        //定位span標籤                        var spanElement = document.getElementById("resID");                        //清空span標籤中的內容                        spanElement.innerHTML = "";                        //將img標籤加入到span標籤中                        spanElement.appendChild(imgElement);                    }                }            }        }    </script>

    public void doPost(HttpServletRequest request, HttpServletResponse response)throws ServletException, IOException {        request.setCharacterEncoding("UTF-8");        String username = request.getParameter("username");        System.out.println("username=" + username);                String tip = "images/MsgSent.gif";        if("傑克".equals(username)){            tip = "images/MsgError.gif";        }        response.setContentType("text/html;charset=UTF-8");        PrintWriter pw = response.getWriter();        pw.write(tip);        pw.flush();        pw.close();    }

 

ajax的get與post提交方式