ajax的get与post提交方式

Posted 2020-08-12

Get方式的用户名验证

1、编写html代码

    <form>
        用户名[GET]：<input id="usernameID" type="text" name="username" maxlength="4"/>
        光标移出后，立即检查结果
    </form>
    <hr/>
    <span id="resID"></span>

2、编写ajax.js文件

//创建AJAX异步对象，即XMLHttpRequest
function 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();
    }