首页 > 代码库 > ajax的get与post提交方式

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="http://www.mamicode.com/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 =http://www.mamicode.com/ 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提交方式