码迷,mamicode.com
首页 > Web开发 > 详细

ajax的get与post提交方式

时间:2016-10-04 21:03:49      阅读:273      评论:0      收藏:0      [点我收藏+]

标签:

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();
    }

 

ajax的get与post提交方式

标签:

原文地址:http://www.cnblogs.com/imzhuo/p/5931168.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!